Material 3 tokens update in Flutter
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:
final ColorScheme colors = ThemeData().colorScheme;Code after migration:
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:
final chip = ActionChip(
label: const Text('action chip'),
onPressed: () {},
);Code after migration:
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:
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2025-02-04。 查看文档源码 或者 为本页面内容提出建议.