Update Radio button to material 3 #111774

QuncCccccc · 2022-09-16T21:09:20Z

Part of: #91605

Updated the Radio widget with support for Material Design 3.

In order to use the Radio with the new Material 3 defaults, turn on the useMaterial3 flag in the ThemeData:

  return MaterialApp(
    theme: ThemeData(useMaterial3: true),
    // ...
  );

Fixes: #111450

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.

guidezpl · 2022-09-19T07:05:01Z

dev/tools/gen_defaults/lib/radio_template.dart

+  MaterialStateProperty<Color> get fillColor {
+    return MaterialStateProperty.resolveWith((Set<MaterialState> states) {
+      if (states.contains(MaterialState.disabled)) {
+        return ${componentColor('md.comp.radio-button.disabled.unselected.icon')};
+      }
+      if (states.contains(MaterialState.selected)) {
+        return ${componentColor('md.comp.radio-button.selected.icon')};
+      }
+      if (states.contains(MaterialState.pressed)) {
+        return ${componentColor('md.comp.radio-button.unselected.pressed.icon')};
+      }
+      if (states.contains(MaterialState.hovered)) {
+        return ${componentColor('md.comp.radio-button.unselected.hover.icon')};
+      }
+      if (states.contains(MaterialState.focused)) {
+        return ${componentColor('md.comp.radio-button.unselected.focus.icon')};
+      }
+      return ${componentColor('md.comp.radio-button.unselected.icon')};
+    });


Shouldn't we check for MaterialState.selected first as in overlayColor since there's 2 sets of tokens for unselected and selected?

Yes, selected is handled before unselected here. The order here is firstly checking disabled states, then selected, then unselected in pressed/hovered/focused states. If the button is disabled, both selected and unselected states return a same value for the fillColor, so I only put a unselected.icon token in disabled condition.

I meant to say, for example, that while we're handling the disabled unselected case, we're not handling the disabled case. Same goes for other selected states. overlayColor handles these states correctly.

When the button is disabled, both selected and unselected tokens map to same value (color), so I only used the md.comp.radio-button.disabled.unselected.icon here for both selected and unselected cases. Should we handle each condition even if they have same values, or we can update them later only if the tokens become different?

While we haven't been doing this in a disciplined way, if it is easy to support driving this from the tokens (even if the current tokens result in the same values), then we should probably do so.

I see. Fixing it. Thanks!

We should use tokens as if they were different, which they may be in future updates.

Sure. Fixed it. Thanks!

darrenaustin

LGTM. Thx.

dev/tools/gen_defaults/lib/radio_template.dart

HansMuller

LGTM

flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. team Infra upgrades, team productivity, code health, technical debt. See also team: labels. labels Sep 16, 2022

QuncCccccc requested a review from darrenaustin September 16, 2022 22:07

QuncCccccc marked this pull request as ready for review September 16, 2022 22:07

QuncCccccc requested review from HansMuller and guidezpl September 16, 2022 22:07

guidezpl requested changes Sep 19, 2022

View reviewed changes

darrenaustin approved these changes Sep 19, 2022

View reviewed changes

dev/tools/gen_defaults/lib/radio_template.dart Outdated Show resolved Hide resolved

Qun Cheng added 5 commits September 19, 2022 15:32

Update Radio button to material 3

61876a1

Updated radio button to theme data doc

b1adafb

Run code generator

c2105d6

Addressed comments

36b8068

Ran code generator command

01ebde7

QuncCccccc force-pushed the update_radio_to_m3 branch from 197ceb3 to 01ebde7 Compare September 19, 2022 22:38

guidezpl reviewed Sep 20, 2022

View reviewed changes

dev/tools/gen_defaults/lib/radio_template.dart Outdated Show resolved Hide resolved

guidezpl approved these changes Sep 20, 2022

View reviewed changes

Fixed comment

5c01182

HansMuller approved these changes Sep 20, 2022

View reviewed changes

QuncCccccc merged commit 06b87fb into flutter:master Sep 20, 2022
122 checks passed

This was referenced Sep 21, 2022

Roll Flutter from b55bbb7bffc7 to cf01ecd19e61 (29 revisions) flutter/packages#2632

Merged

Roll Flutter from b55bbb7bffc7 to cf01ecd19e61 (29 revisions) flutter/plugins#6458

Merged

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

06b87fba6 Update Radio button to material 3 (flutter/flutter#111774)

1671911

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

06b87fb Update Radio button to material 3 (flutter/flutter#111774)

25e6f84

Update Radio button to material 3 #111774

Update Radio button to material 3 #111774

QuncCccccc commented Sep 16, 2022

guidezpl Sep 19, 2022

QuncCccccc Sep 19, 2022

guidezpl Sep 19, 2022

QuncCccccc Sep 19, 2022

darrenaustin Sep 19, 2022

QuncCccccc Sep 19, 2022

guidezpl Sep 20, 2022

QuncCccccc Sep 20, 2022

darrenaustin left a comment

HansMuller left a comment

Update Radio button to material 3 #111774

Update Radio button to material 3 #111774

Conversation

QuncCccccc commented Sep 16, 2022

Pre-launch Checklist

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

darrenaustin left a comment

Choose a reason for hiding this comment

HansMuller left a comment

Choose a reason for hiding this comment