M3 segmented buttons token fixes (#120095)

* add icon button property override

* Revert "add icon button property override"

This reverts commit 6c7f4d30671f417d0f4a311bdb186bd4ebc456c8.

* segmented button updates

* button changes

* fix

* put that thing back where it came from

* template updates

* analyzer fixes

* rename parameter

* analyzer fixes

* string interpolation fix

* template updates

* test updates

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -167,7 +167,7 @@ Future<void> main(List<String> args) async {
   PopupMenuTemplate('PopupMenu', '$materialLib/popup_menu.dart', tokens).updateFile();
   ProgressIndicatorTemplate('ProgressIndicator', '$materialLib/progress_indicator.dart', tokens).updateFile();
   RadioTemplate('Radio<T>', '$materialLib/radio.dart', tokens).updateFile();
-  SegmentedButtonTemplate('SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
+  SegmentedButtonTemplate('md.comp.outlined-segmented-button', 'SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
   SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile();
   SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();
   SurfaceTintTemplate('SurfaceTint', '$materialLib/elevation_overlay.dart', tokens).updateFile();

dev/tools/gen_defaults/lib/segmented_button_template.dart

@@ -5,10 +5,12 @@
 import 'template.dart';
 
 class SegmentedButtonTemplate extends TokenTemplate {
-  const SegmentedButtonTemplate(super.blockName, super.fileName, super.tokens, {
+  const SegmentedButtonTemplate(this.tokenGroup, super.blockName, super.fileName, super.tokens, {
     super.colorSchemePrefix = '_colors.',
   });
 
+  final String tokenGroup;
+
   String _layerOpacity(String layerToken) {
     if (tokens.containsKey(layerToken)) {
       final String? layerValue = tokens[layerToken] as String?;
@@ -33,90 +35,88 @@ class SegmentedButtonTemplate extends TokenTemplate {
 
   @override
   String generate() => '''
-class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
-  _SegmentedButtonDefaultsM3(this.context);
-
+class _${blockName}DefaultsM3 extends SegmentedButtonThemeData {
+  _${blockName}DefaultsM3(this.context);
   final BuildContext context;
   late final ThemeData _theme = Theme.of(context);
   late final ColorScheme _colors = _theme.colorScheme;
-
   @override ButtonStyle? get style {
     return ButtonStyle(
-      textStyle: MaterialStatePropertyAll<TextStyle?>(${textStyle('md.comp.outlined-segmented-button.label-text')}),
+      textStyle: MaterialStatePropertyAll<TextStyle?>(${textStyle('$tokenGroup.label-text')}),
       backgroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
         if (states.contains(MaterialState.disabled)) {
-          return ${componentColor('md.comp.outlined-segmented-button.disabled')};
+          return ${componentColor('$tokenGroup.disabled')};
         }
         if (states.contains(MaterialState.selected)) {
-          return ${componentColor('md.comp.outlined-segmented-button.selected.container')};
+          return ${componentColor('$tokenGroup.selected.container')};
         }
-        return ${componentColor('md.comp.outlined-segmented-button.unselected.container')};
+        return ${componentColor('$tokenGroup.unselected.container')};
       }),
       foregroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
         if (states.contains(MaterialState.disabled)) {
-          return ${componentColor('md.comp.outlined-segmented-button.disabled.label-text')};
+          return ${componentColor('$tokenGroup.disabled.label-text')};
         }
         if (states.contains(MaterialState.selected)) {
           if (states.contains(MaterialState.pressed)) {
-            return ${componentColor('md.comp.outlined-segmented-button.selected.pressed.label-text')};
+            return ${componentColor('$tokenGroup.selected.pressed.label-text')};
           }
           if (states.contains(MaterialState.hovered)) {
-            return ${componentColor('md.comp.outlined-segmented-button.selected.hover.label-text')};
+            return ${componentColor('$tokenGroup.selected.hover.label-text')};
           }
           if (states.contains(MaterialState.focused)) {
-            return ${componentColor('md.comp.outlined-segmented-button.selected.focus.label-text')};
+            return ${componentColor('$tokenGroup.selected.focus.label-text')};
           }
-          return ${componentColor('md.comp.outlined-segmented-button.selected.label-text')};
+          return ${componentColor('$tokenGroup.selected.label-text')};
         } else {
           if (states.contains(MaterialState.pressed)) {
-            return ${componentColor('md.comp.outlined-segmented-button.unselected.pressed.label-text')};
+            return ${componentColor('$tokenGroup.unselected.pressed.label-text')};
           }
           if (states.contains(MaterialState.hovered)) {
-            return ${componentColor('md.comp.outlined-segmented-button.unselected.hover.label-text')};
+            return ${componentColor('$tokenGroup.unselected.hover.label-text')};
           }
           if (states.contains(MaterialState.focused)) {
-            return ${componentColor('md.comp.outlined-segmented-button.unselected.focus.label-text')};
+            return ${componentColor('$tokenGroup.unselected.focus.label-text')};
           }
-          return ${componentColor('md.comp.outlined-segmented-button.unselected.container')};
+          return ${componentColor('$tokenGroup.unselected.label-text')};
         }
       }),
       overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
         if (states.contains(MaterialState.selected)) {
           if (states.contains(MaterialState.hovered)) {
-            return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'hover')};
+            return ${_stateColor(tokenGroup, 'selected', 'hover')};
           }
           if (states.contains(MaterialState.focused)) {
-            return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'focus')};
+            return ${_stateColor(tokenGroup, 'selected', 'focus')};
           }
           if (states.contains(MaterialState.pressed)) {
-            return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'pressed')};
+            return ${_stateColor(tokenGroup, 'selected', 'pressed')};
           }
         } else {
           if (states.contains(MaterialState.hovered)) {
-            return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'hover')};
+            return ${_stateColor(tokenGroup, 'unselected', 'hover')};
           }
           if (states.contains(MaterialState.focused)) {
-            return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'focus')};
+            return ${_stateColor(tokenGroup, 'unselected', 'focus')};
           }
           if (states.contains(MaterialState.pressed)) {
-            return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'pressed')};
+            return ${_stateColor(tokenGroup, 'unselected', 'pressed')};
           }
         }
         return null;
       }),
       surfaceTintColor: const MaterialStatePropertyAll<Color>(Colors.transparent),
       elevation: const MaterialStatePropertyAll<double>(0),
-      iconSize: const MaterialStatePropertyAll<double?>(${tokens['md.comp.outlined-segmented-button.with-icon.icon.size']}),
+      iconSize: const MaterialStatePropertyAll<double?>(${tokens['$tokenGroup.with-icon.icon.size']}),
       side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
         if (states.contains(MaterialState.disabled)) {
-          return ${border("md.comp.outlined-segmented-button.disabled.outline")};
+          return ${border("$tokenGroup.disabled.outline")};
         }
-        return ${border("md.comp.outlined-segmented-button.outline")};
+        return ${border("$tokenGroup.outline")};
       }),
-      shape: const MaterialStatePropertyAll<OutlinedBorder>(${shape("md.comp.outlined-segmented-button", '')}),
+      shape: const MaterialStatePropertyAll<OutlinedBorder>(${shape(tokenGroup, '')}),
+      minimumSize: const MaterialStatePropertyAll<Size?>(Size.fromHeight(${tokens['$tokenGroup.container.height']})),
     );
   }
-
   @override
   Widget? get selectedIcon => const Icon(Icons.check);
 }

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

@@ -721,11 +721,9 @@ class _RenderSegmentedButton<T> extends RenderBox with
 
 class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
   _SegmentedButtonDefaultsM3(this.context);
-
   final BuildContext context;
   late final ThemeData _theme = Theme.of(context);
   late final ColorScheme _colors = _theme.colorScheme;
-
   @override ButtonStyle? get style {
     return ButtonStyle(
       textStyle: MaterialStatePropertyAll<TextStyle?>(Theme.of(context).textTheme.labelLarge),
@@ -763,7 +761,7 @@ class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
           if (states.contains(MaterialState.focused)) {
             return _colors.onSurface;
           }
-          return null;
+          return _colors.onSurface;
         }
       }),
       overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
@@ -800,9 +798,9 @@ class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
         return BorderSide(color: _colors.outline);
       }),
       shape: const MaterialStatePropertyAll<OutlinedBorder>(StadiumBorder()),
+      minimumSize: const MaterialStatePropertyAll<Size?>(Size.fromHeight(40.0)),
     );
   }
-
   @override
   Widget? get selectedIcon => const Icon(Icons.check);
 }

packages/flutter/test/material/segmented_button_theme_test.dart

@@ -64,7 +64,7 @@ void main() {
       final Material material = tester.widget<Material>(parent);
       expect(material.color, Colors.transparent);
       expect(material.shape, const RoundedRectangleBorder());
-      expect(material.textStyle!.color, theme.colorScheme.primary);
+      expect(material.textStyle!.color, theme.colorScheme.onSurface);
       expect(material.textStyle!.fontFamily, 'Roboto');
       expect(material.textStyle!.fontSize, 14);
       expect(material.textStyle!.fontWeight, FontWeight.w500);