From 00419bfb247d04ac8b15690294817d2610364156 Mon Sep 17 00:00:00 2001 From: Bruno Leroux Date: Tue, 25 Jun 2024 23:42:59 +0200 Subject: [PATCH] Reland fix inputDecorator hint color on M3 (#150278) ## 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. --- .../lib/input_decorator_template.dart | 4 +-- .../lib/src/material/input_decorator.dart | 4 +-- .../test/material/input_decorator_test.dart | 36 +++++++------------ .../test/material/text_field_test.dart | 27 ++++++++++++++ 4 files changed, 43 insertions(+), 28 deletions(-) diff --git a/dev/tools/gen_defaults/lib/input_decorator_template.dart b/dev/tools/gen_defaults/lib/input_decorator_template.dart index 80d67a0b8d6c..b86a9698362c 100644 --- a/dev/tools/gen_defaults/lib/input_decorator_template.dart +++ b/dev/tools/gen_defaults/lib/input_decorator_template.dart @@ -34,9 +34,9 @@ class _${blockName}DefaultsM3 extends InputDecorationTheme { @override TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set 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 diff --git a/packages/flutter/lib/src/material/input_decorator.dart b/packages/flutter/lib/src/material/input_decorator.dart index c6214150fc0a..d0cb6ea41fc3 100644 --- a/packages/flutter/lib/src/material/input_decorator.dart +++ b/packages/flutter/lib/src/material/input_decorator.dart @@ -4670,9 +4670,9 @@ class _InputDecoratorDefaultsM3 extends InputDecorationTheme { @override TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set 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 diff --git a/packages/flutter/test/material/input_decorator_test.dart b/packages/flutter/test/material/input_decorator_test.dart index 6a9b78864d85..d5aa73c2587a 100644 --- a/packages/flutter/test/material/input_decorator_test.dart +++ b/packages/flutter/test/material/input_decorator_test.dart @@ -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); diff --git a/packages/flutter/test/material/text_field_test.dart b/packages/flutter/test/material/text_field_test.dart index fd1f69e7914a..d16a53b8a293 100644 --- a/packages/flutter/test/material/text_field_test.dart +++ b/packages/flutter/test/material/text_field_test.dart @@ -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], );