Unverified Commit 2ab2ca2b authored by Darren Austin's avatar Darren Austin Committed by GitHub

Migrate FloatingActionButton to Material 3 (#94486)

parent 20ff180a
{ {
"version": "v0.72", "version": "v0.74",
"date": "2021-12-16 00:27:25.239571", "date": "2022-01-06",
"md.sys.color.light.on-tertiary": "md.ref.palette.tertiary100", "md.sys.color.light.on-tertiary": "md.ref.palette.tertiary100",
"md.sys.color.light.on-secondary-container": "md.ref.palette.secondary10", "md.sys.color.light.on-secondary-container": "md.ref.palette.secondary10",
"md.sys.color.light.on-secondary": "md.ref.palette.secondary100", "md.sys.color.light.on-secondary": "md.ref.palette.secondary100",
......
...@@ -43,6 +43,7 @@ class FloatingActionButtonThemeData with Diagnosticable { ...@@ -43,6 +43,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
this.highlightElevation, this.highlightElevation,
this.shape, this.shape,
this.enableFeedback, this.enableFeedback,
this.iconSize,
this.sizeConstraints, this.sizeConstraints,
this.smallSizeConstraints, this.smallSizeConstraints,
this.largeSizeConstraints, this.largeSizeConstraints,
...@@ -103,6 +104,9 @@ class FloatingActionButtonThemeData with Diagnosticable { ...@@ -103,6 +104,9 @@ class FloatingActionButtonThemeData with Diagnosticable {
/// ignored. /// ignored.
final bool? enableFeedback; final bool? enableFeedback;
/// Overrides the default icon size for the [FloatingActionButton];
final double? iconSize;
/// Overrides the default size constraints for the [FloatingActionButton]. /// Overrides the default size constraints for the [FloatingActionButton].
final BoxConstraints? sizeConstraints; final BoxConstraints? sizeConstraints;
...@@ -140,6 +144,7 @@ class FloatingActionButtonThemeData with Diagnosticable { ...@@ -140,6 +144,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
double? highlightElevation, double? highlightElevation,
ShapeBorder? shape, ShapeBorder? shape,
bool? enableFeedback, bool? enableFeedback,
double? iconSize,
BoxConstraints? sizeConstraints, BoxConstraints? sizeConstraints,
BoxConstraints? smallSizeConstraints, BoxConstraints? smallSizeConstraints,
BoxConstraints? largeSizeConstraints, BoxConstraints? largeSizeConstraints,
...@@ -161,6 +166,7 @@ class FloatingActionButtonThemeData with Diagnosticable { ...@@ -161,6 +166,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
highlightElevation: highlightElevation ?? this.highlightElevation, highlightElevation: highlightElevation ?? this.highlightElevation,
shape: shape ?? this.shape, shape: shape ?? this.shape,
enableFeedback: enableFeedback ?? this.enableFeedback, enableFeedback: enableFeedback ?? this.enableFeedback,
iconSize: iconSize ?? this.iconSize,
sizeConstraints: sizeConstraints ?? this.sizeConstraints, sizeConstraints: sizeConstraints ?? this.sizeConstraints,
smallSizeConstraints: smallSizeConstraints ?? this.smallSizeConstraints, smallSizeConstraints: smallSizeConstraints ?? this.smallSizeConstraints,
largeSizeConstraints: largeSizeConstraints ?? this.largeSizeConstraints, largeSizeConstraints: largeSizeConstraints ?? this.largeSizeConstraints,
...@@ -193,6 +199,7 @@ class FloatingActionButtonThemeData with Diagnosticable { ...@@ -193,6 +199,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
highlightElevation: lerpDouble(a?.highlightElevation, b?.highlightElevation, t), highlightElevation: lerpDouble(a?.highlightElevation, b?.highlightElevation, t),
shape: ShapeBorder.lerp(a?.shape, b?.shape, t), shape: ShapeBorder.lerp(a?.shape, b?.shape, t),
enableFeedback: t < 0.5 ? a?.enableFeedback : b?.enableFeedback, enableFeedback: t < 0.5 ? a?.enableFeedback : b?.enableFeedback,
iconSize: lerpDouble(a?.iconSize, b?.iconSize, t),
sizeConstraints: BoxConstraints.lerp(a?.sizeConstraints, b?.sizeConstraints, t), sizeConstraints: BoxConstraints.lerp(a?.sizeConstraints, b?.sizeConstraints, t),
smallSizeConstraints: BoxConstraints.lerp(a?.smallSizeConstraints, b?.smallSizeConstraints, t), smallSizeConstraints: BoxConstraints.lerp(a?.smallSizeConstraints, b?.smallSizeConstraints, t),
largeSizeConstraints: BoxConstraints.lerp(a?.largeSizeConstraints, b?.largeSizeConstraints, t), largeSizeConstraints: BoxConstraints.lerp(a?.largeSizeConstraints, b?.largeSizeConstraints, t),
...@@ -218,6 +225,7 @@ class FloatingActionButtonThemeData with Diagnosticable { ...@@ -218,6 +225,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
highlightElevation, highlightElevation,
shape, shape,
enableFeedback, enableFeedback,
iconSize,
sizeConstraints, sizeConstraints,
smallSizeConstraints, smallSizeConstraints,
largeSizeConstraints, largeSizeConstraints,
...@@ -247,6 +255,7 @@ class FloatingActionButtonThemeData with Diagnosticable { ...@@ -247,6 +255,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
&& other.highlightElevation == highlightElevation && other.highlightElevation == highlightElevation
&& other.shape == shape && other.shape == shape
&& other.enableFeedback == enableFeedback && other.enableFeedback == enableFeedback
&& other.iconSize == iconSize
&& other.sizeConstraints == sizeConstraints && other.sizeConstraints == sizeConstraints
&& other.smallSizeConstraints == smallSizeConstraints && other.smallSizeConstraints == smallSizeConstraints
&& other.largeSizeConstraints == largeSizeConstraints && other.largeSizeConstraints == largeSizeConstraints
...@@ -272,6 +281,7 @@ class FloatingActionButtonThemeData with Diagnosticable { ...@@ -272,6 +281,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
properties.add(DoubleProperty('highlightElevation', highlightElevation, defaultValue: null)); properties.add(DoubleProperty('highlightElevation', highlightElevation, defaultValue: null));
properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null)); properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape, defaultValue: null));
properties.add(DiagnosticsProperty<bool>('enableFeedback', enableFeedback, defaultValue: null)); properties.add(DiagnosticsProperty<bool>('enableFeedback', enableFeedback, defaultValue: null));
properties.add(DoubleProperty('iconSize', iconSize, defaultValue: null));
properties.add(DiagnosticsProperty<BoxConstraints>('sizeConstraints', sizeConstraints, defaultValue: null)); properties.add(DiagnosticsProperty<BoxConstraints>('sizeConstraints', sizeConstraints, defaultValue: null));
properties.add(DiagnosticsProperty<BoxConstraints>('smallSizeConstraints', smallSizeConstraints, defaultValue: null)); properties.add(DiagnosticsProperty<BoxConstraints>('smallSizeConstraints', smallSizeConstraints, defaultValue: null));
properties.add(DiagnosticsProperty<BoxConstraints>('largeSizeConstraints', largeSizeConstraints, defaultValue: null)); properties.add(DiagnosticsProperty<BoxConstraints>('largeSizeConstraints', largeSizeConstraints, defaultValue: null));
......
...@@ -1134,10 +1134,6 @@ class ThemeData with Diagnosticable { ...@@ -1134,10 +1134,6 @@ class ThemeData with Diagnosticable {
/// start using new colors, typography and other features of Material 3. /// start using new colors, typography and other features of Material 3.
/// If false, they will use the Material 2 look and feel. /// If false, they will use the Material 2 look and feel.
/// ///
/// Currently no components have been migrated to support Material 3.
/// As they are updated to include Material 3 support this documentation
/// will be modified to indicate exactly what widgets this flag will affect.
///
/// During the migration to Material 3, turning this on may yield /// During the migration to Material 3, turning this on may yield
/// inconsistent look and feel in your app. Some components will be migrated /// inconsistent look and feel in your app. Some components will be migrated
/// before others and typography changes will be coming in stages. /// before others and typography changes will be coming in stages.
...@@ -1148,6 +1144,10 @@ class ThemeData with Diagnosticable { ...@@ -1148,6 +1144,10 @@ class ThemeData with Diagnosticable {
/// all uses of it. Everything will use the Material 3 look and feel at /// all uses of it. Everything will use the Material 3 look and feel at
/// that point. /// that point.
/// ///
/// Components that have been migrated to Material 3 are:
///
/// * [FloatingActionButton]
///
/// See also: /// See also:
/// ///
/// * [Material Design 3](https://m3.material.io/). /// * [Material Design 3](https://m3.material.io/).
......
...@@ -33,6 +33,8 @@ void main() { ...@@ -33,6 +33,8 @@ void main() {
expect(_getRawMaterialButton(tester).shape, const CircleBorder()); expect(_getRawMaterialButton(tester).shape, const CircleBorder());
expect(_getRawMaterialButton(tester).splashColor, ThemeData().splashColor); expect(_getRawMaterialButton(tester).splashColor, ThemeData().splashColor);
expect(_getRawMaterialButton(tester).constraints, const BoxConstraints.tightFor(width: 56.0, height: 56.0)); expect(_getRawMaterialButton(tester).constraints, const BoxConstraints.tightFor(width: 56.0, height: 56.0));
expect(_getIconSize(tester).width, 24.0);
expect(_getIconSize(tester).height, 24.0);
}); });
testWidgets('FloatingActionButtonThemeData values are used when no FloatingActionButton properties are specified', (WidgetTester tester) async { testWidgets('FloatingActionButtonThemeData values are used when no FloatingActionButton properties are specified', (WidgetTester tester) async {
...@@ -138,6 +140,7 @@ void main() { ...@@ -138,6 +140,7 @@ void main() {
testWidgets('FloatingActionButton.small uses custom constraints when specified in the theme', (WidgetTester tester) async { testWidgets('FloatingActionButton.small uses custom constraints when specified in the theme', (WidgetTester tester) async {
const BoxConstraints constraints = BoxConstraints.tightFor(width: 100.0, height: 100.0); const BoxConstraints constraints = BoxConstraints.tightFor(width: 100.0, height: 100.0);
const double iconSize = 24.0;
await tester.pumpWidget(MaterialApp( await tester.pumpWidget(MaterialApp(
theme: ThemeData().copyWith( theme: ThemeData().copyWith(
...@@ -154,10 +157,13 @@ void main() { ...@@ -154,10 +157,13 @@ void main() {
)); ));
expect(_getRawMaterialButton(tester).constraints, constraints); expect(_getRawMaterialButton(tester).constraints, constraints);
expect(_getIconSize(tester).width, iconSize);
expect(_getIconSize(tester).height, iconSize);
}); });
testWidgets('FloatingActionButton.large uses custom constraints when specified in the theme', (WidgetTester tester) async { testWidgets('FloatingActionButton.large uses custom constraints when specified in the theme', (WidgetTester tester) async {
const BoxConstraints constraints = BoxConstraints.tightFor(width: 100.0, height: 100.0); const BoxConstraints constraints = BoxConstraints.tightFor(width: 100.0, height: 100.0);
const double iconSize = 36.0;
await tester.pumpWidget(MaterialApp( await tester.pumpWidget(MaterialApp(
theme: ThemeData().copyWith( theme: ThemeData().copyWith(
...@@ -174,6 +180,8 @@ void main() { ...@@ -174,6 +180,8 @@ void main() {
)); ));
expect(_getRawMaterialButton(tester).constraints, constraints); expect(_getRawMaterialButton(tester).constraints, constraints);
expect(_getIconSize(tester).width, iconSize);
expect(_getIconSize(tester).height, iconSize);
}); });
testWidgets('FloatingActionButton.extended uses custom properties when specified in the theme', (WidgetTester tester) async { testWidgets('FloatingActionButton.extended uses custom properties when specified in the theme', (WidgetTester tester) async {
...@@ -271,6 +279,7 @@ void main() { ...@@ -271,6 +279,7 @@ void main() {
highlightElevation: 43, highlightElevation: 43,
shape: BeveledRectangleBorder(), shape: BeveledRectangleBorder(),
enableFeedback: true, enableFeedback: true,
iconSize: 42,
sizeConstraints: BoxConstraints.tightFor(width: 100.0, height: 100.0), sizeConstraints: BoxConstraints.tightFor(width: 100.0, height: 100.0),
smallSizeConstraints: BoxConstraints.tightFor(width: 101.0, height: 101.0), smallSizeConstraints: BoxConstraints.tightFor(width: 101.0, height: 101.0),
largeSizeConstraints: BoxConstraints.tightFor(width: 102.0, height: 102.0), largeSizeConstraints: BoxConstraints.tightFor(width: 102.0, height: 102.0),
...@@ -298,6 +307,7 @@ void main() { ...@@ -298,6 +307,7 @@ void main() {
'highlightElevation: 43.0', 'highlightElevation: 43.0',
'shape: BeveledRectangleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none), BorderRadius.zero)', 'shape: BeveledRectangleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none), BorderRadius.zero)',
'enableFeedback: true', 'enableFeedback: true',
'iconSize: 42.0',
'sizeConstraints: BoxConstraints(w=100.0, h=100.0)', 'sizeConstraints: BoxConstraints(w=100.0, h=100.0)',
'smallSizeConstraints: BoxConstraints(w=101.0, h=101.0)', 'smallSizeConstraints: BoxConstraints(w=101.0, h=101.0)',
'largeSizeConstraints: BoxConstraints(w=102.0, h=102.0)', 'largeSizeConstraints: BoxConstraints(w=102.0, h=102.0)',
...@@ -326,3 +336,15 @@ RichText _getRichText(WidgetTester tester) { ...@@ -326,3 +336,15 @@ RichText _getRichText(WidgetTester tester) {
), ),
); );
} }
SizedBox _getIconSize(WidgetTester tester) {
return tester.widget<SizedBox>(
find.descendant(
of: find.descendant(
of: find.byType(FloatingActionButton),
matching: find.byType(Icon),
),
matching: find.byType(SizedBox),
),
);
}
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