Migrate InputDecorator to Material 3 #107943

hannah-hyj · 2022-07-19T16:50:39Z

Migrate InputDecorator to Material 3, including fillColor, boderColor, iconColor, label text style, supporting text style.

Will migrate the input text style in a separated PR because it's in TextField, not the InputDecorator.

Pre-launch Checklist

I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
I read the [Tree Hygiene] wiki page, which explains my responsibilities.
I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
I signed the [CLA].
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is [test-exempt].
All existing and new tests are passing.

HansMuller

This looks good and the results look good too. One bit of feedback that I didn't leave everywhere: sometimes the original defaults code stayed roughly the same, in others it applied resolveAs to a MaterialStateColor. The code might be easier to understand if we were consistent about that; it seems like in most cases we could encode the M2 defaults a MaterialStateColor, MaterialStateBorderSide, MaterialStateTextStyle.

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

HansMuller · 2022-07-21T15:56:21Z

examples/api/lib/material/text_field/text_field.2.dart

+}
+
+/// An example of the filled text field type.
+class FilledTextFieldExample extends StatelessWidget {


This comment, and the similar one below, might be a good place to link to the M3 spec

Added spec link

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

HansMuller · 2022-07-21T16:45:18Z

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

+
+  @override
+  BorderSide? get activeIndicatorBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.error)) {


In code like this, maybe create a local variable:

final ColorScheme colorScheme = Theme.of(context).colorScheme;

The theme code here is generated by gen_defaults.dart

Maybe I will update the generator script to support local variable in a separated PR.

Good point. Although these lookups are cheap, it might be worth updating the code generator in another PR (as you've pointed out).

It actually already does (but perhaps not well documented 😎). Each template can define a prefix for the color scheme and text theme, which can be set to the name of a local variable defined in the body of the template:

flutter/dev/tools/gen_defaults/lib/dialog_template.dart

Lines 8 to 10 in fa56180

const DialogTemplate(super.blockName, super.fileName, super.tokens, {

super.colorSchemePrefix = '_colors.',

super.textThemePrefix = '_textTheme.'

and

flutter/dev/tools/gen_defaults/lib/dialog_template.dart

Lines 23 to 25 in fa56180

final BuildContext context;

late final ColorScheme _colors = Theme.of(context).colorScheme;

late final TextTheme _textTheme = Theme.of(context).textTheme;

Which will then do the right thing when using the componentColor and textStyle methods in the rest of the template.

Thanks for letting me know!

packages/flutter/lib/src/material/theme_data.dart

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

hannah-hyj · 2022-07-22T14:20:01Z

This looks good and the results look good too. One bit of feedback that I didn't leave everywhere: sometimes the original defaults code stayed roughly the same, in others it applied resolveAs to a MaterialStateColor. The code might be easier to understand if we were consistent about that; it seems like in most cases we could encode the M2 defaults a MaterialStateColor, MaterialStateBorderSide, MaterialStateTextStyle.

Good point!

So In the latest commit, I encoded most M2 default properties (colors and textStyles) as MaterialStateColor and MaterialStateTextStyle.

As for borders, _getDefaultM2BorderColor is not encoded because it is using decoration's property(decoration.hoverColor).

HansMuller

LGTM

HansMuller · 2022-07-22T16:20:54Z

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

-    if (isFocused) {
-      return themeData.colorScheme.primary;
+  Color _getDefaultM2BorderColor(ThemeData themeData) {
+    if(!decoration.enabled && !isFocused){


need a space between if and (. Here and elsewhere.

HansMuller · 2022-07-22T16:33:42Z

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

+  TextStyle? get inputStyle => Theme.of(context).textTheme.subtitle1;
+
+  @override
+  TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith((Set<MaterialState> states) {


In a future PR, you could optimize the cases where a closure isn't need (like all of them?):

TextStyle? getHintStyle(Set<MaterialState> states) { if (states.contains(MaterialState.disabled)) { return TextStyle(color: Theme.of(context).disabledColor); } return TextStyle(color: Theme.of(context).hintColor); } TextStyle? get hintStyle => MaterialStateTextStyle.resolveWith(getHintStyle);

darrenaustin

LGTM. Nice work on a complicated widget.

I have a few suggestions and comments below. They can be addressed in a followup PR if you like.

darrenaustin · 2022-07-25T01:42:45Z

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

+
+  @override
+  BorderSide? get activeIndicatorBorder => MaterialStateBorderSide.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.error)) {


It actually already does (but perhaps not well documented 😎). Each template can define a prefix for the color scheme and text theme, which can be set to the name of a local variable defined in the body of the template:

flutter/dev/tools/gen_defaults/lib/dialog_template.dart

Lines 8 to 10 in fa56180

const DialogTemplate(super.blockName, super.fileName, super.tokens, {

super.colorSchemePrefix = '_colors.',

super.textThemePrefix = '_textTheme.'

and

flutter/dev/tools/gen_defaults/lib/dialog_template.dart

Lines 23 to 25 in fa56180

final BuildContext context;

late final ColorScheme _colors = Theme.of(context).colorScheme;

late final TextTheme _textTheme = Theme.of(context).textTheme;

Which will then do the right thing when using the componentColor and textStyle methods in the rest of the template.

darrenaustin · 2022-07-25T01:44:03Z

examples/api/lib/material/text_field/text_field.2.dart

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Flutter code sample for TextField


If we have other examples for TextField, then we might want to call this out as a sample for Material Design 3 TextFields.

darrenaustin · 2022-07-25T01:46:03Z

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

+      }
+      else {


Nit: the else should be on the same line with the }

darrenaustin · 2022-07-25T01:48:24Z

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

@@ -4223,6 +4214,8 @@ class InputDecorationTheme with Diagnosticable {
    filled,
    Object.hash(
      fillColor,
+      activeIndicatorBorder,


It looks like inputStyle is missing here and other places below. Please verify that all three added fields are accounted for in each of the boilerplate methods.

* 2142b2e Roll Flutter Engine from cd7e2ec4037b to c31036f2381c (1 revision) (flutter/flutter#108299) * 178e444 Revert "Add optional flag to determine assertiveness level in aria announcement for flutter web" (flutter/flutter#108262) * 8a7b359 flutter update-packages --force-upgrade + analyzer fix (flutter/flutter#108198) * b3f5d3f Roll Flutter Engine from c31036f2381c to 54b0ac3059bf (1 revision) (flutter/flutter#108302) * 2f4299a [flutter_tools] Remove unused parameter when connected DAP to VM Service (flutter/flutter#108285) * e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943) * e3b851a Fix Tamil DateTime representation of AM/PM (flutter/flutter#108185) * 43d6e2b Roll Flutter Engine from 54b0ac3059bf to 705072522c00 (4 revisions) (flutter/flutter#108308) * 6929ad1 Roll Flutter Engine from 705072522c00 to 3964cf62cdf8 (1 revision) (flutter/flutter#108316) * 5f67b47 [iOS] Update template icons (flutter/flutter#107873) * 606954d Added iconSize parameter in ButtonStyle (flutter/flutter#108268) * b3814c7 Roll Flutter Engine from 3964cf62cdf8 to 7f8925b1f6f3 (2 revisions) (flutter/flutter#108320) * ca6cecf Upgrade Gradle and AGP versions to 7.5/7.2 and migrate examples/tests (flutter/flutter#108197) * d155bc1 Revert "Upgrade Gradle and AGP versions to 7.5/7.2 and migrate examples/tests (#108197)" (flutter/flutter#108349) * 4056d3f Explain the "patching" protocol in `KeyMessageManager.keyMessageHandler` and add an example (flutter/flutter#105280) * b035ef1 [flutter_tools] Remove more shuffles (flutter/flutter#107759) * be14858 Roll Flutter Engine from 7f8925b1f6f3 to 8eca26d130a2 (1 revision) (flutter/flutter#108326) * 3eb638f Roll Flutter Engine from 8eca26d130a2 to f1f9b4de82b6 (5 revisions) (flutter/flutter#108350) * 401b556 Roll Flutter Engine from f1f9b4de82b6 to 11d927ac3e9b (2 revisions) (flutter/flutter#108353) * 925bee9 Roll Flutter Engine from 11d927ac3e9b to 5dcaeae6561b (1 revision) (flutter/flutter#108356) * 5d31b07 [flutter_tools] [dap] Ensure DAP sends app.stop/app.detach during terminate (flutter/flutter#108310) * c8b5d10 Roll Flutter Engine from 5dcaeae6561b to 89e117b89c63 (1 revision) (flutter/flutter#108367) * e3d08fb Hide the debug banner in the PopupMenuButton example (flutter/flutter#108324)

* Support material 3 in inputDecorator * Format polish * format polish * update input_decorator_test * revert pub * style update * style polish * default before base * resolve comments * Update text_field.2.dart * move text styles into M2 theme * add error style * fix typo * resolve comments * fix g3 test

* 2142b2e Roll Flutter Engine from cd7e2ec4037b to c31036f2381c (1 revision) (flutter/flutter#108299) * 178e444 Revert "Add optional flag to determine assertiveness level in aria announcement for flutter web" (flutter/flutter#108262) * 8a7b359 flutter update-packages --force-upgrade + analyzer fix (flutter/flutter#108198) * b3f5d3f Roll Flutter Engine from c31036f2381c to 54b0ac3059bf (1 revision) (flutter/flutter#108302) * 2f4299a [flutter_tools] Remove unused parameter when connected DAP to VM Service (flutter/flutter#108285) * e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943) * e3b851a Fix Tamil DateTime representation of AM/PM (flutter/flutter#108185) * 43d6e2b Roll Flutter Engine from 54b0ac3059bf to 705072522c00 (4 revisions) (flutter/flutter#108308) * 6929ad1 Roll Flutter Engine from 705072522c00 to 3964cf62cdf8 (1 revision) (flutter/flutter#108316) * 5f67b47 [iOS] Update template icons (flutter/flutter#107873) * 606954d Added iconSize parameter in ButtonStyle (flutter/flutter#108268) * b3814c7 Roll Flutter Engine from 3964cf62cdf8 to 7f8925b1f6f3 (2 revisions) (flutter/flutter#108320) * ca6cecf Upgrade Gradle and AGP versions to 7.5/7.2 and migrate examples/tests (flutter/flutter#108197) * d155bc1 Revert "Upgrade Gradle and AGP versions to 7.5/7.2 and migrate examples/tests (#108197)" (flutter/flutter#108349) * 4056d3f Explain the "patching" protocol in `KeyMessageManager.keyMessageHandler` and add an example (flutter/flutter#105280) * b035ef1 [flutter_tools] Remove more shuffles (flutter/flutter#107759) * be14858 Roll Flutter Engine from 7f8925b1f6f3 to 8eca26d130a2 (1 revision) (flutter/flutter#108326) * 3eb638f Roll Flutter Engine from 8eca26d130a2 to f1f9b4de82b6 (5 revisions) (flutter/flutter#108350) * 401b556 Roll Flutter Engine from f1f9b4de82b6 to 11d927ac3e9b (2 revisions) (flutter/flutter#108353) * 925bee9 Roll Flutter Engine from 11d927ac3e9b to 5dcaeae6561b (1 revision) (flutter/flutter#108356) * 5d31b07 [flutter_tools] [dap] Ensure DAP sends app.stop/app.detach during terminate (flutter/flutter#108310) * c8b5d10 Roll Flutter Engine from 5dcaeae6561b to 89e117b89c63 (1 revision) (flutter/flutter#108367) * e3d08fb Hide the debug banner in the PopupMenuButton example (flutter/flutter#108324)

Support material 3 in inputDecorator

ba3ebdf

hannah-hyj and others added 2 commits July 20, 2022 00:59

Merge branch 'master' into branch2

182de07

Format polish

3f1dc3e

hannah-hyj changed the title ~~Support material 3 in inputDecorator~~ Migrate InputDecorator to Material 3 Jul 19, 2022

hannah-hyj added 3 commits July 20, 2022 03:23

format polish

0d1ff54

update input_decorator_test

c1d4a03

revert pub

517a99c

hannah-hyj requested review from darrenaustin, QuncCccccc and HansMuller July 21, 2022 14:31

hannah-hyj added 3 commits July 21, 2022 23:15

style update

a1fb1a3

style polish

e21fee5

default before base

3abbdca

HansMuller reviewed Jul 21, 2022

View reviewed changes

hannah-hyj added 4 commits July 22, 2022 20:11

resolve comments

a967acf

Update text_field.2.dart

d4e5622

move text styles into M2 theme

a47a9d3

add error style

181a916

fix typo

6c4a09c

hannah-hyj requested a review from HansMuller July 22, 2022 15:21

HansMuller approved these changes Jul 22, 2022

View reviewed changes

darrenaustin approved these changes Jul 25, 2022

View reviewed changes

hannah-hyj deleted the branch2 branch July 25, 2022 17:36

engine-flutter-autoroll mentioned this pull request Jul 25, 2022

Roll Flutter from bbec650b64bc to e74b9b5bef46 (180 revisions) flutter/packages#2376

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

cea1726

engine-flutter-autoroll mentioned this pull request Jul 25, 2022

Roll Flutter from bbec650b64bc to e3b851a63413 (181 revisions) flutter/packages#2378

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

2f62251

engine-flutter-autoroll mentioned this pull request Jul 25, 2022

Roll Flutter from bbec650b64bc to 43d6e2b11385 (182 revisions) flutter/packages#2379

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 25, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

14a7fb3

This was referenced Jul 26, 2022

Roll Flutter from fa39206a2a34 to e3d08fb6d325 (23 revisions) flutter/plugins#6147

Merged

Roll Flutter from bbec650b64bc to e3d08fb6d325 (197 revisions) flutter/packages#2383

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Jul 26, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

17477f1

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

5ed705e

engine-flutter-autoroll mentioned this pull request Jul 26, 2022

Roll Flutter from bbec650b64bc to 2f551d30086a (198 revisions) flutter/packages#2384

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

032725e

engine-flutter-autoroll mentioned this pull request Jul 26, 2022

Roll Flutter from bbec650b64bc to 527ee1d7286e (199 revisions) flutter/packages#2387

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

b27d250

engine-flutter-autoroll mentioned this pull request Jul 26, 2022

Roll Flutter from bbec650b64bc to 87938cec4426 (200 revisions) flutter/packages#2389

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

5fe1ff9

engine-flutter-autoroll mentioned this pull request Jul 26, 2022

Roll Flutter from bbec650b64bc to e05ae3cac799 (202 revisions) flutter/packages#2390

Closed

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

3a321ed

engine-flutter-autoroll mentioned this pull request Jul 26, 2022

Roll Flutter from bbec650b64bc to fe16c206ea19 (203 revisions) flutter/packages#2391

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 26, 2022

e74b9b5 Migrate InputDecorator to Material 3 (flutter/flutter#107943)

de0b04b

This was referenced Jul 27, 2022

Optimize closure in input_decorator_theme #108379

Merged

TextField and TextFormField don't use error color from ColorScheme #87868

Closed

HansMuller mentioned this pull request Jan 13, 2023

2.2: TextFormField's Suffix , Prefix, Icon and Label don't respond to Primary Color's Change. #83002

Closed

bleroux mentioned this pull request Nov 10, 2023

InputDecorator helper text color does not default to hint color with M3 (it did with M2) #138213

Closed

2 tasks

	const DialogTemplate(super.blockName, super.fileName, super.tokens, {
	super.colorSchemePrefix = '_colors.',
	super.textThemePrefix = '_textTheme.'

	final BuildContext context;
	late final ColorScheme _colors = Theme.of(context).colorScheme;
	late final TextTheme _textTheme = Theme.of(context).textTheme;

Migrate InputDecorator to Material 3 #107943

Migrate InputDecorator to Material 3 #107943

Uh oh!

Conversation

hannah-hyj commented Jul 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

hannah-hyj commented Jul 22, 2022

Uh oh!

HansMuller left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

HansMuller Jul 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

darrenaustin left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

hannah-hyj commented Jul 19, 2022 •

edited

Loading

HansMuller Jul 22, 2022 •

edited

Loading