Unverified Commit d0e5b2fb authored by hangyu's avatar hangyu Committed by GitHub

Add a way to customize padding in BottomAppBar (#115175)

* squash 5 into 1

fix

Update packages/flutter/lib/src/material/bottom_app_bar.dart

lint

update tests
Co-Authored-By: 's avatarHans Muller <hansmuller@chromium.org>

* lint
Co-authored-by: 's avatarHans Muller <hansmuller@chromium.org>
parent e66183da
...@@ -69,6 +69,7 @@ class BottomAppBar extends StatefulWidget { ...@@ -69,6 +69,7 @@ class BottomAppBar extends StatefulWidget {
this.clipBehavior = Clip.none, this.clipBehavior = Clip.none,
this.notchMargin = 4.0, this.notchMargin = 4.0,
this.child, this.child,
this.padding,
this.surfaceTintColor, this.surfaceTintColor,
this.height, this.height,
}) : assert(elevation == null || elevation >= 0.0), }) : assert(elevation == null || elevation >= 0.0),
...@@ -83,6 +84,12 @@ class BottomAppBar extends StatefulWidget { ...@@ -83,6 +84,12 @@ class BottomAppBar extends StatefulWidget {
/// being an [IconButton] with the [Icons.menu] icon. /// being an [IconButton] with the [Icons.menu] icon.
final Widget? child; final Widget? child;
/// The amount of space to surround the child inside the bounds of the [BottomAppBar].
///
/// In Material 3 the padding will default to `EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0)`
/// Otherwise the value will default to EdgeInsets.zero.
final EdgeInsetsGeometry? padding;
/// The bottom app bar's background color. /// The bottom app bar's background color.
/// ///
/// If this property is null then [BottomAppBarTheme.color] of /// If this property is null then [BottomAppBarTheme.color] of
...@@ -173,10 +180,10 @@ class _BottomAppBarState extends State<BottomAppBar> { ...@@ -173,10 +180,10 @@ class _BottomAppBarState extends State<BottomAppBar> {
final Color surfaceTintColor = widget.surfaceTintColor ?? babTheme.surfaceTintColor ?? defaults.surfaceTintColor!; final Color surfaceTintColor = widget.surfaceTintColor ?? babTheme.surfaceTintColor ?? defaults.surfaceTintColor!;
final Color effectiveColor = isMaterial3 ? color : ElevationOverlay.applyOverlay(context, color, elevation); final Color effectiveColor = isMaterial3 ? color : ElevationOverlay.applyOverlay(context, color, elevation);
final Widget? child = isMaterial3 ? Padding( final Widget child = Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0), padding: widget.padding ?? babTheme.padding ?? (isMaterial3 ? const EdgeInsets.symmetric(vertical: 12.0, horizontal: 16.0) : EdgeInsets.zero),
child: widget.child, child: widget.child,
) : widget.child; );
return SizedBox( return SizedBox(
height: height, height: height,
......
...@@ -34,31 +34,35 @@ class BottomAppBarTheme with Diagnosticable { ...@@ -34,31 +34,35 @@ class BottomAppBarTheme with Diagnosticable {
this.shape, this.shape,
this.height, this.height,
this.surfaceTintColor, this.surfaceTintColor,
this.padding,
}); });
/// Default value for [BottomAppBar.color]. /// Overrides the default value for [BottomAppBar.color].
/// ///
/// If null, [BottomAppBar] uses [ThemeData.bottomAppBarColor]. /// If null, [BottomAppBar] uses [ThemeData.bottomAppBarColor].
final Color? color; final Color? color;
/// Default value for [BottomAppBar.elevation]. /// Overrides the default value for [BottomAppBar.elevation].
final double? elevation; final double? elevation;
/// Default value for [BottomAppBar.shape]. /// Overrides the default value for [BottomAppBar.shape].
final NotchedShape? shape; final NotchedShape? shape;
/// Default value for [BottomAppBar.height]. /// Overrides the default value for [BottomAppBar.height].
/// ///
/// If null, [BottomAppBar] height will be the minimum on the non material 3. /// If null, [BottomAppBar] height will be the minimum on the non material 3.
final double? height; final double? height;
/// Default value for [BottomAppBar.surfaceTintColor]. /// Overrides the default value for [BottomAppBar.surfaceTintColor].
/// ///
/// If null, [BottomAppBar] will not display an overlay color. /// If null, [BottomAppBar] will not display an overlay color.
/// ///
/// See [Material.surfaceTintColor] for more details. /// See [Material.surfaceTintColor] for more details.
final Color? surfaceTintColor; final Color? surfaceTintColor;
/// Overrides the default value for [BottomAppBar.padding].
final EdgeInsetsGeometry? padding;
/// Creates a copy of this object but with the given fields replaced with the /// Creates a copy of this object but with the given fields replaced with the
/// new values. /// new values.
BottomAppBarTheme copyWith({ BottomAppBarTheme copyWith({
...@@ -67,6 +71,7 @@ class BottomAppBarTheme with Diagnosticable { ...@@ -67,6 +71,7 @@ class BottomAppBarTheme with Diagnosticable {
NotchedShape? shape, NotchedShape? shape,
double? height, double? height,
Color? surfaceTintColor, Color? surfaceTintColor,
EdgeInsetsGeometry? padding,
}) { }) {
return BottomAppBarTheme( return BottomAppBarTheme(
color: color ?? this.color, color: color ?? this.color,
...@@ -74,6 +79,7 @@ class BottomAppBarTheme with Diagnosticable { ...@@ -74,6 +79,7 @@ class BottomAppBarTheme with Diagnosticable {
shape: shape ?? this.shape, shape: shape ?? this.shape,
height: height ?? this.height, height: height ?? this.height,
surfaceTintColor: surfaceTintColor ?? this.surfaceTintColor, surfaceTintColor: surfaceTintColor ?? this.surfaceTintColor,
padding: padding ?? this.padding,
); );
} }
...@@ -94,7 +100,8 @@ class BottomAppBarTheme with Diagnosticable { ...@@ -94,7 +100,8 @@ class BottomAppBarTheme with Diagnosticable {
elevation: lerpDouble(a?.elevation, b?.elevation, t), elevation: lerpDouble(a?.elevation, b?.elevation, t),
shape: t < 0.5 ? a?.shape : b?.shape, shape: t < 0.5 ? a?.shape : b?.shape,
height: lerpDouble(a?.height, b?.height, t), height: lerpDouble(a?.height, b?.height, t),
surfaceTintColor: Color.lerp(a?.color, b?.color, t), surfaceTintColor: Color.lerp(a?.surfaceTintColor, b?.surfaceTintColor, t),
padding: EdgeInsetsGeometry.lerp(a?.padding, b?.padding, t),
); );
} }
...@@ -105,6 +112,7 @@ class BottomAppBarTheme with Diagnosticable { ...@@ -105,6 +112,7 @@ class BottomAppBarTheme with Diagnosticable {
shape, shape,
height, height,
surfaceTintColor, surfaceTintColor,
padding,
); );
@override @override
...@@ -120,7 +128,8 @@ class BottomAppBarTheme with Diagnosticable { ...@@ -120,7 +128,8 @@ class BottomAppBarTheme with Diagnosticable {
&& other.elevation == elevation && other.elevation == elevation
&& other.shape == shape && other.shape == shape
&& other.height == height && other.height == height
&& other.surfaceTintColor == surfaceTintColor; && other.surfaceTintColor == surfaceTintColor
&& other.padding == padding;
} }
@override @override
...@@ -131,5 +140,6 @@ class BottomAppBarTheme with Diagnosticable { ...@@ -131,5 +140,6 @@ class BottomAppBarTheme with Diagnosticable {
properties.add(DiagnosticsProperty<NotchedShape>('shape', shape, defaultValue: null)); properties.add(DiagnosticsProperty<NotchedShape>('shape', shape, defaultValue: null));
properties.add(DiagnosticsProperty<double>('height', height, defaultValue: null)); properties.add(DiagnosticsProperty<double>('height', height, defaultValue: null));
properties.add(ColorProperty('surfaceTintColor', surfaceTintColor, defaultValue: null)); properties.add(ColorProperty('surfaceTintColor', surfaceTintColor, defaultValue: null));
properties.add(DiagnosticsProperty<EdgeInsetsGeometry>('padding', padding, defaultValue: null));
} }
} }
...@@ -85,6 +85,71 @@ void main() { ...@@ -85,6 +85,71 @@ void main() {
); );
}, skip: isBrowser); // https://github.com/flutter/flutter/issues/44572 }, skip: isBrowser); // https://github.com/flutter/flutter/issues/44572
testWidgets('Custom Padding', (WidgetTester tester) async {
const EdgeInsets customPadding = EdgeInsets.all(10);
await tester.pumpWidget(
MaterialApp(
theme: ThemeData.from(colorScheme: const ColorScheme.light()),
home: Builder(
builder: (BuildContext context) {
return const Scaffold(
body: Align(
alignment: Alignment.bottomCenter,
child: BottomAppBar(
padding: customPadding,
child:ColoredBox(
color:Colors.green,
child:SizedBox(width: 300, height: 60),
),
),
),
);
},
),
),
);
final BottomAppBar bottomAppBar = tester.widget(find.byType(BottomAppBar));
expect(bottomAppBar.padding, customPadding);
final Rect babRect = tester.getRect(find.byType(BottomAppBar));
final Rect childRect = tester.getRect(find.byType(ColoredBox));
expect(childRect, const Rect.fromLTRB(250, 530, 550, 590));
expect(babRect, const Rect.fromLTRB(240, 520, 560, 600));
});
testWidgets('Custom Padding in Material 3', (WidgetTester tester) async {
const EdgeInsets customPadding = EdgeInsets.all(10);
await tester.pumpWidget(
MaterialApp(
theme: ThemeData.from(colorScheme: const ColorScheme.light(), useMaterial3: true),
home: Builder(
builder: (BuildContext context) {
return const Scaffold(
body: Align(
alignment: Alignment.bottomCenter,
child: BottomAppBar(
padding: customPadding,
child:ColoredBox(
color:Colors.green,
child:SizedBox(width: 300, height: 60),
),
),
),
);
},
),
),
);
final BottomAppBar bottomAppBar = tester.widget(find.byType(BottomAppBar));
expect(bottomAppBar.padding, customPadding);
final Rect babRect = tester.getRect(find.byType(BottomAppBar));
final Rect childRect = tester.getRect(find.byType(ColoredBox));
expect(childRect, const Rect.fromLTRB(250, 530, 550, 590));
expect(babRect, const Rect.fromLTRB(240, 520, 560, 600));
});
testWidgets('color defaults to Theme.bottomAppBarColor', (WidgetTester tester) async { testWidgets('color defaults to Theme.bottomAppBarColor', (WidgetTester tester) async {
await tester.pumpWidget( await tester.pumpWidget(
MaterialApp( MaterialApp(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment