Skip to content

Conversation

@QuncCccccc
Copy link
Contributor

Part of: #91605

Updated the Radio widget with support for Material Design 3.

Screen Shot 2022-09-16 at 2 01 28 PMScreen Shot 2022-09-16 at 2 02 29 PM

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.

@flutter-dashboard flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. c: contributor-productivity Team-specific productivity, code health, technical debt. labels Sep 16, 2022
@QuncCccccc QuncCccccc marked this pull request as ready for review September 16, 2022 22:07
Comment on lines 23 to 52
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see. Fixing it. Thanks!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure. Fixed it. Thanks!

Copy link
Contributor

@darrenaustin darrenaustin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thx.

Copy link
Contributor

@HansMuller HansMuller left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

c: contributor-productivity Team-specific productivity, code health, technical debt. f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update Radio to support Material 3

4 participants