Fix handling of iconSize and iconColor defaults for ButtonStyleButton subclasses. (flutter#143501)

## Description

Adds defaults that use tokens to define default `iconSize` and `iconColor` values. Previously, the Material 3 token values for button icon sizes and colors were not being used as defaults when the `ButtonStyleButton.defaultStyleOf` function returned the default values.

Adds tests to make sure appropriate `ButtonStyle` fields are populated when defaultStyle is called on buttons.

Updated documentation for `defaultStyleOf` to indicated that not _all_ fields need to be non-null, since some fields make sense to be null (e.g. `fixedSize`) because they would otherwise override the behavior of other fields in the same `ButtonStyle`.

## Tests
 - Added tests to make sure that the appropriate fields are non-null in the default button styles for each type of button.

Author: gspencergoog

dev/tools/gen_defaults/generated/used_tokens.csv

@@ -145,6 +145,13 @@ md.comp.elevated-button.label-text.text-style,
 md.comp.elevated-button.pressed.container.elevation,
 md.comp.elevated-button.pressed.state-layer.color,
 md.comp.elevated-button.pressed.state-layer.opacity,
+md.comp.elevated-button.with-icon.disabled.icon.color,
+md.comp.elevated-button.with-icon.disabled.icon.opacity,
+md.comp.elevated-button.with-icon.focus.icon.color,
+md.comp.elevated-button.with-icon.hover.icon.color,
+md.comp.elevated-button.with-icon.icon.color,
+md.comp.elevated-button.with-icon.icon.size,
+md.comp.elevated-button.with-icon.pressed.icon.color,
 md.comp.elevated-card.container.color,
 md.comp.elevated-card.container.elevation,
 md.comp.elevated-card.container.shadow-color,
@@ -198,6 +205,13 @@ md.comp.filled-button.label-text.text-style,
 md.comp.filled-button.pressed.container.elevation,
 md.comp.filled-button.pressed.state-layer.color,
 md.comp.filled-button.pressed.state-layer.opacity,
+md.comp.filled-button.with-icon.disabled.icon.color,
+md.comp.filled-button.with-icon.disabled.icon.opacity,
+md.comp.filled-button.with-icon.focus.icon.color,
+md.comp.filled-button.with-icon.hover.icon.color,
+md.comp.filled-button.with-icon.icon.color,
+md.comp.filled-button.with-icon.icon.size,
+md.comp.filled-button.with-icon.pressed.icon.color,
 md.comp.filled-card.container.color,
 md.comp.filled-card.container.elevation,
 md.comp.filled-card.container.shadow-color,
@@ -296,6 +310,13 @@ md.comp.filled-tonal-button.label-text.text-style,
 md.comp.filled-tonal-button.pressed.container.elevation,
 md.comp.filled-tonal-button.pressed.state-layer.color,
 md.comp.filled-tonal-button.pressed.state-layer.opacity,
+md.comp.filled-tonal-button.with-icon.disabled.icon.color,
+md.comp.filled-tonal-button.with-icon.disabled.icon.opacity,
+md.comp.filled-tonal-button.with-icon.focus.icon.color,
+md.comp.filled-tonal-button.with-icon.hover.icon.color,
+md.comp.filled-tonal-button.with-icon.icon.color,
+md.comp.filled-tonal-button.with-icon.icon.size,
+md.comp.filled-tonal-button.with-icon.pressed.icon.color,
 md.comp.filled-tonal-icon-button.container.color,
 md.comp.filled-tonal-icon-button.container.height,
 md.comp.filled-tonal-icon-button.container.shape,
@@ -405,6 +426,7 @@ md.comp.list.list-item.hover.state-layer.opacity,
 md.comp.list.list-item.label-text.color,
 md.comp.list.list-item.label-text.text-style,
 md.comp.list.list-item.leading-icon.color,
+md.comp.list.list-item.leading-icon.size,
 md.comp.list.list-item.pressed.label-text.color,
 md.comp.list.list-item.pressed.leading-icon.icon.color,
 md.comp.list.list-item.pressed.state-layer.color,
@@ -470,6 +492,13 @@ md.comp.outlined-button.outline.color,
 md.comp.outlined-button.outline.width,
 md.comp.outlined-button.pressed.state-layer.color,
 md.comp.outlined-button.pressed.state-layer.opacity,
+md.comp.outlined-button.with-icon.disabled.icon.color,
+md.comp.outlined-button.with-icon.disabled.icon.opacity,
+md.comp.outlined-button.with-icon.focus.icon.color,
+md.comp.outlined-button.with-icon.hover.icon.color,
+md.comp.outlined-button.with-icon.icon.color,
+md.comp.outlined-button.with-icon.icon.size,
+md.comp.outlined-button.with-icon.pressed.icon.color,
 md.comp.outlined-card.container.color,
 md.comp.outlined-card.container.elevation,
 md.comp.outlined-card.container.shadow-color,
@@ -703,6 +732,13 @@ md.comp.text-button.label-text.color,
 md.comp.text-button.label-text.text-style,
 md.comp.text-button.pressed.state-layer.color,
 md.comp.text-button.pressed.state-layer.opacity,
+md.comp.text-button.with-icon.disabled.icon.color,
+md.comp.text-button.with-icon.disabled.icon.opacity,
+md.comp.text-button.with-icon.focus.icon.color,
+md.comp.text-button.with-icon.hover.icon.color,
+md.comp.text-button.with-icon.icon.color,
+md.comp.text-button.with-icon.icon.size,
+md.comp.text-button.with-icon.pressed.icon.color,
 md.comp.time-picker.clock-dial.color,
 md.comp.time-picker.clock-dial.container.size,
 md.comp.time-picker.clock-dial.label-text.text-style,

dev/tools/gen_defaults/lib/button_template.dart

@@ -125,6 +125,29 @@ class _${blockName}DefaultsM3 extends ButtonStyle {
 
   // No default fixedSize
 
+  @override
+  MaterialStateProperty<double>? get iconSize =>
+    const MaterialStatePropertyAll<double>(${getToken("$tokenGroup.with-icon.icon.size")});
+
+  @override
+  MaterialStateProperty<Color>? get iconColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return ${color('$tokenGroup.with-icon.disabled.icon.color')}.withOpacity(${opacity("$tokenGroup.with-icon.disabled.icon.opacity")});
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return ${color('$tokenGroup.with-icon.pressed.icon.color')};
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return ${color('$tokenGroup.with-icon.hover.icon.color')};
+      }
+      if (states.contains(MaterialState.focused)) {
+        return ${color('$tokenGroup.with-icon.focus.icon.color')};
+      }
+      return ${color('$tokenGroup.with-icon.icon.color')};
+    });
+  }
+
   @override
   MaterialStateProperty<Size>? get maximumSize =>
     const MaterialStatePropertyAll<Size>(Size.infinite);

dev/tools/gen_defaults/lib/menu_template.dart

@@ -121,6 +121,11 @@ class _MenuButtonDefaultsM3 extends ButtonStyle {
 
   // No default fixedSize
 
+  @override
+  MaterialStateProperty<double>? get iconSize {
+    return const MaterialStatePropertyAll<double>(${getToken("md.comp.list.list-item.leading-icon.size")});
+  }
+
   @override
   MaterialStateProperty<Size>? get maximumSize {
     return ButtonStyleButton.allOrNull<Size>(Size.infinite);

packages/flutter/lib/src/material/button_style_button.dart

@@ -162,22 +162,39 @@ abstract class ButtonStyleButton extends StatefulWidget {
   /// {@macro flutter.material.ButtonStyleButton.iconAlignment}
   final IconAlignment iconAlignment;
 
-  /// Returns a non-null [ButtonStyle] that's based primarily on the [Theme]'s
-  /// [ThemeData.textTheme] and [ThemeData.colorScheme].
+  /// Returns a [ButtonStyle] that's based primarily on the [Theme]'s
+  /// [ThemeData.textTheme] and [ThemeData.colorScheme], but has most values
+  /// filled out (non-null).
   ///
-  /// The returned style can be overridden by the [style] parameter and
-  /// by the style returned by [themeStyleOf]. For example the default
-  /// style of the [TextButton] subclass can be overridden with its
-  /// [TextButton.style] constructor parameter, or with a
-  /// [TextButtonTheme].
+  /// The returned style can be overridden by the [style] parameter and by the
+  /// style returned by [themeStyleOf] that some button-specific themes like
+  /// [TextButtonTheme] or [ElevatedButtonTheme] override. For example the
+  /// default style of the [TextButton] subclass can be overridden with its
+  /// [TextButton.style] constructor parameter, or with a [TextButtonTheme].
   ///
-  /// Concrete button subclasses should return a ButtonStyle that
-  /// has no null properties, and where all of the [WidgetStateProperty]
-  /// properties resolve to non-null values.
+  /// Concrete button subclasses should return a [ButtonStyle] with as many
+  /// non-null properties as possible, where all of the non-null
+  /// [WidgetStateProperty] properties resolve to non-null values.
+  ///
+  /// ## Properties that can be null
+  ///
+  /// Some properties, like [ButtonStyle.fixedSize] would override other values
+  /// in the same [ButtonStyle] if set, so they are allowed to be null.  Here is
+  /// a summary of properties that are allowed to be null when returned in the
+  /// [ButtonStyle] returned by this function, an why:
+  ///
+  /// - [ButtonStyle.fixedSize] because it would override other values in the
+  ///   same [ButtonStyle], like [ButtonStyle.maximumSize].
+  /// - [ButtonStyle.side] because null is a valid value for a button that has
+  ///   no side. [OutlinedButton] returns a non-null default for this, however.
+  /// - [ButtonStyle.backgroundBuilder] and [ButtonStyle.foregroundBuilder]
+  ///   because they would override the [ButtonStyle.foregroundColor] and
+  ///   [ButtonStyle.backgroundColor] of the same [ButtonStyle].
   ///
   /// See also:
   ///
-  ///  * [themeStyleOf], Returns the ButtonStyle of this button's component theme.
+  /// * [themeStyleOf], returns the ButtonStyle of this button's component
+  ///   theme.
   @protected
   ButtonStyle defaultStyleOf(BuildContext context);
 
@@ -479,7 +496,10 @@ class _ButtonStyleState extends State<ButtonStyleButton> with TickerProviderStat
           customBorder: resolvedShape.copyWith(side: resolvedSide),
           statesController: statesController,
           child: IconTheme.merge(
-            data: IconThemeData(color: resolvedIconColor ?? resolvedForegroundColor, size: resolvedIconSize),
+            data: IconThemeData(
+              color: resolvedIconColor ?? resolvedForegroundColor,
+              size: resolvedIconSize,
+            ),
             child: effectiveChild,
           ),
         ),

packages/flutter/lib/src/material/elevated_button.dart

@@ -698,6 +698,29 @@ class _ElevatedButtonDefaultsM3 extends ButtonStyle {
 
   // No default fixedSize
 
+  @override
+  MaterialStateProperty<double>? get iconSize =>
+    const MaterialStatePropertyAll<double>(18.0);
+
+  @override
+  MaterialStateProperty<Color>? get iconColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return _colors.onSurface.withOpacity(0.38);
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return _colors.primary;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return _colors.primary;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return _colors.primary;
+      }
+      return _colors.primary;
+    });
+  }
+
   @override
   MaterialStateProperty<Size>? get maximumSize =>
     const MaterialStatePropertyAll<Size>(Size.infinite);

packages/flutter/lib/src/material/filled_button.dart

@@ -730,6 +730,29 @@ class _FilledButtonDefaultsM3 extends ButtonStyle {
 
   // No default fixedSize
 
+  @override
+  MaterialStateProperty<double>? get iconSize =>
+    const MaterialStatePropertyAll<double>(18.0);
+
+  @override
+  MaterialStateProperty<Color>? get iconColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return _colors.onSurface.withOpacity(0.38);
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return _colors.onPrimary;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return _colors.onPrimary;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return _colors.onPrimary;
+      }
+      return _colors.onPrimary;
+    });
+  }
+
   @override
   MaterialStateProperty<Size>? get maximumSize =>
     const MaterialStatePropertyAll<Size>(Size.infinite);
@@ -852,6 +875,29 @@ class _FilledTonalButtonDefaultsM3 extends ButtonStyle {
 
   // No default fixedSize
 
+  @override
+  MaterialStateProperty<double>? get iconSize =>
+    const MaterialStatePropertyAll<double>(18.0);
+
+  @override
+  MaterialStateProperty<Color>? get iconColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return _colors.onSurface.withOpacity(0.38);
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return _colors.onSecondaryContainer;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return _colors.onSecondaryContainer;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return _colors.onSecondaryContainer;
+      }
+      return _colors.onSecondaryContainer;
+    });
+  }
+
   @override
   MaterialStateProperty<Size>? get maximumSize =>
     const MaterialStatePropertyAll<Size>(Size.infinite);

packages/flutter/lib/src/material/menu_anchor.dart

@@ -3800,6 +3800,11 @@ class _MenuButtonDefaultsM3 extends ButtonStyle {
 
   // No default fixedSize
 
+  @override
+  MaterialStateProperty<double>? get iconSize {
+    return const MaterialStatePropertyAll<double>(24.0);
+  }
+
   @override
   MaterialStateProperty<Size>? get maximumSize {
     return ButtonStyleButton.allOrNull<Size>(Size.infinite);

packages/flutter/lib/src/material/outlined_button.dart

@@ -606,6 +606,29 @@ class _OutlinedButtonDefaultsM3 extends ButtonStyle {
 
   // No default fixedSize
 
+  @override
+  MaterialStateProperty<double>? get iconSize =>
+    const MaterialStatePropertyAll<double>(18.0);
+
+  @override
+  MaterialStateProperty<Color>? get iconColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return _colors.onSurface.withOpacity(0.38);
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return _colors.primary;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return _colors.primary;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return _colors.primary;
+      }
+      return _colors.primary;
+    });
+  }
+
   @override
   MaterialStateProperty<Size>? get maximumSize =>
     const MaterialStatePropertyAll<Size>(Size.infinite);

packages/flutter/lib/src/material/text_button.dart

@@ -639,6 +639,29 @@ class _TextButtonDefaultsM3 extends ButtonStyle {
 
   // No default fixedSize
 
+  @override
+  MaterialStateProperty<double>? get iconSize =>
+    const MaterialStatePropertyAll<double>(18.0);
+
+  @override
+  MaterialStateProperty<Color>? get iconColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return _colors.onSurface.withOpacity(0.38);
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return _colors.primary;
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return _colors.primary;
+      }
+      if (states.contains(MaterialState.focused)) {
+        return _colors.primary;
+      }
+      return _colors.primary;
+    });
+  }
+
   @override
   MaterialStateProperty<Size>? get maximumSize =>
     const MaterialStatePropertyAll<Size>(Size.infinite);

packages/flutter/lib/src/material/toggle_buttons.dart

@@ -775,6 +775,8 @@ class ToggleButtons extends StatelessWidget {
             style: ButtonStyle(
               backgroundColor: MaterialStatePropertyAll<Color?>(effectiveFillColor),
               foregroundColor: MaterialStatePropertyAll<Color?>(currentColor),
+              iconSize: const MaterialStatePropertyAll<double>(24.0),
+              iconColor: MaterialStatePropertyAll<Color?>(currentColor),
               overlayColor: _ToggleButtonDefaultOverlay(
                 selected:  onPressed != null && isSelected[index],
                 unselected: onPressed != null && !isSelected[index],