跳到主內容

概述

#

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。例如：

遷移前的程式碼

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

遷移後的程式碼

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

Material Design 3 移除了 3 種顏色。

要配置 Material 元件的外觀，應將 background 替換為 surface，將 onBackground 替換為 onSurface，並將 surfaceVariant 遷移到 surfaceContainerHighest。

遷移前的程式碼

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

遷移後的程式碼

dart
final 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。

遷移前的程式碼

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

遷移後的程式碼

dart
Color 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

參考資料

#

相關問題

相關 PR

除非另有說明，本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-10-08。 檢視原始碼 或 報告問題。