Migrate FloatingActionButton to Material 3 (#94486)

darrenaustin · web-flow · commit 2ab2ca2bc620 · 2022-01-12T19:15:15.000-08:00
diff --git a/dev/tools/gen_defaults/data/material-tokens.json b/dev/tools/gen_defaults/data/material-tokens.json
@@ -1,6 +1,6 @@
 {
-  "version": "v0.72",
-  "date": "2021-12-16 00:27:25.239571",
+  "version": "v0.74",
+  "date": "2022-01-06",
   "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": "md.ref.palette.secondary100",
diff --git a/packages/flutter/lib/src/material/floating_action_button.dart b/packages/flutter/lib/src/material/floating_action_button.dart
@@ -9,31 +9,14 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/widgets.dart';
 
 import 'button.dart';
+import 'color_scheme.dart';
 import 'floating_action_button_theme.dart';
 import 'scaffold.dart';
+import 'text_theme.dart';
 import 'theme.dart';
 import 'theme_data.dart';
 import 'tooltip.dart';
 
-const BoxConstraints _kSizeConstraints = BoxConstraints.tightFor(
-  width: 56.0,
-  height: 56.0,
-);
-
-const BoxConstraints _kMiniSizeConstraints = BoxConstraints.tightFor(
-  width: 40.0,
-  height: 40.0,
-);
-
-const BoxConstraints _kLargeSizeConstraints = BoxConstraints.tightFor(
-  width: 96.0,
-  height: 96.0,
-);
-
-const BoxConstraints _kExtendedSizeConstraints = BoxConstraints.tightFor(
-  height: 48.0,
-);
-
 class _DefaultHeroTag {
   const _DefaultHeroTag();
   @override
@@ -508,82 +491,80 @@ class FloatingActionButton extends StatelessWidget {
 
   final Widget? _extendedLabel;
 
-  static const double _defaultElevation = 6;
-  static const double _defaultFocusElevation = 6;
-  static const double _defaultHoverElevation = 8;
-  static const double _defaultHighlightElevation = 12;
-  static const ShapeBorder _defaultShape = CircleBorder();
-  static const ShapeBorder _defaultExtendedShape = StadiumBorder();
-
   @override
   Widget build(BuildContext context) {
     final ThemeData theme = Theme.of(context);
     final FloatingActionButtonThemeData floatingActionButtonTheme = theme.floatingActionButtonTheme;
+    final FloatingActionButtonThemeData defaults = theme.useMaterial3
+      ? _M3Defaults(context, _floatingActionButtonType, child != null)
+      : _M2Defaults(context, _floatingActionButtonType, child != null);
 
     final Color foregroundColor = this.foregroundColor
       ?? floatingActionButtonTheme.foregroundColor
-      ?? theme.colorScheme.onSecondary;
+      ?? defaults.foregroundColor!;
     final Color backgroundColor = this.backgroundColor
       ?? floatingActionButtonTheme.backgroundColor
-      ?? theme.colorScheme.secondary;
+      ?? defaults.backgroundColor!;
     final Color focusColor = this.focusColor
       ?? floatingActionButtonTheme.focusColor
-      ?? theme.focusColor;
+      ?? defaults.focusColor!;
     final Color hoverColor = this.hoverColor
       ?? floatingActionButtonTheme.hoverColor
-      ?? theme.hoverColor;
+      ?? defaults.hoverColor!;
     final Color splashColor = this.splashColor
       ?? floatingActionButtonTheme.splashColor
-      ?? theme.splashColor;
+      ?? defaults.splashColor!;
     final double elevation = this.elevation
       ?? floatingActionButtonTheme.elevation
-      ?? _defaultElevation;
+      ?? defaults.elevation!;
     final double focusElevation = this.focusElevation
       ?? floatingActionButtonTheme.focusElevation
-      ?? _defaultFocusElevation;
+      ?? defaults.focusElevation!;
     final double hoverElevation = this.hoverElevation
       ?? floatingActionButtonTheme.hoverElevation
-      ?? _defaultHoverElevation;
+      ?? defaults.hoverElevation!;
     final double disabledElevation = this.disabledElevation
       ?? floatingActionButtonTheme.disabledElevation
+      ?? defaults.disabledElevation
       ?? elevation;
     final double highlightElevation = this.highlightElevation
       ?? floatingActionButtonTheme.highlightElevation
-      ?? _defaultHighlightElevation;
+      ?? defaults.highlightElevation!;
     final MaterialTapTargetSize materialTapTargetSize = this.materialTapTargetSize
       ?? theme.materialTapTargetSize;
     final bool enableFeedback = this.enableFeedback
-      ?? floatingActionButtonTheme.enableFeedback ?? true;
+      ?? floatingActionButtonTheme.enableFeedback
+      ?? defaults.enableFeedback!;
+    final double iconSize = floatingActionButtonTheme.iconSize
+      ?? defaults.iconSize!;
     final TextStyle extendedTextStyle = (this.extendedTextStyle
-        ?? floatingActionButtonTheme.extendedTextStyle
-        ?? theme.textTheme.button!.copyWith(letterSpacing: 1.2)).copyWith(color: foregroundColor);
+      ?? floatingActionButtonTheme.extendedTextStyle
+      ?? defaults.extendedTextStyle!).copyWith(color: foregroundColor);
     final ShapeBorder shape = this.shape
       ?? floatingActionButtonTheme.shape
-      ?? (isExtended ? _defaultExtendedShape : _defaultShape);
+      ?? defaults.shape!;
 
     BoxConstraints sizeConstraints;
-    Widget? resolvedChild = child;
+    Widget? resolvedChild = child != null ? IconTheme.merge(
+      data: IconThemeData(size: iconSize),
+      child: child!,
+    ) : child;
     switch(_floatingActionButtonType) {
       case _FloatingActionButtonType.regular:
-        sizeConstraints = floatingActionButtonTheme.sizeConstraints ?? _kSizeConstraints;
+        sizeConstraints = floatingActionButtonTheme.sizeConstraints ?? defaults.sizeConstraints!;
         break;
       case _FloatingActionButtonType.small:
-        sizeConstraints = floatingActionButtonTheme.smallSizeConstraints ?? _kMiniSizeConstraints;
+        sizeConstraints = floatingActionButtonTheme.smallSizeConstraints ?? defaults.smallSizeConstraints!;
         break;
       case _FloatingActionButtonType.large:
-        sizeConstraints = floatingActionButtonTheme.largeSizeConstraints ?? _kLargeSizeConstraints;
-        // The large FAB uses a larger icon.
-        resolvedChild = child != null ? IconTheme.merge(
-          data: const IconThemeData(size: 36.0),
-          child: child!,
-        ) : child;
+        sizeConstraints = floatingActionButtonTheme.largeSizeConstraints ?? defaults.largeSizeConstraints!;
         break;
       case _FloatingActionButtonType.extended:
-        sizeConstraints = floatingActionButtonTheme.extendedSizeConstraints ?? _kExtendedSizeConstraints;
+        sizeConstraints = floatingActionButtonTheme.extendedSizeConstraints ?? defaults.extendedSizeConstraints!;
         final double iconLabelSpacing = extendedIconLabelSpacing ?? floatingActionButtonTheme.extendedIconLabelSpacing ?? 8.0;
         final EdgeInsetsGeometry padding = extendedPadding
             ?? floatingActionButtonTheme.extendedPadding
-            ?? EdgeInsetsDirectional.only(start: child != null && isExtended ? 16.0 : 20.0, end: 20.0);
+            ?? defaults.extendedPadding!;
         resolvedChild = _ChildOverflowBox(
           child: Padding(
             padding: padding,
@@ -730,3 +711,148 @@ class _RenderChildOverflowBox extends RenderAligningShiftedBox {
     }
   }
 }
+
+// Generate a FloatingActionButtonThemeData that represents
+// the M2 default values. This was generated by hand from the
+// previous hand coded defaults for M2. It uses get method overrides
+// instead of properties to avoid computing values that we may not
+// need upfront.
+class _M2Defaults extends FloatingActionButtonThemeData {
+  _M2Defaults(BuildContext context, this.type, this.hasChild)
+      : _theme = Theme.of(context),
+        _colors = Theme.of(context).colorScheme;
+
+  final _FloatingActionButtonType type;
+  final bool hasChild;
+  final ThemeData _theme;
+  final ColorScheme _colors;
+
+  bool get _isExtended => type == _FloatingActionButtonType.extended;
+  bool get _isLarge => type == _FloatingActionButtonType.large;
+
+  @override Color? get foregroundColor => _colors.onSecondary;
+  @override Color? get backgroundColor => _colors.secondary;
+  @override Color? get focusColor => _theme.focusColor;
+  @override Color? get hoverColor => _theme.hoverColor;
+  @override Color? get splashColor => _theme.splashColor;
+  @override double? get elevation => 6;
+  @override double? get focusElevation => 6;
+  @override double? get hoverElevation => 8;
+  @override double? get highlightElevation => 12;
+  @override ShapeBorder? get shape => _isExtended ? const StadiumBorder() : const CircleBorder();
+  @override bool? get enableFeedback => true;
+  @override double? get iconSize => _isLarge ? 36.0 : 24.0;
+
+  @override
+  BoxConstraints? get sizeConstraints => const BoxConstraints.tightFor(
+    width: 56.0,
+    height: 56.0,
+  );
+
+  @override
+  BoxConstraints? get smallSizeConstraints => const BoxConstraints.tightFor(
+    width: 40.0,
+    height: 40.0,
+  );
+
+  @override
+  BoxConstraints? get largeSizeConstraints => const BoxConstraints.tightFor(
+    width: 96.0,
+    height: 96.0,
+  );
+
+  @override
+  BoxConstraints? get extendedSizeConstraints => const BoxConstraints.tightFor(
+    height: 48.0,
+  );
+
+  @override double? get extendedIconLabelSpacing => 8.0;
+  @override EdgeInsetsGeometry? get extendedPadding => EdgeInsetsDirectional.only(start: hasChild && _isExtended ? 16.0 : 20.0, end: 20.0);
+  @override TextStyle? get extendedTextStyle => _theme.textTheme.button!.copyWith(letterSpacing: 1.2);
+}
+
+// BEGIN GENERATED TOKEN PROPERTIES
+
+// Generated code to the end of this file. Do not edit by hand.
+// These defaults are generated from the Material Design Token
+// database by the script dev/tools/gen_defaults/bin/gen_defaults.dart.
+
+// Generated version v0.74, 2022-01-06
+class _M3Defaults extends FloatingActionButtonThemeData {
+  _M3Defaults(this.context, this.type, this.hasChild)
+    : _colors = Theme.of(context).colorScheme,
+      _textTheme = Theme.of(context).textTheme;
+
+  final BuildContext context;
+  final _FloatingActionButtonType type;
+  final bool hasChild;
+  final ColorScheme _colors;
+  final TextTheme _textTheme;
+
+  bool get _isExtended => type == _FloatingActionButtonType.extended;
+
+  @override Color? get foregroundColor => _colors.onPrimaryContainer;
+  @override Color? get backgroundColor => _colors.primaryContainer;
+  @override Color? get splashColor => _colors.onPrimaryContainer.withOpacity(0.12);
+  @override double get elevation => 6.0;
+  @override Color? get focusColor => _colors.onPrimaryContainer.withOpacity(0.12);
+  @override double get focusElevation => 6.0;
+  @override Color? get hoverColor => _colors.onPrimaryContainer.withOpacity(0.08);
+  @override double get hoverElevation => 8.0;
+  @override double get highlightElevation => 6.0;
+
+  @override
+  ShapeBorder? get shape {
+    switch (type) {
+      case _FloatingActionButtonType.regular:
+       return const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0)));
+      case _FloatingActionButtonType.small:
+       return const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12.0)));
+      case _FloatingActionButtonType.large:
+       return const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(28.0)));
+      case _FloatingActionButtonType.extended:
+       return const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16.0)));
+     }
+  }
+
+  @override bool? get enableFeedback => true;
+
+  @override
+  double? get iconSize {
+    switch (type) {
+      case _FloatingActionButtonType.regular: return 24.0;
+      case _FloatingActionButtonType.small: return  24.0;
+      case _FloatingActionButtonType.large: return 36.0;
+      case _FloatingActionButtonType.extended: return 24.0;
+    }
+  }
+
+  @override
+  BoxConstraints? get sizeConstraints => const BoxConstraints.tightFor(
+    width: 56.0,
+    height: 56.0,
+  );
+
+  @override
+  BoxConstraints? get smallSizeConstraints => const BoxConstraints.tightFor(
+    width: 40.0,
+    height: 40.0,
+  );
+
+  @override
+  BoxConstraints? get largeSizeConstraints => const BoxConstraints.tightFor(
+    width: 96.0,
+    height: 96.0,
+  );
+
+  @override
+  BoxConstraints? get extendedSizeConstraints => const BoxConstraints.tightFor(
+    height: 56.0,
+  );
+
+  @override double? get extendedIconLabelSpacing => 8.0;
+  @override EdgeInsetsGeometry? get extendedPadding => EdgeInsetsDirectional.only(start: hasChild && _isExtended ? 16.0 : 20.0, end: 20.0);
+  @override TextStyle? get extendedTextStyle => _textTheme.labelLarge;
+}
+
+// END GENERATED TOKEN PROPERTIES
diff --git a/packages/flutter/lib/src/material/floating_action_button_theme.dart b/packages/flutter/lib/src/material/floating_action_button_theme.dart
@@ -43,6 +43,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
     this.highlightElevation,
     this.shape,
     this.enableFeedback,
+    this.iconSize,
     this.sizeConstraints,
     this.smallSizeConstraints,
     this.largeSizeConstraints,
@@ -103,6 +104,9 @@ class FloatingActionButtonThemeData with Diagnosticable {
   /// ignored.
   final bool? enableFeedback;
 
+  /// Overrides the default icon size for the [FloatingActionButton];
+  final double? iconSize;
+
   /// Overrides the default size constraints for the [FloatingActionButton].
   final BoxConstraints? sizeConstraints;
 
@@ -140,6 +144,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
     double? highlightElevation,
     ShapeBorder? shape,
     bool? enableFeedback,
+    double? iconSize,
     BoxConstraints? sizeConstraints,
     BoxConstraints? smallSizeConstraints,
     BoxConstraints? largeSizeConstraints,
@@ -161,6 +166,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
       highlightElevation: highlightElevation ?? this.highlightElevation,
       shape: shape ?? this.shape,
       enableFeedback: enableFeedback ?? this.enableFeedback,
+      iconSize: iconSize ?? this.iconSize,
       sizeConstraints: sizeConstraints ?? this.sizeConstraints,
       smallSizeConstraints: smallSizeConstraints ?? this.smallSizeConstraints,
       largeSizeConstraints: largeSizeConstraints ?? this.largeSizeConstraints,
@@ -193,6 +199,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
       highlightElevation: lerpDouble(a?.highlightElevation, b?.highlightElevation, t),
       shape: ShapeBorder.lerp(a?.shape, b?.shape, t),
       enableFeedback: t < 0.5 ? a?.enableFeedback : b?.enableFeedback,
+      iconSize: lerpDouble(a?.iconSize, b?.iconSize, t),
       sizeConstraints: BoxConstraints.lerp(a?.sizeConstraints, b?.sizeConstraints, t),
       smallSizeConstraints: BoxConstraints.lerp(a?.smallSizeConstraints, b?.smallSizeConstraints, t),
       largeSizeConstraints: BoxConstraints.lerp(a?.largeSizeConstraints, b?.largeSizeConstraints, t),
@@ -218,6 +225,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
       highlightElevation,
       shape,
       enableFeedback,
+      iconSize,
       sizeConstraints,
       smallSizeConstraints,
       largeSizeConstraints,
@@ -247,6 +255,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
         && other.highlightElevation == highlightElevation
         && other.shape == shape
         && other.enableFeedback == enableFeedback
+        && other.iconSize == iconSize
         && other.sizeConstraints == sizeConstraints
         && other.smallSizeConstraints == smallSizeConstraints
         && other.largeSizeConstraints == largeSizeConstraints
@@ -272,6 +281,7 @@ class FloatingActionButtonThemeData with Diagnosticable {
     properties.add(DoubleProperty('highlightElevation', highlightElevation, defaultValue: null));
     properties.add(DiagnosticsProperty<ShapeBorder>('shape', shape, 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>('smallSizeConstraints', smallSizeConstraints, defaultValue: null));
     properties.add(DiagnosticsProperty<BoxConstraints>('largeSizeConstraints', largeSizeConstraints, defaultValue: null));
diff --git a/packages/flutter/lib/src/material/theme_data.dart b/packages/flutter/lib/src/material/theme_data.dart
@@ -1134,10 +1134,6 @@ class ThemeData with Diagnosticable {
   /// start using new colors, typography and other features of Material 3.
   /// 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
   /// inconsistent look and feel in your app. Some components will be migrated
   /// before others and typography changes will be coming in stages.
@@ -1148,6 +1144,10 @@ class ThemeData with Diagnosticable {
   /// all uses of it. Everything will use the Material 3 look and feel at
   /// that point.
   ///
+  /// Components that have been migrated to Material 3 are:
+  ///
+  ///   * [FloatingActionButton]
+  ///
   /// See also:
   ///
   ///   * [Material Design 3](https://m3.material.io/).
diff --git a/packages/flutter/test/material/floating_action_button_test.dart b/packages/flutter/test/material/floating_action_button_test.dart
diff --git a/packages/flutter/test/material/floating_action_button_theme_test.dart b/packages/flutter/test/material/floating_action_button_theme_test.dart

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`		`- "version": "v0.72",`
`3`		`- "date": "2021-12-16 00:27:25.239571",`
	`2`	`+ "version": "v0.74",`
	`3`	`+ "date": "2022-01-06",`
`4`	`4`	`"md.sys.color.light.on-tertiary": "md.ref.palette.tertiary100",`
`5`	`5`	`"md.sys.color.light.on-secondary-container": "md.ref.palette.secondary10",`
`6`	`6`	`"md.sys.color.light.on-secondary": "md.ref.palette.secondary100",`