Skip to content
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] Use primary color for selected rows and checkboxes in DataTable #67919

Conversation

perclasson
Copy link
Contributor

@perclasson perclasson commented Oct 12, 2020

Description

Light Theme

According to Material specs we should use the 8% overlay color (https://material.io/design/interaction/states.html#selected) for selected states:

Dark Theme

In a dark theme, states should use the same overlay values as their default (or light) theme (https://material.io/design/color/dark-theme.html#states).

Screenshots

Light Theme Dark Theme

Related Issues

Closes #64314

Tests

I added the following tests:

  • DataRow renders default selected row colors
  • DataRow renders checkbox with colors from Theme

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 Oct 12, 2020
@google-cla google-cla bot added the cla: yes label Oct 12, 2020
@clocksmith
Copy link
Contributor

The white on green in the dark theme checkbox is hard to discern. Is there an option to change the check mark color to something darker when the background color is brighter?

@perclasson
Copy link
Contributor Author

perclasson commented Oct 12, 2020

The white on green in the dark theme checkbox is hard to discern. Is there an option to change the check mark color to something darker when the background color is brighter?

I agree that the white color on green is a bit hard to see, but currently there is no theme for Checkboxes: flutter.dev/go/material-theme-system-updates

Related issue: #53420

return (Theme.of(context)!.brightness == Brightness.light) ?
_grey100Opacity : _grey300Opacity;
}
if (states.contains(MaterialState.selected))
Copy link
Contributor

Choose a reason for hiding this comment

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

nit: you can change this into a ternary operator

boolean ? exp1 : exp2

Copy link
Member

@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.

Change LGTM

@perclasson perclasson changed the title [Material] Use primary color for selected rows in DataTable [Material] Use primary color for selected rows and checkboxes in DataTable Oct 12, 2020
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
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 DataTable to follow Material specifications
6 participants