Skip to content

Commit e739ad0

Browse files
hannah-hyjhannah-hyj
authored
M3 Text field UI update (#113776)
* text field update * update tests * lint * polish template
1 parent dcc6a4c commit e739ad0

File tree

4 files changed

+91
-70
lines changed

4 files changed

+91
-70
lines changed

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

+62-48
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
4141
@override
4242
BorderSide? get activeIndicatorBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
4343
if (states.contains(MaterialState.error)) {
44+
if (states.contains(MaterialState.focused)) {
45+
return ${mergedBorder('md.comp.filled-text-field.error.focus.active-indicator','md.comp.filled-text-field.focus.active-indicator')};
46+
}
4447
if (states.contains(MaterialState.hovered)) {
4548
return ${border('md.comp.filled-text-field.error.hover.active-indicator')};
46-
}${border('md.comp.filled-text-field.error.focus.active-indicator') == border('md.comp.filled-text-field.error.active-indicator') ? '' : '''
47-
if (states.contains(MaterialState.focused)) {
48-
return ${border('md.comp.filled-text-field.error.focus.active-indicator')};
49-
}'''}
49+
}
5050
return ${border('md.comp.filled-text-field.error.active-indicator')};
5151
}
52-
if (states.contains(MaterialState.hovered)) {
53-
return ${border('md.comp.filled-text-field.hover.active-indicator')};
54-
}
5552
if (states.contains(MaterialState.focused)) {
5653
return ${border('md.comp.filled-text-field.focus.active-indicator')};
5754
}
55+
if (states.contains(MaterialState.hovered)) {
56+
return ${border('md.comp.filled-text-field.hover.active-indicator')};
57+
}
5858
if (states.contains(MaterialState.disabled)) {
5959
return ${border('md.comp.filled-text-field.disabled.active-indicator')};
6060
}
@@ -64,20 +64,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
6464
@override
6565
BorderSide? get outlineBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
6666
if (states.contains(MaterialState.error)) {
67+
if (states.contains(MaterialState.focused)) {
68+
return ${mergedBorder('md.comp.outlined-text-field.error.focus.outline','md.comp.outlined-text-field.focus.outline')};
69+
}
6770
if (states.contains(MaterialState.hovered)) {
6871
return ${border('md.comp.outlined-text-field.error.hover.outline')};
69-
}${border('md.comp.outlined-text-field.error.focus.outline') == border('md.comp.outlined-text-field.error.outline') ? '' : '''
70-
if (states.contains(MaterialState.focused)) {
71-
return ${border('md.comp.outlined-text-field.error.focus.outline')};
72-
}'''}
72+
}
7373
return ${border('md.comp.outlined-text-field.error.outline')};
7474
}
75-
if (states.contains(MaterialState.hovered)) {
76-
return ${border('md.comp.outlined-text-field.hover.outline')};
77-
}
7875
if (states.contains(MaterialState.focused)) {
7976
return ${border('md.comp.outlined-text-field.focus.outline')};
8077
}
78+
if (states.contains(MaterialState.hovered)) {
79+
return ${border('md.comp.outlined-text-field.hover.outline')};
80+
}
8181
if (states.contains(MaterialState.disabled)) {
8282
return ${border('md.comp.outlined-text-field.disabled.outline')};
8383
}
@@ -90,19 +90,19 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
9090
@override
9191
Color? get prefixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {${componentColor('md.comp.filled-text-field.error.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
9292
if(states.contains(MaterialState.error)) {
93-
if (states.contains(MaterialState.hovered)) {
94-
return ${componentColor('md.comp.filled-text-field.error.hover.leading-icon')};
95-
}
9693
if (states.contains(MaterialState.focused)) {
9794
return ${componentColor('md.comp.filled-text-field.error.focus.leading-icon')};
9895
}
96+
if (states.contains(MaterialState.hovered)) {
97+
return ${componentColor('md.comp.filled-text-field.error.hover.leading-icon')};
98+
}
9999
return ${componentColor('md.comp.filled-text-field.error.leading-icon')};
100-
}'''}${componentColor('md.comp.filled-text-field.hover.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
101-
if (states.contains(MaterialState.hovered)) {
102-
return ${componentColor('md.comp.filled-text-field.hover.leading-icon')};
103100
}'''}${componentColor('md.comp.filled-text-field.focus.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
104101
if (states.contains(MaterialState.focused)) {
105102
return ${componentColor('md.comp.filled-text-field.focus.leading-icon')};
103+
}'''}${componentColor('md.comp.filled-text-field.hover.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
104+
if (states.contains(MaterialState.hovered)) {
105+
return ${componentColor('md.comp.filled-text-field.hover.leading-icon')};
106106
}'''}
107107
if (states.contains(MaterialState.disabled)) {
108108
return ${componentColor('md.comp.filled-text-field.disabled.leading-icon')};
@@ -112,20 +112,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
112112
113113
@override
114114
Color? get suffixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
115-
if(states.contains(MaterialState.error)) {
116-
if (states.contains(MaterialState.hovered)) {
117-
return ${componentColor('md.comp.filled-text-field.error.hover.trailing-icon')};
118-
}${componentColor('md.comp.filled-text-field.error.trailing-icon') == componentColor('md.comp.filled-text-field.error.focus.trailing-icon') ? '' : '''
115+
if(states.contains(MaterialState.error)) {${componentColor('md.comp.filled-text-field.error.trailing-icon') == componentColor('md.comp.filled-text-field.error.focus.trailing-icon') ? '' : '''
119116
if (states.contains(MaterialState.focused)) {
120117
return ${componentColor('md.comp.filled-text-field.error.focus.trailing-icon')};
121118
}'''}
119+
if (states.contains(MaterialState.hovered)) {
120+
return ${componentColor('md.comp.filled-text-field.error.hover.trailing-icon')};
121+
}
122122
return ${componentColor('md.comp.filled-text-field.error.trailing-icon')};
123-
}${componentColor('md.comp.filled-text-field.hover.trailing-icon') == componentColor('md.comp.filled-text-field.trailing-icon') ? '' : '''
124-
if (states.contains(MaterialState.hovered)) {
125-
return ${componentColor('md.comp.filled-text-field.hover.trailing-icon')};
126-
}'''}${componentColor('md.comp.filled-text-field.focus.trailing-icon') == componentColor('md.comp.filled-text-field.trailing-icon') ? '' : '''
123+
}${componentColor('md.comp.filled-text-field.focus.trailing-icon') == componentColor('md.comp.filled-text-field.trailing-icon') ? '' : '''
127124
if (states.contains(MaterialState.focused)) {
128125
return ${componentColor('md.comp.filled-text-field.focus.trailing-icon')};
126+
}'''}${componentColor('md.comp.filled-text-field.hover.trailing-icon') == componentColor('md.comp.filled-text-field.trailing-icon') ? '' : '''
127+
if (states.contains(MaterialState.hovered)) {
128+
return ${componentColor('md.comp.filled-text-field.hover.trailing-icon')};
129129
}'''}
130130
if (states.contains(MaterialState.disabled)) {
131131
return ${componentColor('md.comp.filled-text-field.disabled.trailing-icon')};
@@ -137,20 +137,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
137137
TextStyle? get labelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
138138
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.label-text")} ?? const TextStyle();
139139
if(states.contains(MaterialState.error)) {
140-
if (states.contains(MaterialState.hovered)) {
141-
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
142-
}
143140
if (states.contains(MaterialState.focused)) {
144141
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.label-text')});
145142
}
143+
if (states.contains(MaterialState.hovered)) {
144+
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
145+
}
146146
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.label-text')});
147147
}
148-
if (states.contains(MaterialState.hovered)) {
149-
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
150-
}
151148
if (states.contains(MaterialState.focused)) {
152149
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.label-text')});
153150
}
151+
if (states.contains(MaterialState.hovered)) {
152+
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
153+
}
154154
if (states.contains(MaterialState.disabled)) {
155155
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.label-text')});
156156
}
@@ -161,20 +161,20 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
161161
TextStyle? get floatingLabelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
162162
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.label-text")} ?? const TextStyle();
163163
if(states.contains(MaterialState.error)) {
164-
if (states.contains(MaterialState.hovered)) {
165-
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
166-
}
167164
if (states.contains(MaterialState.focused)) {
168165
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.label-text')});
169166
}
167+
if (states.contains(MaterialState.hovered)) {
168+
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.label-text')});
169+
}
170170
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.label-text')});
171171
}
172-
if (states.contains(MaterialState.hovered)) {
173-
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
174-
}
175172
if (states.contains(MaterialState.focused)) {
176173
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.label-text')});
177174
}
175+
if (states.contains(MaterialState.hovered)) {
176+
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.label-text')});
177+
}
178178
if (states.contains(MaterialState.disabled)) {
179179
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.label-text')});
180180
}
@@ -183,12 +183,12 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
183183
184184
@override
185185
TextStyle? get helperStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
186-
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();${componentColor('md.comp.filled-text-field.hover.supporting-text') == componentColor('md.comp.filled-text-field.supporting-text') ? '' : '''
187-
if (states.contains(MaterialState.hovered)) {
188-
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.supporting-text')});
189-
}'''}${componentColor('md.comp.filled-text-field.focus.supporting-text') == componentColor('md.comp.filled-text-field.supporting-text') ? '' : '''
186+
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();${componentColor('md.comp.filled-text-field.focus.supporting-text') == componentColor('md.comp.filled-text-field.supporting-text') ? '' : '''
190187
if (states.contains(MaterialState.focused)) {
191188
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.focus.supporting-text')});
189+
}'''}${componentColor('md.comp.filled-text-field.hover.supporting-text') == componentColor('md.comp.filled-text-field.supporting-text') ? '' : '''
190+
if (states.contains(MaterialState.hovered)) {
191+
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.hover.supporting-text')});
192192
}'''}
193193
if (states.contains(MaterialState.disabled)) {
194194
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.disabled.supporting-text')});
@@ -198,15 +198,29 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
198198
199199
@override
200200
TextStyle? get errorStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
201-
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();${componentColor('md.comp.filled-text-field.error.hover.supporting-text') == componentColor('md.comp.filled-text-field.error.supporting-text') ? '' : '''
202-
if (states.contains(MaterialState.hovered)) {
203-
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.supporting-text')});
204-
}'''}${componentColor('md.comp.filled-text-field.error.focus.supporting-text') == componentColor('md.comp.filled-text-field.error.supporting-text') ? '' : '''
201+
final TextStyle textStyle= ${textStyle("md.comp.filled-text-field.supporting-text")} ?? const TextStyle();${componentColor('md.comp.filled-text-field.error.focus.supporting-text') == componentColor('md.comp.filled-text-field.error.supporting-text') ? '' : '''
205202
if (states.contains(MaterialState.focused)) {
206203
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.focus.supporting-text')});
204+
}'''}${componentColor('md.comp.filled-text-field.error.hover.supporting-text') == componentColor('md.comp.filled-text-field.error.supporting-text') ? '' : '''
205+
if (states.contains(MaterialState.hovered)) {
206+
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.hover.supporting-text')});
207207
}'''}
208208
return textStyle.copyWith(color:${componentColor('md.comp.filled-text-field.error.supporting-text')});
209209
});
210210
}
211211
''';
212+
213+
/// Generate a [BorderSide] for the given components.
214+
String mergedBorder(String componentToken1, String componentToken2) {
215+
final String borderColor = componentColor(componentToken1)!= 'null'
216+
? componentColor(componentToken1)
217+
: componentColor(componentToken2);
218+
final double width = (
219+
tokens['$componentToken1.width'] ??
220+
tokens['$componentToken1.height'] ??
221+
tokens['$componentToken2.width'] ??
222+
tokens['$componentToken2.height'] ??
223+
1.0) as double;
224+
return 'BorderSide(color: $borderColor${width != 1.0 ? ", width: $width" : ""})';
225+
}
212226
}

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,9 @@ abstract class TokenTemplate {
179179
}
180180
if (topLeft == topRight && bottomLeft == bottomRight) {
181181
return '${prefix}RoundedRectangleBorder(borderRadius: BorderRadius.vertical('
182-
'${topLeft > 0 ? 'top: Radius.circular($topLeft),':''}'
183-
'${bottomLeft > 0 ? 'bottom: Radius.circular($bottomLeft),':''}'
182+
'${topLeft > 0 ? 'top: Radius.circular($topLeft)':''}'
183+
'${topLeft > 0 && bottomLeft > 0 ? ',':''}'
184+
'${bottomLeft > 0 ? 'bottom: Radius.circular($bottomLeft)':''}'
184185
'))';
185186
}
186187
return '${prefix}RoundedRectangleBorder(borderRadius: '
@@ -202,7 +203,7 @@ abstract class TokenTemplate {
202203
return 'null';
203204
}
204205
final String borderColor = componentColor(componentToken);
205-
final double width = (tokens['$componentToken.width'] ?? 1.0) as double;
206+
final double width = (tokens['$componentToken.width'] ?? tokens['$componentToken.height'] ?? 1.0) as double;
206207
return 'BorderSide(color: $borderColor${width != 1.0 ? ", width: $width" : ""})';
207208
}
208209

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

+24-18
Original file line numberDiff line numberDiff line change
@@ -4494,17 +4494,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
44944494
@override
44954495
BorderSide? get activeIndicatorBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
44964496
if (states.contains(MaterialState.error)) {
4497+
if (states.contains(MaterialState.focused)) {
4498+
return BorderSide(color: _colors.error, width: 2.0);
4499+
}
44974500
if (states.contains(MaterialState.hovered)) {
44984501
return BorderSide(color: _colors.onErrorContainer);
44994502
}
45004503
return BorderSide(color: _colors.error);
45014504
}
4505+
if (states.contains(MaterialState.focused)) {
4506+
return BorderSide(color: _colors.primary, width: 2.0);
4507+
}
45024508
if (states.contains(MaterialState.hovered)) {
45034509
return BorderSide(color: _colors.onSurface);
45044510
}
4505-
if (states.contains(MaterialState.focused)) {
4506-
return BorderSide(color: _colors.primary);
4507-
}
45084511
if (states.contains(MaterialState.disabled)) {
45094512
return BorderSide(color: _colors.onSurface.withOpacity(0.38));
45104513
}
@@ -4514,17 +4517,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
45144517
@override
45154518
BorderSide? get outlineBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
45164519
if (states.contains(MaterialState.error)) {
4520+
if (states.contains(MaterialState.focused)) {
4521+
return BorderSide(color: _colors.error, width: 2.0);
4522+
}
45174523
if (states.contains(MaterialState.hovered)) {
45184524
return BorderSide(color: _colors.onErrorContainer);
45194525
}
45204526
return BorderSide(color: _colors.error);
45214527
}
4522-
if (states.contains(MaterialState.hovered)) {
4523-
return BorderSide(color: _colors.onSurface);
4524-
}
45254528
if (states.contains(MaterialState.focused)) {
45264529
return BorderSide(color: _colors.primary, width: 2.0);
45274530
}
4531+
if (states.contains(MaterialState.hovered)) {
4532+
return BorderSide(color: _colors.onSurface);
4533+
}
45284534
if (states.contains(MaterialState.disabled)) {
45294535
return BorderSide(color: _colors.onSurface.withOpacity(0.12));
45304536
}
@@ -4560,20 +4566,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
45604566
TextStyle? get labelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
45614567
final TextStyle textStyle= _textTheme.bodyLarge ?? const TextStyle();
45624568
if(states.contains(MaterialState.error)) {
4563-
if (states.contains(MaterialState.hovered)) {
4564-
return textStyle.copyWith(color:_colors.onErrorContainer);
4565-
}
45664569
if (states.contains(MaterialState.focused)) {
45674570
return textStyle.copyWith(color:_colors.error);
45684571
}
4572+
if (states.contains(MaterialState.hovered)) {
4573+
return textStyle.copyWith(color:_colors.onErrorContainer);
4574+
}
45694575
return textStyle.copyWith(color:_colors.error);
45704576
}
4571-
if (states.contains(MaterialState.hovered)) {
4572-
return textStyle.copyWith(color:_colors.onSurfaceVariant);
4573-
}
45744577
if (states.contains(MaterialState.focused)) {
45754578
return textStyle.copyWith(color:_colors.primary);
45764579
}
4580+
if (states.contains(MaterialState.hovered)) {
4581+
return textStyle.copyWith(color:_colors.onSurfaceVariant);
4582+
}
45774583
if (states.contains(MaterialState.disabled)) {
45784584
return textStyle.copyWith(color:_colors.onSurface.withOpacity(0.38));
45794585
}
@@ -4584,20 +4590,20 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
45844590
TextStyle? get floatingLabelStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
45854591
final TextStyle textStyle= _textTheme.bodyLarge ?? const TextStyle();
45864592
if(states.contains(MaterialState.error)) {
4587-
if (states.contains(MaterialState.hovered)) {
4588-
return textStyle.copyWith(color:_colors.onErrorContainer);
4589-
}
45904593
if (states.contains(MaterialState.focused)) {
45914594
return textStyle.copyWith(color:_colors.error);
45924595
}
4596+
if (states.contains(MaterialState.hovered)) {
4597+
return textStyle.copyWith(color:_colors.onErrorContainer);
4598+
}
45934599
return textStyle.copyWith(color:_colors.error);
45944600
}
4595-
if (states.contains(MaterialState.hovered)) {
4596-
return textStyle.copyWith(color:_colors.onSurfaceVariant);
4597-
}
45984601
if (states.contains(MaterialState.focused)) {
45994602
return textStyle.copyWith(color:_colors.primary);
46004603
}
4604+
if (states.contains(MaterialState.hovered)) {
4605+
return textStyle.copyWith(color:_colors.onSurfaceVariant);
4606+
}
46014607
if (states.contains(MaterialState.disabled)) {
46024608
return textStyle.copyWith(color:_colors.onSurface.withOpacity(0.38));
46034609
}

0 commit comments

Comments
 (0)