Skip to content

[Material] Add selection control themes #70311

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 18 commits into from
Nov 21, 2020
Merged

[Material] Add selection control themes #70311

merged 18 commits into from
Nov 21, 2020

Conversation

perclasson
Copy link
Contributor

@perclasson perclasson commented Nov 11, 2020 •
edited
Loading

Description

Add selection control themes CheckboxTheme, RadioTheme, and SwitchTheme.

Related Issues

Relates to #64365

Tests

I added the following tests:

  • checkbox_theme_test.dart
  • radio_theme_test.dart
  • switch_theme_test.dart

Checklist

Before you create this PR, confirm that it meets all requirements listed below by checking the relevant checkboxes ([x]). This will ensure a smooth and quick review process.

  • I read the Contributor Guide and followed the process outlined there for submitting PRs.
  • I signed the CLA.
  • I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
  • I read the Tree Hygiene wiki page, which explains my responsibilities.
  • I updated/added relevant documentation (doc comments with ///).
  • All existing and new tests are passing.
  • The analyzer (flutter analyze --flutter-repo) does not report any problems on my PR.
  • I am willing to follow-up on review comments in a timely manner.

Breaking Change

Did any tests fail when you ran them? Please read Handling breaking changes.

  • No, no existing tests failed, so this is not a breaking change.
  • Yes, this is a breaking change.

@flutter-dashboard flutter-dashboard bot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Nov 11, 2020
@google-cla google-cla bot added the cla: yes label Nov 11, 2020
JoseAlba
JoseAlba reviewed Nov 11, 2020
View reviewed changes
rami-a
rami-a approved these changes Nov 11, 2020
View reviewed changes
Copy link
Contributor

@rami-a rami-a left a comment

Choose a reason for hiding this comment

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

LGTM

@perclasson perclasson force-pushed the add_themes_for_selection_controls branch from 9197b97 to 00ed0cb Compare November 11, 2020 21:17
guidezpl
guidezpl reviewed Nov 12, 2020
View reviewed changes
guidezpl
guidezpl approved these changes Nov 12, 2020
View reviewed changes
Copy link
Member

@guidezpl guidezpl left a comment

Choose a reason for hiding this comment

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

  _    ___ _____ __  __ 
 | |  / __|_   _|  \/  |
 | |_| (_ | | | | |\/| |
 |____\___| |_| |_|  |_|

JoseAlba
JoseAlba approved these changes Nov 12, 2020
View reviewed changes
Copy link
Contributor

@JoseAlba JoseAlba left a comment

Choose a reason for hiding this comment

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

██╗      ██████╗ ████████╗███╗   ███╗
██║     ██╔════╝ ╚══██╔══╝████╗ ████║
██║     ██║  ███╗   ██║   ██╔████╔██║
██║     ██║   ██║   ██║   ██║╚██╔╝██║
███████╗╚██████╔╝   ██║   ██║ ╚═╝ ██║
╚══════╝ ╚═════╝    ╚═╝   ╚═╝     ╚═╝

@HansMuller
Copy link
Contributor

New themes should use MaterialState<T?>? for state dependent properties.

@HansMuller
Copy link
Contributor

https://api.flutter.dev/flutter/material/InkResponse/overlayColor.html defines the splash color as well as the focus and hover colors. Is there any reason we shouldn't follow that pattern in the new control themes?

@HansMuller HansMuller mentioned this pull request Nov 17, 2020
Merged
9 tasks
@perclasson
Copy link
Contributor Author

https://api.flutter.dev/flutter/material/InkResponse/overlayColor.html defines the splash color as well as the focus and hover colors. Is there any reason we shouldn't follow that pattern in the new control themes?

I forgot about overlayColor, makes sense to use it, so I've changed to it now.

HansMuller
HansMuller reviewed Nov 18, 2020
View reviewed changes
packages/flutter/lib/src/material/checkbox_theme.dart
///
/// Resolves in the following states:
/// * [MaterialState.hovered].
/// * [MaterialState.focused].
Copy link
Contributor

Choose a reason for hiding this comment

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

and [MaterialState.pressed] because splash

Here and elsewhere.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's not used in the pressed state. The selection controls are currently using the active color to determine the pressed overlay color. It will be a follow up to allow us to change that.

Copy link
Contributor Author

@perclasson perclasson Nov 19, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

Follow up issue for the pressed state: #70828

packages/flutter/lib/src/material/checkbox.dart Outdated
///
/// If null, then the value of [activeColor] is used in the selected
/// state. If that is also null, the value of [CheckboxThemeData.fillColor]
/// is used.
Copy link
Contributor

Choose a reason for hiding this comment

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

We're not explaining the component defaults here. It's a shame that the defaults aren't (yet) defined in terms of the theme's colorScheme however for the sake of consistency we should reveal what the defaults are.

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 did this now for Checkbox, Radio and Switch. For Switch it ended up being quite complicated to document the default values so I made a table for them. Hopefully that is easy to read.

Copy link
Contributor

Choose a reason for hiding this comment

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

It's easy to read and I appreciate the trouble you've gone to to make it correct.

Generally speaking, we want the default values of component color properties to be based on the theme's colorScheme, obviously there's still much work to do. That will have to wait for another PR.

HansMuller
HansMuller approved these changes Nov 20, 2020
View reviewed changes
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

@fluttergithubbot fluttergithubbot merged commit 226532b into flutter:master Nov 21, 2020
@HansMuller HansMuller mentioned this pull request Jul 29, 2021
Closed
@guidezpl guidezpl mentioned this pull request Feb 7, 2022
Closed
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@guidezpl guidezpl guidezpl approved these changes

+3 more reviewers

@HansMuller HansMuller HansMuller approved these changes

@rami-a rami-a rami-a approved these changes

@JoseAlba JoseAlba JoseAlba approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
Labels
f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@perclasson @HansMuller @rami-a @guidezpl @JoseAlba @fluttergithubbot