-
Notifications
You must be signed in to change notification settings - Fork 29.7k
[Material] Add support for hovered, pressed, and focused text color on Buttons. #33090
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.
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
[Material] Add support for hovered, pressed, and focused text color on Buttons. #33090
Conversation
…ure-buttonStatefulColor
|
not only the button, but also the listTile needs the hover and press status to change the color |
HansMuller
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
MaterialState and MaterialStateColor can stand alone; better to create material_state.dart.
There's a persistent typo that I eventually gave up on: if(foo) should be if (foo).
willlarche
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
SO good. I hope you're very proud.
This comment has been minimized.
This comment has been minimized.
81e6f5c to
74d00d9
Compare
fix import fix usage code
b49ed5b to
72e409b
Compare
This comment has been minimized.
This comment has been minimized.
…ure-buttonStatefulColor
HansMuller
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks good, most of the feedback is just about only using expectLater where it's needed.
HansMuller
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
…ure-buttonStatefulColor
…ure-buttonStatefulColor
…ure-buttonStatefulColor
Description
This PR adds support for defining the
textColorof buttons when the button is in thehovered,focused, orpressedstates.This is useful for preserving the contrast ratio of the text on a button. Often, when buttons are interacted with, the contrast ratio can drop. This makes the text on buttons more difficult to read, and less accessible.
For example, we can make the blue text in this button darker on hover, and even darker on pressed.

Implementation
The implementation comes in three parts.
MaterialState, this includes,hovered,pressed,focused,dragged,disabled, and,error.MaterialStateColorclass.MaterialStateColorhas aresolvemethod that gets the color given a set of states. Or just useMaterialStateColor.resolveWith(...)and pass a callback that will be used to get a color given a set of states.RawMaterialButtonto keep track of aSet<MaterialState>, the using it to get the color for the current state fromMaterialStateColor(or just the color itself if the text color is not aMaterialStateColor).Tests
I added the following tests:
FlatButton,OutlineButton, andRaisedButtonin thehoveredandfocusedstates.FlatButton,OutlineButton, andRaisedButtoncan be updated depending on thehovered,focused, andpressedstates (usingMaterialStateColor).MaterialStateColor, they can be fixed.MaterialStatColorto aButtonThemestill allows you to specify thehovered,pressed, andfocusedtext color of a given button.MaterialStateColortotextColorwill causedisabledTextColorto be ignored. Instead,textColorin thedisabledstate will be used.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.///).flutter analyze --flutter-repo) does not report any problems on my PR.Breaking Change
Does your PR require Flutter developers to manually update their apps to accommodate your change?