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: Hans Muller <hansmuller@chromium.org> * lint Co-authored-by: Hans Muller <hansmuller@chromium.org>
This commit is contained in:
parent
e66183da33
commit
d0e5b2fbaa
@ -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 {
|
|||||||
/// 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> {
|
|||||||
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 {
|
|||||||
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 {
|
|||||||
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 {
|
|||||||
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 {
|
|||||||
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 {
|
|||||||
shape,
|
shape,
|
||||||
height,
|
height,
|
||||||
surfaceTintColor,
|
surfaceTintColor,
|
||||||
|
padding,
|
||||||
);
|
);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
@ -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 {
|
|||||||
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() {
|
|||||||
);
|
);
|
||||||
}, 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(
|
||||||
|
Loading…
x
Reference in New Issue
Block a user