Skip to content

Migrate Chips to Material 3 #107166

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 1 commit into from
Jul 6, 2022
Merged

Migrate Chips to Material 3 #107166

merged 1 commit into from
Jul 6, 2022

Conversation

darrenaustin
Copy link
Contributor

@darrenaustin darrenaustin commented Jul 6, 2022 •
edited
Loading

Part of: #91605

Updated the chip widgets ActionChip, FilterChip, ChoiceChip and InputChip with support for Material Design 3.

M3 Chip

M3 Chip dark

In order to use the chip widgets with the new Material 3 defaults, turn on the useMaterial3 flag in the ThemeData:

  return MaterialApp(
    theme: ThemeData(useMaterial3: true),
    // ...
  );

The names of some of the chips in Material Design 3 are a little different from the previous version. You can use the following to implement M3 designs:

  • Assist chip: ActionChip
  • Filter chip: FilterChip or ChoiceChip (for single selection)
  • Input chip: InputChip
  • Suggestion chip: ActionChip

Fixes: #99024

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 Jul 6, 2022
HansMuller
HansMuller approved these changes Jul 6, 2022
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

packages/flutter/lib/src/material/chip.dart
@@ -1247,6 +1310,9 @@ class _RawChipState extends State<RawChip> with MaterialStateMixin, TickerProvid
child: result,
),
);
// if (height != null) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Looks like this should be removed.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yup, I had deleted it, but perhaps it snuck back in with a merge I was doing.

packages/flutter/lib/src/material/chip_action.dart
const _TokenDefaultsM3(this.context, this.isEnabled)
: super(
elevation: 0.0,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(8.0), topRight: Radius.circular(8.0), bottomLeft: Radius.circular(8.0), bottomRight: Radius.circular(8.0))),
Copy link
Contributor

Choose a reason for hiding this comment

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

Could be BorderRadius.all(Radius.circular(8))

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yup, this is a generator problem. One that will be fixed with the BottomAppBar PR.

@darrenaustin darrenaustin merged commit f396e28 into flutter:master Jul 6, 2022
@darrenaustin darrenaustin deleted the m3_chip branch July 6, 2022 20:32
@darrenaustin darrenaustin mentioned this pull request Jul 6, 2022
Closed
This was referenced Jul 7, 2022
Merged
Merged
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 7, 2022
@engine-flutter-autoroll
f396e28 Migrate Chips to Material 3 (flutter/flutter#107166)
b8f776d
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Jul 7, 2022
@engine-flutter-autoroll
f396e28 Migrate Chips to Material 3 (flutter/flutter#107166)
16587ef
@rydmike
Copy link
Contributor

rydmike commented Jul 19, 2022

@darrenaustin / @HansMuller Is it on purpose that plain just Chip does not get any M3 styling when opting in on useMaterial3? It keeps the M2 style:

Screen Shot 2022-07-19 at 18 33 47

Seems a bit inconsistent that it does not default to the M3 styling as well when M3 is used. Is it on purpose or an oversight, or just not done yet? In any case, if left like this, I'm sure users will wonder about it and stumble over this inconsistency.

@darrenaustin
Copy link
Contributor Author

It is more an oversight than anything else. The M3 spec doesn't describe a 'plain' chip, so i tis not obvious what "M3 styling" should apply to Flutter's generic Chip widget. That said, we could probably reuse the Assist chip defaults for the vanilla Chip widget.

@rydmike
Copy link
Contributor

rydmike commented Jul 19, 2022

Thanks @darrenaustin, looking at M3 spec I figured that might be the background too. Using same defaults as AssistChip sounds good. Even if not mentioned in M3 spec I think it would make sense in Flutter from a design consistency viewpoint.

@TahaTesser TahaTesser mentioned this pull request Jul 27, 2022
Closed
7 tasks
camsim99 pushed a commit to camsim99/flutter that referenced this pull request Aug 10, 2022
@darrenaustin @camsim99
Migrate Chips to Material 3 (flutter#107166)
40ed903
@rydmike rydmike mentioned this pull request Aug 12, 2022
Closed
@chinmoy12c chinmoy12c mentioned this pull request Aug 14, 2022
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 30, 2022
@engine-flutter-autoroll
f396e28 Migrate Chips to Material 3 (flutter/flutter#107166)
3df8111
engine-flutter-autoroll added a commit to engine-flutter-autoroll/plugins that referenced this pull request Aug 30, 2022
@engine-flutter-autoroll
f396e28 Migrate Chips to Material 3 (flutter/flutter#107166)
689b18d
@TahaTesser TahaTesser mentioned this pull request Jun 1, 2023
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@guidezpl guidezpl Awaiting requested review from guidezpl

@gspencergoog gspencergoog Awaiting requested review from gspencergoog

1 more reviewer

@HansMuller HansMuller HansMuller approved these changes

Reviewers whose approvals may not affect merge requirements
Assignees
No one assigned
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
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Update chips to support Material 3
3 participants
@darrenaustin @rydmike @HansMuller