Skip to content

Commit 56e1bdd

Browse files
TahaTesserTahaTesser
authored
Fix SliverAppBar.medium & SliverAppBar.large title overlap with leading/actions widgets, leading width, and title spacing (#120780)
* Fix `SliverAppBar.medium` & `SliverAppBar.large` title overlap with leading/actions widgets, leading width, and title spacing * Add `titleSpacing` theme tests and consolidate multiple tests for the same widgets
1 parent af347d6 commit 56e1bdd

File tree

4 files changed

+595
-72
lines changed

4 files changed

+595
-72
lines changed

‎dev/tools/gen_defaults/lib/app_bar_template.dart

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,10 @@ class _MediumScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
7979
${textStyle('md.comp.top-app-bar.medium.headline')}?.apply(color: ${color('md.comp.top-app-bar.medium.headline.color')});
8080
8181
@override
82-
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.fromSTEB(48, 0, 16, 0);
82+
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.only(start: 40);
8383
8484
@override
85-
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 0);
85+
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsetsDirectional.only(start: 40);
8686
8787
@override
8888
EdgeInsetsGeometry? get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 20);
@@ -108,10 +108,10 @@ class _LargeScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
108108
${textStyle('md.comp.top-app-bar.large.headline')}?.apply(color: ${color('md.comp.top-app-bar.large.headline.color')});
109109
110110
@override
111-
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.fromSTEB(48, 0, 16, 0);
111+
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.only(start: 40);
112112
113113
@override
114-
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 0);
114+
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsetsDirectional.only(start: 40);
115115
116116
@override
117117
EdgeInsetsGeometry? get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 28);

‎packages/flutter/lib/src/material/app_bar.dart

Lines changed: 40 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1528,13 +1528,16 @@ class SliverAppBar extends StatefulWidget {
15281528
key: key,
15291529
leading: leading,
15301530
automaticallyImplyLeading: automaticallyImplyLeading,
1531-
actions: actions,
15321531
flexibleSpace: flexibleSpace ?? _ScrollUnderFlexibleSpace(
1532+
hasLeading: leading != null,
15331533
title: title,
1534+
actions: actions,
15341535
foregroundColor: foregroundColor,
15351536
variant: _ScrollUnderFlexibleVariant.medium,
15361537
centerCollapsedTitle: centerTitle,
15371538
primary: primary,
1539+
leadingWidth: leadingWidth,
1540+
titleSpacing: titleSpacing,
15381541
),
15391542
bottom: bottom,
15401543
elevation: elevation,
@@ -1630,13 +1633,16 @@ class SliverAppBar extends StatefulWidget {
16301633
key: key,
16311634
leading: leading,
16321635
automaticallyImplyLeading: automaticallyImplyLeading,
1633-
actions: actions,
16341636
flexibleSpace: flexibleSpace ?? _ScrollUnderFlexibleSpace(
1637+
hasLeading: leading != null,
16351638
title: title,
1639+
actions: actions,
16361640
foregroundColor: foregroundColor,
16371641
variant: _ScrollUnderFlexibleVariant.large,
16381642
centerCollapsedTitle: centerTitle,
16391643
primary: primary,
1644+
leadingWidth: leadingWidth,
1645+
titleSpacing: titleSpacing,
16401646
),
16411647
bottom: bottom,
16421648
elevation: elevation,
@@ -2077,18 +2083,26 @@ enum _ScrollUnderFlexibleVariant { medium, large }
20772083

20782084
class _ScrollUnderFlexibleSpace extends StatelessWidget {
20792085
const _ScrollUnderFlexibleSpace({
2086+
required this.hasLeading,
20802087
this.title,
2088+
this.actions,
20812089
this.foregroundColor,
20822090
required this.variant,
20832091
this.centerCollapsedTitle,
20842092
this.primary = true,
2093+
this.leadingWidth,
2094+
this.titleSpacing,
20852095
});
20862096

2097+
final bool hasLeading;
20872098
final Widget? title;
2099+
final List<Widget>? actions;
20882100
final Color? foregroundColor;
20892101
final _ScrollUnderFlexibleVariant variant;
20902102
final bool? centerCollapsedTitle;
20912103
final bool primary;
2104+
final double? leadingWidth;
2105+
final double? titleSpacing;
20922106

20932107
@override
20942108
Widget build(BuildContext context) {
@@ -2142,24 +2156,35 @@ class _ScrollUnderFlexibleSpace extends StatelessWidget {
21422156
centerTitle = centerCollapsedTitle ?? appBarTheme.centerTitle ?? platformCenter();
21432157
}
21442158

2159+
EdgeInsetsGeometry effectiveCollapsedTitlePadding = EdgeInsets.zero;
2160+
if (hasLeading && leadingWidth == null) {
2161+
effectiveCollapsedTitlePadding = centerTitle
2162+
? config.collapsedCenteredTitlePadding!
2163+
: config.collapsedTitlePadding!;
2164+
} else if (hasLeading && leadingWidth != null) {
2165+
effectiveCollapsedTitlePadding = EdgeInsetsDirectional.only(start: leadingWidth!);
2166+
}
21452167
final bool isCollapsed = settings.isScrolledUnder ?? false;
21462168
return Column(
21472169
children: <Widget>[
21482170
Padding(
21492171
padding: EdgeInsets.only(top: topPadding),
21502172
child: Container(
21512173
height: collapsedHeight,
2152-
padding: centerTitle ? config.collapsedCenteredTitlePadding : config.collapsedTitlePadding,
2153-
child: AnimatedOpacity(
2154-
opacity: isCollapsed ? 1 : 0,
2155-
duration: const Duration(milliseconds: 500),
2156-
curve: const Cubic(0.2, 0.0, 0.0, 1.0),
2157-
child: Align(
2158-
alignment: centerTitle
2159-
? Alignment.center
2160-
: AlignmentDirectional.centerStart,
2174+
padding: effectiveCollapsedTitlePadding,
2175+
child: NavigationToolbar(
2176+
centerMiddle: centerTitle,
2177+
middleSpacing: titleSpacing ?? appBarTheme.titleSpacing ?? NavigationToolbar.kMiddleSpacing,
2178+
middle: AnimatedOpacity(
2179+
opacity: isCollapsed ? 1 : 0,
2180+
duration: const Duration(milliseconds: 500),
2181+
curve: const Cubic(0.2, 0.0, 0.0, 1.0),
21612182
child: collapsedTitle,
21622183
),
2184+
trailing: actions != null ? Row(
2185+
mainAxisSize: MainAxisSize.min,
2186+
children: actions!,
2187+
) : null,
21632188
),
21642189
),
21652190
),
@@ -2295,10 +2320,10 @@ class _MediumScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
22952320
_textTheme.headlineSmall?.apply(color: _colors.onSurface);
22962321

22972322
@override
2298-
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.fromSTEB(48, 0, 16, 0);
2323+
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.only(start: 40);
22992324

23002325
@override
2301-
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 0);
2326+
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsetsDirectional.only(start: 40);
23022327

23032328
@override
23042329
EdgeInsetsGeometry? get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 20);
@@ -2324,10 +2349,10 @@ class _LargeScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
23242349
_textTheme.headlineMedium?.apply(color: _colors.onSurface);
23252350

23262351
@override
2327-
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.fromSTEB(48, 0, 16, 0);
2352+
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.only(start: 40);
23282353

23292354
@override
2330-
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 0);
2355+
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsetsDirectional.only(start: 40);
23312356

23322357
@override
23332358
EdgeInsetsGeometry? get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 28);

0 commit comments

Comments
 (0)