-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Open
Labels
Design Systems StudyIssues identified during the custom design system study.Issues identified during the custom design system study.P2Important issues not at the top of the work listImportant issues not at the top of the work lista: fidelityMatching the OEM platforms betterMatching the OEM platforms betterc: API breakBackwards-incompatible API changesBackwards-incompatible API changesf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team
Description
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
flutter/packages/flutter/lib/src/material/app_bar.dart
Lines 2381 to 2387 in 0c7d84a
| 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
AppBarflutter/packages/flutter/lib/src/material/app_bar.dart
Lines 908 to 927 in 0c7d84a
| 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.
GCSBOSS, flutterdevsgou and gnprice
Metadata
Metadata
Assignees
Labels
Design Systems StudyIssues identified during the custom design system study.Issues identified during the custom design system study.P2Important issues not at the top of the work listImportant issues not at the top of the work lista: fidelityMatching the OEM platforms betterMatching the OEM platforms betterc: API breakBackwards-incompatible API changesBackwards-incompatible API changesf: material designflutter/packages/flutter/material repository.flutter/packages/flutter/material repository.found in release: 3.3Found to occur in 3.3Found to occur in 3.3found in release: 3.7Found to occur in 3.7Found to occur in 3.7frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamOwned by Design Languages teamtriaged-designTriaged by Design Languages teamTriaged by Design Languages team