Skip to main content
Contents

Material 3 tokens update in Flutter

Contents

Summary

#

The Material Design tokens updated the mapping of 4 color roles in light mode to be more visually appealing while retaining accessible contrast. Testing identified this change as non-breaking in Flutter, but some customers might notice this small change. The update affected the following color properties:

  • onPrimaryContainer (Primary10 to Primary30)
  • onSecondaryContainer (Secondary10 to Secondary30)
  • onTertiaryContainer (Tertiary10 to Tertiary30)
  • onErrorContainer (Error10 to Error30)

Widgets that have been using these roles as their default values might look different.

Additionally, the Material 3 tokens updated the border color of chip widgets from ColorScheme.outline to ColorScheme.outlineVariant to improve visual hierarchy between chips and buttons. Chips (Chip, ActionChip, ChoiceChip, FilterChip, and InputChip) that have been using the chip border tokens may look different.

Migration guide

#

The differences in the mappings of the color roles are small. Use ColorScheme.copyWith to revert to the original default colors:

Code before migration:

dart
final ColorScheme colors = ThemeData().colorScheme;

Code after migration:

dart
final ColorScheme colors = ThemeData().colorScheme.copyWith(
  onPrimaryContainer: const Color(0xFF21005D),
  onSecondaryContainer: const Color(0xFF1D192B),
  onTertiaryContainer: const Color(0xFF31111D),
  onErrorContainer: const Color(0xFF410E0B),
);

After applying the token update, the default border color of M3 chips looks lighter. Take ActionChip as an example:

Code before migration:

dart
final chip = ActionChip(
  label: const Text('action chip'),
  onPressed: () {},
);

Code after migration:

dart
final chip = ChipTheme(
  data: ChipThemeData(
    side: BorderSide(
      color: Theme.of(context).colorScheme.outline
    ),
  ),
  child: ActionChip(
    label: const Text('action chip'), 
    onPressed: () {}
  )
);

Timeline

#

Landed in version: 3.26.0-0.0.pre
In stable release: 3.27

References

#

API documentation:

Relevant PRs:

Unless stated otherwise, the documentation on this site reflects the latest stable version of Flutter. Page last updated on 2024-12-16. View source or report an issue.