Skip to content

Commit 7a6f1d8

Browse files
esouthrenesouthren
authored
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
1 parent a808ba0 commit 7a6f1d8

File tree

4 files changed

+33
-35
lines changed

4 files changed

+33
-35
lines changed

‎dev/tools/gen_defaults/bin/gen_defaults.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ Future<void> main(List<String> args) async {
167167
PopupMenuTemplate('PopupMenu', '$materialLib/popup_menu.dart', tokens).updateFile();
168168
ProgressIndicatorTemplate('ProgressIndicator', '$materialLib/progress_indicator.dart', tokens).updateFile();
169169
RadioTemplate('Radio<T>', '$materialLib/radio.dart', tokens).updateFile();
170-
SegmentedButtonTemplate('SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
170+
SegmentedButtonTemplate('md.comp.outlined-segmented-button', 'SegmentedButton', '$materialLib/segmented_button.dart', tokens).updateFile();
171171
SnackbarTemplate('md.comp.snackbar', 'Snackbar', '$materialLib/snack_bar.dart', tokens).updateFile();
172172
SliderTemplate('md.comp.slider', 'Slider', '$materialLib/slider.dart', tokens).updateFile();
173173
SurfaceTintTemplate('SurfaceTint', '$materialLib/elevation_overlay.dart', tokens).updateFile();

‎dev/tools/gen_defaults/lib/segmented_button_template.dart

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,12 @@
55
import 'template.dart';
66

77
class SegmentedButtonTemplate extends TokenTemplate {
8-
const SegmentedButtonTemplate(super.blockName, super.fileName, super.tokens, {
8+
const SegmentedButtonTemplate(this.tokenGroup, super.blockName, super.fileName, super.tokens, {
99
super.colorSchemePrefix = '_colors.',
1010
});
1111

12+
final String tokenGroup;
13+
1214
String _layerOpacity(String layerToken) {
1315
if (tokens.containsKey(layerToken)) {
1416
final String? layerValue = tokens[layerToken] as String?;
@@ -33,90 +35,88 @@ class SegmentedButtonTemplate extends TokenTemplate {
3335

3436
@override
3537
String generate() => '''
36-
class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
37-
_SegmentedButtonDefaultsM3(this.context);
38-
38+
class _${blockName}DefaultsM3 extends SegmentedButtonThemeData {
39+
_${blockName}DefaultsM3(this.context);
3940
final BuildContext context;
4041
late final ThemeData _theme = Theme.of(context);
4142
late final ColorScheme _colors = _theme.colorScheme;
42-
4343
@override ButtonStyle? get style {
4444
return ButtonStyle(
45-
textStyle: MaterialStatePropertyAll<TextStyle?>(${textStyle('md.comp.outlined-segmented-button.label-text')}),
45+
textStyle: MaterialStatePropertyAll<TextStyle?>(${textStyle('$tokenGroup.label-text')}),
4646
backgroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
4747
if (states.contains(MaterialState.disabled)) {
48-
return ${componentColor('md.comp.outlined-segmented-button.disabled')};
48+
return ${componentColor('$tokenGroup.disabled')};
4949
}
5050
if (states.contains(MaterialState.selected)) {
51-
return ${componentColor('md.comp.outlined-segmented-button.selected.container')};
51+
return ${componentColor('$tokenGroup.selected.container')};
5252
}
53-
return ${componentColor('md.comp.outlined-segmented-button.unselected.container')};
53+
return ${componentColor('$tokenGroup.unselected.container')};
5454
}),
5555
foregroundColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
5656
if (states.contains(MaterialState.disabled)) {
57-
return ${componentColor('md.comp.outlined-segmented-button.disabled.label-text')};
57+
return ${componentColor('$tokenGroup.disabled.label-text')};
5858
}
5959
if (states.contains(MaterialState.selected)) {
6060
if (states.contains(MaterialState.pressed)) {
61-
return ${componentColor('md.comp.outlined-segmented-button.selected.pressed.label-text')};
61+
return ${componentColor('$tokenGroup.selected.pressed.label-text')};
6262
}
6363
if (states.contains(MaterialState.hovered)) {
64-
return ${componentColor('md.comp.outlined-segmented-button.selected.hover.label-text')};
64+
return ${componentColor('$tokenGroup.selected.hover.label-text')};
6565
}
6666
if (states.contains(MaterialState.focused)) {
67-
return ${componentColor('md.comp.outlined-segmented-button.selected.focus.label-text')};
67+
return ${componentColor('$tokenGroup.selected.focus.label-text')};
6868
}
69-
return ${componentColor('md.comp.outlined-segmented-button.selected.label-text')};
69+
return ${componentColor('$tokenGroup.selected.label-text')};
7070
} else {
7171
if (states.contains(MaterialState.pressed)) {
72-
return ${componentColor('md.comp.outlined-segmented-button.unselected.pressed.label-text')};
72+
return ${componentColor('$tokenGroup.unselected.pressed.label-text')};
7373
}
7474
if (states.contains(MaterialState.hovered)) {
75-
return ${componentColor('md.comp.outlined-segmented-button.unselected.hover.label-text')};
75+
return ${componentColor('$tokenGroup.unselected.hover.label-text')};
7676
}
7777
if (states.contains(MaterialState.focused)) {
78-
return ${componentColor('md.comp.outlined-segmented-button.unselected.focus.label-text')};
78+
return ${componentColor('$tokenGroup.unselected.focus.label-text')};
7979
}
80-
return ${componentColor('md.comp.outlined-segmented-button.unselected.container')};
80+
return ${componentColor('$tokenGroup.unselected.label-text')};
8181
}
8282
}),
8383
overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
8484
if (states.contains(MaterialState.selected)) {
8585
if (states.contains(MaterialState.hovered)) {
86-
return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'hover')};
86+
return ${_stateColor(tokenGroup, 'selected', 'hover')};
8787
}
8888
if (states.contains(MaterialState.focused)) {
89-
return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'focus')};
89+
return ${_stateColor(tokenGroup, 'selected', 'focus')};
9090
}
9191
if (states.contains(MaterialState.pressed)) {
92-
return ${_stateColor('md.comp.outlined-segmented-button', 'selected', 'pressed')};
92+
return ${_stateColor(tokenGroup, 'selected', 'pressed')};
9393
}
9494
} else {
9595
if (states.contains(MaterialState.hovered)) {
96-
return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'hover')};
96+
return ${_stateColor(tokenGroup, 'unselected', 'hover')};
9797
}
9898
if (states.contains(MaterialState.focused)) {
99-
return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'focus')};
99+
return ${_stateColor(tokenGroup, 'unselected', 'focus')};
100100
}
101101
if (states.contains(MaterialState.pressed)) {
102-
return ${_stateColor('md.comp.outlined-segmented-button', 'unselected', 'pressed')};
102+
return ${_stateColor(tokenGroup, 'unselected', 'pressed')};
103103
}
104104
}
105105
return null;
106106
}),
107107
surfaceTintColor: const MaterialStatePropertyAll<Color>(Colors.transparent),
108108
elevation: const MaterialStatePropertyAll<double>(0),
109-
iconSize: const MaterialStatePropertyAll<double?>(${tokens['md.comp.outlined-segmented-button.with-icon.icon.size']}),
109+
iconSize: const MaterialStatePropertyAll<double?>(${tokens['$tokenGroup.with-icon.icon.size']}),
110110
side: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
111111
if (states.contains(MaterialState.disabled)) {
112-
return ${border("md.comp.outlined-segmented-button.disabled.outline")};
112+
return ${border("$tokenGroup.disabled.outline")};
113113
}
114-
return ${border("md.comp.outlined-segmented-button.outline")};
114+
return ${border("$tokenGroup.outline")};
115115
}),
116-
shape: const MaterialStatePropertyAll<OutlinedBorder>(${shape("md.comp.outlined-segmented-button", '')}),
116+
shape: const MaterialStatePropertyAll<OutlinedBorder>(${shape(tokenGroup, '')}),
117+
minimumSize: const MaterialStatePropertyAll<Size?>(Size.fromHeight(${tokens['$tokenGroup.container.height']})),
117118
);
118119
}
119-
120120
@override
121121
Widget? get selectedIcon => const Icon(Icons.check);
122122
}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -721,11 +721,9 @@ class _RenderSegmentedButton<T> extends RenderBox with
721721

722722
class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
723723
_SegmentedButtonDefaultsM3(this.context);
724-
725724
final BuildContext context;
726725
late final ThemeData _theme = Theme.of(context);
727726
late final ColorScheme _colors = _theme.colorScheme;
728-
729727
@override ButtonStyle? get style {
730728
return ButtonStyle(
731729
textStyle: MaterialStatePropertyAll<TextStyle?>(Theme.of(context).textTheme.labelLarge),
@@ -763,7 +761,7 @@ class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
763761
if (states.contains(MaterialState.focused)) {
764762
return _colors.onSurface;
765763
}
766-
return null;
764+
return _colors.onSurface;
767765
}
768766
}),
769767
overlayColor: MaterialStateProperty.resolveWith((Set<MaterialState> states) {
@@ -800,9 +798,9 @@ class _SegmentedButtonDefaultsM3 extends SegmentedButtonThemeData {
800798
return BorderSide(color: _colors.outline);
801799
}),
802800
shape: const MaterialStatePropertyAll<OutlinedBorder>(StadiumBorder()),
801+
minimumSize: const MaterialStatePropertyAll<Size?>(Size.fromHeight(40.0)),
803802
);
804803
}
805-
806804
@override
807805
Widget? get selectedIcon => const Icon(Icons.check);
808806
}

‎packages/flutter/test/material/segmented_button_theme_test.dart

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ void main() {
6464
final Material material = tester.widget<Material>(parent);
6565
expect(material.color, Colors.transparent);
6666
expect(material.shape, const RoundedRectangleBorder());
67-
expect(material.textStyle!.color, theme.colorScheme.primary);
67+
expect(material.textStyle!.color, theme.colorScheme.onSurface);
6868
expect(material.textStyle!.fontFamily, 'Roboto');
6969
expect(material.textStyle!.fontSize, 14);
7070
expect(material.textStyle!.fontWeight, FontWeight.w500);

0 commit comments

Comments
 (0)