Skip to content

Improve CupertinoRadio fidelity - #149703

Merged
victorsanni merged 38 commits into
flutter:masterfrom
victorsanni:improve-cupertino-radio-fidelity
Aug 3, 2024
Merged

Improve CupertinoRadio fidelity#149703
victorsanni merged 38 commits into
flutter:masterfrom
victorsanni:improve-cupertino-radio-fidelity

Conversation

@victorsanni

@victorsannivictorsanni commented Jun 5, 2024

Copy link
Copy Markdown
Contributor

Adds the following:

  • Darkens when pressed in light mode
  • Lightens when pressed in dark mode.
  • Tests that confirm CupertinoRadio is focusable and has correct focus colors
  • Tests that confirm CupertinoRadio uses correct default active/inactive/fill colors
  • Same look in disabled vs. enabled states as native macOS:
Native macOSFlutter BeforeFlutter After
radio nativeflutter radio beforeflutter radio after
  • Same look of an unselected radio button in dark mode as native macOS:
Native light modeFlutter before light modeFlutter after light modeNative dark modeFlutter before dark modeFlutter after dark mode
native radio lightflutter radio after lightflutter radio lightnative radio darkflutter radio before darkflutter radio dark

Light mode (with focus highlight)

Native light modeFlutter before light modeFlutter after light mode
native radio light moderadio flutter focus beforeradio flutter focus after

Dark mode

Native dark modeFlutter before dark modeFlutter after dark mode
native radio dark modeflutter before radio dark modeflutter radio dark mode after

Disabled light mode

NativeFlutter beforeFlutter after
light disabled radio nativeScreenshot 2024-07-30 at 3 13 30 PMlight disabled radio flutter after

Disabled dark mode

NativeFlutter beforeFlutter after
dark disabled radio nativeScreenshot 2024-07-30 at 3 13 30 PMdark disabled radio flutter after

CupertinoRadio is missing a tristate/mixed state, but Apple's latest HIG specs discourages its use.

Fixes#151994

Pre-launch Checklist

If you need help, consider asking for advice on the #hackers-new channel on Discord.

@github-actionsgithub-actionsBot added framework flutter/packages/flutter repository. See also f: labels. p: cupertino_ui cupertino_ui package in flutter/packages labels Jun 5, 2024
@github-actionsgithub-actionsBot added a: tests "flutter test", flutter_test, or one of our tests a: text input Entering text in a text field or keyboard related problems tool Affects the "flutter" command-line tool. See also t: labels. engine flutter/engine related. See also e: labels. p: material_ui material_ui package in flutter/packages a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) f: scrolling Viewports, list views, slivers, etc. d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: routes Navigator, Router, and related APIs. a: desktop Running on desktop f: focus Focus traversal, gaining or losing focus labels Jun 5, 2024
@victorsanni
victorsanniforce-pushed the improve-cupertino-radio-fidelity branch from 803e4ef to 5846899CompareJune 5, 2024 01:00
@github-actionsgithub-actionsBot removed a: tests "flutter test", flutter_test, or one of our tests a: text input Entering text in a text field or keyboard related problems tool Affects the "flutter" command-line tool. See also t: labels. engine flutter/engine related. See also e: labels. p: material_ui material_ui package in flutter/packages a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) f: scrolling Viewports, list views, slivers, etc. d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos f: routes Navigator, Router, and related APIs. a: desktop Running on desktop f: focus Focus traversal, gaining or losing focus labels Jun 5, 2024

@MitchellGoodwinMitchellGoodwin left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

LGTM!

@flutter-dashboard

Copy link
Copy Markdown

Golden file changes have been found for this pull request. Click here to view and triage (e.g. because this is an intentional change).

If you are still iterating on this change and are not ready to resolve the images on the Flutter Gold dashboard, consider marking this PR as a draft pull request above. You will still be able to view image results on the dashboard, commenting will be silenced, and the check will not try to resolve itself until marked ready for review.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #149703 at sha 4bc506b

@flutter-dashboard

Copy link
Copy Markdown

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #149703 at sha 1b5ba82

@justinmcjustinmc left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Thanks for all of the great screenshots in the description! LGTM 👍

Comment threadpackages/flutter/test/cupertino/radio_test.dart Outdated
final Paint outerPaint = Paint()
// In dark mode, the outer color of an active radio is slightly darker.
..color = isActive
? (isDefaultSelected && brightness == Brightness.dark ? _kDarkModeOuterColor : activeColor)

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

The logic around isDefaultSelected feels pretty weird to me. For example, if the fillColor is customized, then suddenly the active outer color in dark mode changes from _kDarkModeOuterColor to activeColor, which is very surprising.

Is there a reason why a more solid way isn't feasible? For example, can we make the active color a CupertinoDynamicColor?

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

Yes. That's very true. I've refactored to do this outside the painter instead, using CupertinoDynamicColor to resolve the default dark mode color. Thanks for pointing this out.

@flutter-dashboard

Copy link
Copy Markdown

Golden file changes are available for triage from new commit, Click here to view.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

Changes reported for pull request #149703 at sha bf9e75a

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

Labels

frameworkflutter/packages/flutter repository. See also f: labels.p: cupertino_uicupertino_ui package in flutter/packageswill affect goldensChanges to golden files

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve fidelity of CupertinoRadio

5 participants

@victorsanni@justinmc@dkwingsmt@Piinks@MitchellGoodwin