github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix InputDecorator.prefixIcon color when disabled (#149595)

Browse Source 
## Description

This PRs makes the `InputDecoration.prefixIcon` color compliant with the M3 spec.

From M3 spec, the color should be `onSurface.withOpacity(0.38)`, see https://m3.material.io/components/text-fields/specs#e4964192-72ad-414f-85b4-4b4357abb83c

![image](https://github.com/flutter/flutter/assets/840911/298d9aaf-fcda-479a-a8dd-0ee84db98242)

## Related Issue

Fixes https://github.com/flutter/flutter/issues/149411.

## Tests

Updates 2 tests.
This commit is contained in:
Bruno Leroux 2024-06-03 20:53:16 +02:00 committed by GitHub
parent a92318dd98
commit e02d29d52e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dev/tools/gen_defaults/generated/used_tokens.csv
View File

@ -238,6 +238,8 @@ md.comp.filled-text-field.disabled.container.color,
md.comp.filled-text-field.disabled.container.opacity, md.comp.filled-text-field.disabled.container.opacity,
md.comp.filled-text-field.disabled.label-text.color, md.comp.filled-text-field.disabled.label-text.color,
md.comp.filled-text-field.disabled.label-text.opacity, md.comp.filled-text-field.disabled.label-text.opacity,
md.comp.filled-text-field.disabled.leading-icon.color,
md.comp.filled-text-field.disabled.leading-icon.opacity,
md.comp.filled-text-field.disabled.supporting-text.color, md.comp.filled-text-field.disabled.supporting-text.color,
md.comp.filled-text-field.disabled.supporting-text.opacity, md.comp.filled-text-field.disabled.supporting-text.opacity,
md.comp.filled-text-field.disabled.trailing-icon.color, md.comp.filled-text-field.disabled.trailing-icon.color,

1 Versions used 4_0_0
238 md.comp.filled-text-field.disabled.container.opacity
239 md.comp.filled-text-field.disabled.label-text.color
240 md.comp.filled-text-field.disabled.label-text.opacity
241 md.comp.filled-text-field.disabled.leading-icon.color
242 md.comp.filled-text-field.disabled.leading-icon.opacity
243 md.comp.filled-text-field.disabled.supporting-text.color
244 md.comp.filled-text-field.disabled.supporting-text.opacity
245 md.comp.filled-text-field.disabled.trailing-icon.color

4
dev/tools/gen_defaults/lib/input_decorator_template.dart
View File

@ -97,10 +97,10 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
Color? get iconColor => ${componentColor("md.comp.filled-text-field.leading-icon")}; Color? get iconColor => ${componentColor("md.comp.filled-text-field.leading-icon")};
@override @override
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') ? '' : ''' Color? get prefixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) { if (states.contains(MaterialState.disabled)) {
return ${componentColor('md.comp.filled-text-field.disabled.leading-icon')}; return ${componentColor('md.comp.filled-text-field.disabled.leading-icon')};
} }${componentColor('md.comp.filled-text-field.error.leading-icon') == componentColor('md.comp.filled-text-field.leading-icon') ? '' : '''
if (states.contains(MaterialState.error)) { if (states.contains(MaterialState.error)) {
if (states.contains(MaterialState.hovered)) { if (states.contains(MaterialState.hovered)) {
return ${componentColor('md.comp.filled-text-field.error.hover.leading-icon')}; return ${componentColor('md.comp.filled-text-field.error.hover.leading-icon')};

3
packages/flutter/lib/src/material/input_decorator.dart
View File

@ -4736,6 +4736,9 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
@override @override
Color? get prefixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) { Color? get prefixIconColor => MaterialStateColor.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return _colors.onSurface.withOpacity(0.38);
}
return _colors.onSurfaceVariant; return _colors.onSurfaceVariant;
}); });

8
packages/flutter/test/material/input_decorator_test.dart
View File

@ -5443,9 +5443,7 @@ void main() {
); );
final ThemeData theme = Theme.of(tester.element(findPrefixIcon())); final ThemeData theme = Theme.of(tester.element(findPrefixIcon()));
// TODO(bleroux): based on M3 spec, it should be theme.colorScheme.onSurface.withOpacity(0.38). final Color expectedColor = theme.colorScheme.onSurface.withOpacity(0.38);
// See https://github.com/flutter/flutter/issues/149411.
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
expect(getPrefixIconStyle(tester).color, expectedColor); expect(getPrefixIconStyle(tester).color, expectedColor);
}); });
@ -5921,9 +5919,7 @@ void main() {
); );
final ThemeData theme = Theme.of(tester.element(findPrefixIcon())); final ThemeData theme = Theme.of(tester.element(findPrefixIcon()));
// TODO(bleroux): based on M3 spec, it should be theme.colorScheme.onSurface.withOpacity(0.38). final Color expectedColor = theme.colorScheme.onSurface.withOpacity(0.38);
// See https://github.com/flutter/flutter/issues/149411.
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
expect(getPrefixIconStyle(tester).color, expectedColor); expect(getPrefixIconStyle(tester).color, expectedColor);
}); });