Flutter 中的 Material 3 Token 更新

Material Design Token 在浅色模式下更新了 4 种颜色角色的映射，以使其更具视觉吸引力，同时保持可访问的对比度。测试表明，此更改在 Flutter 中是非破坏性的，但某些客户可能会注意到此小改动。此次更新影响了以下颜色属性：

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

那些以这些角色作为默认值的 Widget 可能会看起来不同。

此外，Material 3 Token 将 Chip Widget 的边框颜色从 ColorScheme.outline 更新为 ColorScheme.outlineVariant，以改善 Chip 和 Button 之间的视觉层次结构。那些使用 Chip 边框 Token 的 Chip (Chip, ActionChip, ChoiceChip, FilterChip, and InputChip) 可能会看起来不同。

颜色角色映射的差异很小。使用 ColorScheme.copyWith 可以恢复到原始的默认颜色。

迁移前的代码

dart

final ColorScheme colors = ThemeData().colorScheme;

迁移后的代码

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

应用 Token 更新后，M3 Chip 的默认边框颜色看起来更浅。以 ActionChip 为例：

迁移前的代码

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

迁移后的代码

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

已合并到版本：3.26.0-0.0.pre
稳定版发布：3.27

API 文档

Flutter 中的 Material 3 Token 更新

概述

迁移指南

时间线

参考资料