Flutter 中 Material 3 令牌更新

Material Design 令牌更新了亮色模式下 4 个颜色角色的映射，使其在保持可访问对比度的同时更具视觉吸引力。测试表明，此更改在 Flutter 中不属于破坏性变更，但一些客户可能会注意到这一微小变化。此更新影响了以下颜色属性：

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

将这些角色用作默认值的组件可能会看起来不同。

此外，Material 3 令牌将芯片（chip）组件的边框颜色从 ColorScheme.outline 更新为 ColorScheme.outlineVariant，以改善芯片和按钮之间的视觉层次。使用了芯片边框令牌的芯片（Chip、ActionChip、ChoiceChip、FilterChip 和 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),
);

应用令牌更新后，M3 芯片的默认边框颜色看起来更浅。以 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 令牌更新

概述

迁移指南

时间线

参考资料