为 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

为 Material 3 引入新的 ColorScheme 角色

概述

背景

迁移指南

时间线

参考资料