摘要

#

移除了 Flutter 的 FloatingActionButton(FAB)對 ThemeData accent 屬性的依賴。

背景

#

這是 Material Theme System Updates 專案中的一個小部分。

過去,ThemeData accentIconTheme 屬性僅被 FloatingActionButton 用來決定按鈕內部 文字或圖示的預設顏色。

FloatingActionButton 也會使用 ThemeData accentTextTheme 屬性, 但這個依賴既未文件化也非必要。

這兩個依賴都容易造成混淆。 例如,若設定 ThemeaccentIconTheme 來改變所有 FloatingActionButton 的外觀時, 很難知道還有哪些元件會受到影響, 或未來可能會受到影響。

Material Design 規範 現已不再包含「accent」色彩。 現在改為使用 ColorSchemesecondary color

過去,應用程式可以透過元件的 foregroundColor 屬性, 或是 FloatingActionButtonThemeforegroundColor, 來設定 FloatingActionButtons 內文字與圖示的顏色。 如果這兩個屬性都未指定,前景色會預設為 accentIconTheme 的顏色。

此變更後,預設行為改為使用色彩方案的 onSecondary 色彩。

變更說明

#

過去,accentIconTheme 會為 FloatingActionButtonforegroundColor 屬性提供預設值:

dart
    final Color foregroundColor = this.foregroundColor
      ?? floatingActionButtonTheme.foregroundColor
      ?? theme.accentIconTheme.color // To be removed.
      ?? theme.colorScheme.onSecondary;

如果應用程式透過設定其主題的 accentIconTheme,來有效地設定所有 floating action buttons(浮動操作按鈕)的 foregroundColor,那麼現在可以透過設定其主題的 floatingActionButtonThemeforegroundColor,來達到相同的效果。

FloatingActionButtonforegroundColor 現在會用來設定由 textStyle 建立的 RawMaterialButtonFloatingActionButton。先前,這個文字樣式是根據 ThemeData.accentTextTheme 的 button style(按鈕樣式)來設定的:

dart
// theme.accentTextTheme becomes theme.textTheme
final TextStyle textStyle = theme.accentTextTheme.button.copyWith(
  color: foregroundColor,
  letterSpacing: 1.2,
);

除非應用程式有明確設定accentTextTheme來利用這個未公開的相依性,否則這裡使用accentTextTheme是沒有必要的。本次變更將這個accentTextTheme的用法替換為textTheme

遷移指南

#

這項變更分為兩個步驟:

  1. 如果FloatingActionButton的前景色(foreground)被設為非預設顏色,現在會顯示警告。
  2. 移除了accentIconTheme的相依性。如果你尚未進行遷移,請依照下方範例調整你的應用程式。

若要為所有 FAB 設定FloatingActionButtonforegroundColor,你可以設定主題的floatingActionButtonTheme,而非accentIconTheme

遷移前的程式碼:

dart
MaterialApp(
  theme: ThemeData(
    accentIconTheme: IconThemeData(color: Colors.red),
  ),
)

遷移後的程式碼:

dart
MaterialApp(
  theme: ThemeData(
    floatingActionButtonTheme: FloatingActionButtonThemeData(
      foregroundColor: Colors.red,
    ),
  ),
)

時程

#

合併於版本:1.16.3
進入穩定版:1.17

參考資料

#

設計文件:

API 文件:

相關 PR:

其他: