development/flutter
development/flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter synced 2024-06-30 23:54:38 +00:00
Code Issues Projects Releases Wiki Activity

Reland fix inputDecorator hint color on M3 (#150278)

Browse Source 
## Description

This PR is a partial reland of https://github.com/flutter/flutter/pull/148944 which was reverted in https://github.com/flutter/flutter/pull/149448.
It makes the `InputDecoration.hintText` colors compliant with the M3 spec.
The initial PR also changed the font style, I will land the font change in another PR to better track the golden changes.

## Related Issue

Related to the color part of https://github.com/flutter/flutter/issues/148787.

## Tests

Updates several tests.
This commit is contained in:
Bruno Leroux 2024-06-25 23:42:59 +02:00 committed by GitHub
parent a37d9e05aa
commit 00419bfb24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,9 +34,9 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme {
@override
TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return TextStyle(color: Theme.of(context).disabledColor);
return TextStyle(color: ${componentColor('md.comp.filled-text-field.disabled.supporting-text')});
}
return TextStyle(color: Theme.of(context).hintColor);
return TextStyle(color: ${componentColor('md.comp.filled-text-field.supporting-text')});
});
@override

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

@ -4670,9 +4670,9 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme {
@override
TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {
if (states.contains(MaterialState.disabled)) {
return TextStyle(color: Theme.of(context).disabledColor);
return TextStyle(color: _colors.onSurface.withOpacity(0.38));
}
return TextStyle(color: Theme.of(context).hintColor);
return TextStyle(color: _colors.onSurfaceVariant);
});
@override

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

@ -2879,8 +2879,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -2945,8 +2944,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.withOpacity(0.38).
final Color expectedColor = theme.disabledColor;
final Color expectedColor = theme.colorScheme.onSurface.withOpacity(0.38);
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3011,8 +3009,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3077,8 +3074,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3143,8 +3139,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3353,8 +3348,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3467,8 +3461,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3533,8 +3526,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.withOpacity(0.38).
final Color expectedColor = theme.disabledColor;
final Color expectedColor = theme.colorScheme.onSurface.withOpacity(0.38);
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3599,8 +3591,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3665,8 +3656,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3731,8 +3721,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);
@ -3939,8 +3928,7 @@ void main() {
expect(getHintOpacity(tester), 1.0);
final ThemeData theme = Theme.of(tester.element(findDecorator()));
// TODO(bleroux): from M3 specification, it should be theme.colorScheme.onSurface.
final Color expectedColor = theme.hintColor;
final Color expectedColor = theme.colorScheme.onSurfaceVariant;
// TODO(bleroux): from M3 specification, it should be textTheme.bodyLarge.
final TextStyle expectedStyle = theme.textTheme.titleMedium!.copyWith(color: expectedColor);
expect(getHintStyle(tester), expectedStyle);

27
packages/flutter/test/material/text_field_test.dart
View File

@ -5451,11 +5451,38 @@ void main() {
});
testWidgets('TextField with default hintStyle', (WidgetTester tester) async {
final TextStyle style = TextStyle(
color: Colors.pink[500],
fontSize: 10.0,
);
final ThemeData themeData = ThemeData();
await tester.pumpWidget(
overlay(
child: Theme(
data: themeData,
child: TextField(
decoration: const InputDecoration(
hintText: 'Placeholder',
),
style: style,
),
),
),
);
final Text hintText = tester.widget(find.text('Placeholder'));
expect(hintText.style!.color, themeData.colorScheme.onSurfaceVariant);
expect(hintText.style!.fontSize, style.fontSize);
});
testWidgets('Material2 - TextField with default hintStyle', (WidgetTester tester) async {
final TextStyle style = TextStyle(
color: Colors.pink[500],
fontSize: 10.0,
);
final ThemeData themeData = ThemeData(
useMaterial3: false,
hintColor: Colors.blue[500],
);