内容

为 Material 3 引入新的 ColorScheme 角色

内容

摘要
背景
迁移指南
时间线
参考文献

ColorScheme 中的新颜色角色包括七个基于色调的表面和容器，以及十二个用于主色、次色和第三色组的强调色。此更新弃用了三个现有的颜色角色：background、onBackground 和 surfaceVariant。更新后的 ColorScheme.fromSeed 方法构建的 ColorScheme 现在会生成与之前版本不同的值，以适应 Material Design 3 指南。

基于色调的表面颜色包括

surfaceBright
surfaceDim
surfaceContainer
surfaceContainerLow
surfaceContainerLowest
surfaceContainerHigh
surfaceContainerHighest

这些更改有助于避免使用小部件的 surfaceTintColor，并替换了旧的基于不透明度的模型，该模型基于小部件的抬升在表面顶部应用了着色叠加。

所有小部件的默认 surfaceTintColor 现在为 null，并且它们的默认背景颜色现在基于新的基于色调的表面颜色。

ColorScheme.fromSeed 也已更新为使用来自 Material color utilities 包的最新算法。此更改可防止构建的 ColorScheme 过于明亮，即使源颜色看起来很明亮并且具有较高的色度（包含很少的黑色、白色和灰色阴影）。

更新后的 ColorScheme.fromSeed 和新的颜色角色导致的差异应该很小并且可以接受。但是，当向 ColorScheme.fromSeed 提供更亮的种子颜色时，它可能会构建相对较暗版本的 ColorScheme。要强制输出仍然明亮，请在 ColorScheme.fromSeed 中设置 dynamicSchemeVariant: DynamicSchemeVariant.fidelity。例如

迁移前的代码

dartColorScheme.fromSeed(
    seedColor: Color(0xFF0000FF), // Bright blue
)

迁移后的代码

dartColorScheme.fromSeed(
    seedColor: Color(0xFF0000FF), // Bright blue
    dynamicSchemeVariant: DynamicSchemeVariant.fidelity,
)

Material Design 3 移除了 3 种颜色。

要配置材质组件的外观，应将 background 替换为 surface，将 onBackground 替换为 onSurface，并将 surfaceVariant 迁移到 surfaceContainerHighest。

迁移前的代码

dartfinal ColorScheme colorScheme = ColorScheme();
MaterialApp(
  theme: ThemeData(
    //...
    colorScheme: colorScheme.copyWith(
      background: myColor1,
      onBackground: myColor2,
      surfaceVariant: myColor3,
    ),
  ),
  //...
)

迁移后的代码

dartfinal ColorScheme colorScheme = ColorScheme();
MaterialApp(
  theme: ThemeData(
    //...
    colorScheme: colorScheme.copyWith(
      surface: myColor1,
      onSurface: myColor2,
      surfaceContainerHighest: myColor3,
    ),
  ),
  //...
)

以前查找 ColorScheme.background、ColorScheme.onBackground 和 ColorScheme.surfaceVariant 的自定义组件可以改为查找 ColorScheme.surface、ColorScheme.onSurface 和 ColorScheme.surfaceContainerHighest。

迁移前的代码

dartColor myColor1 = Theme.of(context).colorScheme.background;
Color myColor2 = Theme.of(context).colorScheme.onBackground;
Color myColor3 = Theme.of(context).colorScheme.surfaceVariant;

迁移后的代码

dartColor myColor1 = Theme.of(context).colorScheme.surface;
Color myColor2 = Theme.of(context).colorScheme.onSurface;
Color myColor3 = Theme.of(context).colorScheme.surfaceContainerHighest;

包含于版本：3.21.0-4.0.pre
稳定版本：3.22.0

摘要

背景

迁移指南

时间线

参考文献