Skip to content

toolbarHeight of AppBar not affected by Material 3 #117903

@yjlin0224

Description

@yjlin0224

According to Material Design 3 specs, height of app bar is 64dp.
Here is an example of app bar in material 3:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorSchemeSeed: const Color(0xff6750a4),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('App Bar')),
        body: Container(color: Colors.black),
      ),
    );
  }
}

and we can find out that height of app bar is 56 (Material 2 spec) but not 64.

After I tracked source code, I found _AppBarDefaultsM3 is already defined toolbarHeight is 64.0

class _AppBarDefaultsM3 extends AppBarTheme {
_AppBarDefaultsM3(this.context)
: super(
elevation: 0.0,
scrolledUnderElevation: 3.0,
titleSpacing: NavigationToolbar.kMiddleSpacing,
toolbarHeight: 64.0,

But it is not used when building AppBar
Widget build(BuildContext context) {
assert(!widget.primary || debugCheckHasMediaQuery(context));
assert(debugCheckHasMaterialLocalizations(context));
final ThemeData theme = Theme.of(context);
final AppBarTheme appBarTheme = AppBarTheme.of(context);
final AppBarTheme defaults = theme.useMaterial3 ? _AppBarDefaultsM3(context) : _AppBarDefaultsM2(context);
final ScaffoldState? scaffold = Scaffold.maybeOf(context);
final ModalRoute<dynamic>? parentRoute = ModalRoute.of(context);
final FlexibleSpaceBarSettings? settings = context.dependOnInheritedWidgetOfExactType<FlexibleSpaceBarSettings>();
final Set<MaterialState> states = <MaterialState>{
if (settings?.isScrolledUnder ?? _scrolledUnder) MaterialState.scrolledUnder,
};
final bool hasDrawer = scaffold?.hasDrawer ?? false;
final bool hasEndDrawer = scaffold?.hasEndDrawer ?? false;
final bool canPop = parentRoute?.canPop ?? false;
final bool useCloseButton = parentRoute is PageRoute<dynamic> && parentRoute.fullscreenDialog;
final double toolbarHeight = widget.toolbarHeight ?? appBarTheme.toolbarHeight ?? kToolbarHeight;

Maybe change

    final double toolbarHeight = widget.toolbarHeight ?? appBarTheme.toolbarHeight ?? kToolbarHeight;

to

    final double toolbarHeight = widget.toolbarHeight ?? appBarTheme.toolbarHeight ?? defaults.toolbarHeight ?? kToolbarHeight;

will fix this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Design Systems StudyIssues identified during the custom design system study.P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms betterc: API breakBackwards-incompatible API changesf: material designflutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions