Skip to content

Commit 4e7e451

Browse files
QuncCcccccQuncCccccc
authored
Reorder materialStateProperty defaults (#125905)
Fixes #122250. This PR is to make sure all the MaterialStateProperty defaults are able to correctly resolve different states. * When a widget is pressed, it is also hovered, so we need to put the `MaterialState.pressed` check before `MaterialState.hovered`. * When a widget is focused, the widget should still be able to be hovered, so we should check `MaterialState.hovered` before `MaterialState.focused`. * There are also cases like in _InputDecoratorDefaultsM3, the `MaterialState.disabled` should be checked before `MaterialState.error`. the order should be disabled, (error), pressed, hovered, focused.
1 parent a48cc24 commit 4e7e451

37 files changed

Lines changed: 1210 additions & 425 deletions

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

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,6 @@ class _MediumScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
7878
TextStyle? get expandedTextStyle =>
7979
${textStyle('md.comp.top-app-bar.medium.headline')}?.apply(color: ${color('md.comp.top-app-bar.medium.headline.color')});
8080
81-
@override
82-
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.only(start: 40);
83-
84-
@override
85-
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsetsDirectional.only(start: 40);
86-
8781
@override
8882
EdgeInsetsGeometry? get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 20);
8983
}
@@ -107,12 +101,6 @@ class _LargeScrollUnderFlexibleConfig with _ScrollUnderFlexibleConfig {
107101
TextStyle? get expandedTextStyle =>
108102
${textStyle('md.comp.top-app-bar.large.headline')}?.apply(color: ${color('md.comp.top-app-bar.large.headline.color')});
109103
110-
@override
111-
EdgeInsetsGeometry? get collapsedTitlePadding => const EdgeInsetsDirectional.only(start: 40);
112-
113-
@override
114-
EdgeInsetsGeometry? get collapsedCenteredTitlePadding => const EdgeInsetsDirectional.only(start: 40);
115-
116104
@override
117105
EdgeInsetsGeometry? get expandedTitlePadding => const EdgeInsets.fromLTRB(16, 0, 16, 28);
118106
}

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ class ButtonTemplate extends TokenTemplate {
3535
if (states.contains(MaterialState.disabled)) {
3636
return ${elevation("$tokenGroup.disabled.container")};
3737
}
38+
if (states.contains(MaterialState.pressed)) {
39+
return ${elevation("$tokenGroup.pressed.container")};
40+
}
3841
if (states.contains(MaterialState.hovered)) {
3942
return ${elevation("$tokenGroup.hover.container")};
4043
}
4144
if (states.contains(MaterialState.focused)) {
4245
return ${elevation("$tokenGroup.focus.container")};
4346
}
44-
if (states.contains(MaterialState.pressed)) {
45-
return ${elevation("$tokenGroup.pressed.container")};
46-
}
4747
return ${elevation("$tokenGroup.container")};
4848
})''';
4949
}
@@ -92,15 +92,15 @@ class _${blockName}DefaultsM3 extends ButtonStyle {
9292
@override
9393
MaterialStateProperty<Color?>? get overlayColor =>
9494
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
95+
if (states.contains(MaterialState.pressed)) {
96+
return ${componentColor('$tokenGroup.pressed.state-layer')};
97+
}
9598
if (states.contains(MaterialState.hovered)) {
9699
return ${componentColor('$tokenGroup.hover.state-layer')};
97100
}
98101
if (states.contains(MaterialState.focused)) {
99102
return ${componentColor('$tokenGroup.focus.state-layer')};
100103
}
101-
if (states.contains(MaterialState.pressed)) {
102-
return ${componentColor('$tokenGroup.pressed.state-layer')};
103-
}
104104
return null;
105105
});
106106

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

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -106,25 +106,25 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
106106
MaterialStateProperty<Color?>? get dayOverlayColor =>
107107
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
108108
if (states.contains(MaterialState.selected)) {
109+
if (states.contains(MaterialState.pressed)) {
110+
return ${_stateColor('md.comp.date-picker.modal.date', 'selected', 'pressed')};
111+
}
109112
if (states.contains(MaterialState.hovered)) {
110113
return ${_stateColor('md.comp.date-picker.modal.date', 'selected', 'hover')};
111114
}
112115
if (states.contains(MaterialState.focused)) {
113116
return ${_stateColor('md.comp.date-picker.modal.date', 'selected', 'focus')};
114117
}
118+
} else {
115119
if (states.contains(MaterialState.pressed)) {
116-
return ${_stateColor('md.comp.date-picker.modal.date', 'selected', 'pressed')};
120+
return ${_stateColor('md.comp.date-picker.modal.date', 'unselected', 'pressed')};
117121
}
118-
} else {
119122
if (states.contains(MaterialState.hovered)) {
120123
return ${_stateColor('md.comp.date-picker.modal.date', 'unselected', 'hover')};
121124
}
122125
if (states.contains(MaterialState.focused)) {
123126
return ${_stateColor('md.comp.date-picker.modal.date', 'unselected', 'focus')};
124127
}
125-
if (states.contains(MaterialState.pressed)) {
126-
return ${_stateColor('md.comp.date-picker.modal.date', 'unselected', 'pressed')};
127-
}
128128
}
129129
return null;
130130
});
@@ -173,25 +173,25 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
173173
MaterialStateProperty<Color?>? get yearOverlayColor =>
174174
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
175175
if (states.contains(MaterialState.selected)) {
176+
if (states.contains(MaterialState.pressed)) {
177+
return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'selected', 'pressed')};
178+
}
176179
if (states.contains(MaterialState.hovered)) {
177180
return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'selected', 'hover')};
178181
}
179182
if (states.contains(MaterialState.focused)) {
180183
return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'selected', 'focus')};
181184
}
185+
} else {
182186
if (states.contains(MaterialState.pressed)) {
183-
return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'selected', 'pressed')};
187+
return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'unselected', 'pressed')};
184188
}
185-
} else {
186189
if (states.contains(MaterialState.hovered)) {
187190
return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'unselected', 'hover')};
188191
}
189192
if (states.contains(MaterialState.focused)) {
190193
return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'unselected', 'focus')};
191194
}
192-
if (states.contains(MaterialState.pressed)) {
193-
return ${_stateColor('md.comp.date-picker.modal.year-selection.year', 'unselected', 'pressed')};
194-
}
195195
}
196196
return null;
197197
});
@@ -208,14 +208,14 @@ class _${blockName}DefaultsM3 extends DatePickerThemeData {
208208
@override
209209
MaterialStateProperty<Color?>? get rangeSelectionOverlayColor =>
210210
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
211+
if (states.contains(MaterialState.pressed)) {
212+
return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range', null, 'pressed')};
213+
}
211214
if (states.contains(MaterialState.hovered)) {
212-
return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range.', null, 'hover')};
215+
return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range', null, 'hover')};
213216
}
214217
if (states.contains(MaterialState.focused)) {
215-
return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range.', null, 'focus')};
216-
}
217-
if (states.contains(MaterialState.pressed)) {
218-
return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range.', null, 'pressed')};
218+
return ${_stateColor('md.comp.date-picker.modal.range-selection.date.in-range', null, 'focus')};
219219
}
220220
return null;
221221
});

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

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -95,87 +95,87 @@ class IconButtonTemplate extends TokenTemplate {
9595
9696
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
9797
if (states.contains(MaterialState.selected)) {
98+
if (states.contains(MaterialState.pressed)) {
99+
return ${componentColor('$tokenGroup.toggle.selected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')});
100+
}
98101
if (states.contains(MaterialState.hovered)) {
99102
return ${componentColor('$tokenGroup.toggle.selected.hover.state-layer')}.withOpacity(${opacity('$tokenGroup.hover.state-layer.opacity')});
100103
}
101104
if (states.contains(MaterialState.focused)) {
102105
return ${componentColor('$tokenGroup.toggle.selected.focus.state-layer')}.withOpacity(${opacity('$tokenGroup.focus.state-layer.opacity')});
103106
}
104-
if (states.contains(MaterialState.pressed)) {
105-
return ${componentColor('$tokenGroup.toggle.selected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')});
106-
}
107107
}
108108
if (toggleable) { // toggleable but unselected case
109+
if (states.contains(MaterialState.pressed)) {
110+
return ${componentColor('$tokenGroup.toggle.unselected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')});
111+
}
109112
if (states.contains(MaterialState.hovered)) {
110113
return ${componentColor('$tokenGroup.toggle.unselected.hover.state-layer')}.withOpacity(${opacity('$tokenGroup.hover.state-layer.opacity')});
111114
}
112115
if (states.contains(MaterialState.focused)) {
113116
return ${componentColor('$tokenGroup.toggle.unselected.focus.state-layer')}.withOpacity(${opacity('$tokenGroup.focus.state-layer.opacity')});
114117
}
115-
if (states.contains(MaterialState.pressed)) {
116-
return ${componentColor('$tokenGroup.toggle.unselected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')});
117-
}
118+
}
119+
if (states.contains(MaterialState.pressed)) {
120+
return ${componentColor('$tokenGroup.pressed.state-layer')};
118121
}
119122
if (states.contains(MaterialState.hovered)) {
120123
return ${componentColor('$tokenGroup.hover.state-layer')};
121124
}
122125
if (states.contains(MaterialState.focused)) {
123126
return ${componentColor('$tokenGroup.focus.state-layer')};
124127
}
125-
if (states.contains(MaterialState.pressed)) {
126-
return ${componentColor('$tokenGroup.pressed.state-layer')};
127-
}
128128
return Colors.transparent;
129129
})''';
130130
case 'md.comp.outlined-icon-button':
131131
return '''
132132
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
133133
if (states.contains(MaterialState.selected)) {
134+
if (states.contains(MaterialState.pressed)) {
135+
return ${componentColor('$tokenGroup.selected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')});
136+
}
134137
if (states.contains(MaterialState.hovered)) {
135138
return ${componentColor('$tokenGroup.selected.hover.state-layer')}.withOpacity(${opacity('$tokenGroup.hover.state-layer.opacity')});
136139
}
137140
if (states.contains(MaterialState.focused)) {
138141
return ${componentColor('$tokenGroup.selected.focus.state-layer')}.withOpacity(${opacity('$tokenGroup.focus.state-layer.opacity')});
139142
}
140-
if (states.contains(MaterialState.pressed)) {
141-
return ${componentColor('$tokenGroup.selected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')});
142-
}
143+
}
144+
if (states.contains(MaterialState.pressed)) {
145+
return ${componentColor('$tokenGroup.unselected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')});
143146
}
144147
if (states.contains(MaterialState.hovered)) {
145148
return ${componentColor('$tokenGroup.unselected.hover.state-layer')}.withOpacity(${opacity('$tokenGroup.hover.state-layer.opacity')});
146149
}
147150
if (states.contains(MaterialState.focused)) {
148151
return ${componentColor('$tokenGroup.unselected.focus.state-layer')}.withOpacity(${opacity('$tokenGroup.focus.state-layer.opacity')});
149152
}
150-
if (states.contains(MaterialState.pressed)) {
151-
return ${componentColor('$tokenGroup.unselected.pressed.state-layer')}.withOpacity(${opacity('$tokenGroup.pressed.state-layer.opacity')});
152-
}
153153
return Colors.transparent;
154154
})''';
155155
case 'md.comp.icon-button':
156156
return '''
157157
158158
MaterialStateProperty.resolveWith((Set<MaterialState> states) {
159159
if (states.contains(MaterialState.selected)) {
160+
if (states.contains(MaterialState.pressed)) {
161+
return ${componentColor('$tokenGroup.selected.pressed.state-layer')};
162+
}
160163
if (states.contains(MaterialState.hovered)) {
161164
return ${componentColor('$tokenGroup.selected.hover.state-layer')};
162165
}
163166
if (states.contains(MaterialState.focused)) {
164167
return ${componentColor('$tokenGroup.selected.focus.state-layer')};
165168
}
166-
if (states.contains(MaterialState.pressed)) {
167-
return ${componentColor('$tokenGroup.selected.pressed.state-layer')};
168-
}
169+
}
170+
if (states.contains(MaterialState.pressed)) {
171+
return ${componentColor('$tokenGroup.unselected.pressed.state-layer')};
169172
}
170173
if (states.contains(MaterialState.hovered)) {
171174
return ${componentColor('$tokenGroup.unselected.hover.state-layer')};
172175
}
173176
if (states.contains(MaterialState.focused)) {
174177
return ${componentColor('$tokenGroup.unselected.focus.state-layer')};
175178
}
176-
if (states.contains(MaterialState.pressed)) {
177-
return ${componentColor('$tokenGroup.unselected.pressed.state-layer')};
178-
}
179179
return Colors.transparent;
180180
})''';
181181
}

0 commit comments

Comments
 (0)