为 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 和新的颜色角色引起Differences 应该是微小且可接受的。但是，当向 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 种颜色。

要配置 Material 组件的外观，应将 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

为 Material 3 引入新的 ColorScheme 角色

概述

背景

迁移指南

时间线

参考资料