FloatingActionButton 和 ThemeData 的 accent 屬性

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

這是 Material 主題系統更新專案中的一小部分。

以前，ThemeData 的 accentIconTheme 屬性僅被 FloatingActionButton 用於確定按鈕內文字或圖示的預設顏色。

FloatingActionButton 還使用了 ThemeData accentTextTheme 屬性，但此依賴關係是未公開的且不必要的。

這兩種依賴關係都令人困惑。例如，如果配置了 Theme 的 accentIconTheme 來更改所有浮動操作按鈕的外觀，則很難知道哪些其他元件會受到影響，或者將來可能會受到影響。

Material Design 規範 不再包含“accent”顏色。現在改用 ColorScheme 的 secondary color。

以前，應用程式可以使用 widget 的 foregroundColor 屬性，或使用 FloatingActionButtonTheme 的 foregroundColor 來配置 FloatingActionButtons 中文字和圖示的顏色。如果兩者都沒有指定 foregroundColor 屬性，則前景色將預設為 accentIconTheme 的顏色。

透過此更改，預設行為改用 color scheme 的 onSecondary 顏色。

以前，accentIconTheme 為 FloatingActionButton 的 foregroundColor 屬性提供了預設值。

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

對於那些配置了主題的 accentIconTheme 來有效地配置所有浮動操作按鈕的 foregroundColor 的應用程式，可以透過配置主題的 floatingActionButtonTheme 的 foregroundColor 來獲得相同的效果。

FloatingActionButton 的 foregroundColor 現在用於配置 FloatingActionButton 建立的 RawMaterialButton 的 textStyle。以前，此文字樣式基於 ThemeData.accentTextTheme 的按鈕樣式。

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

除非應用程式明確配置了 accentTextTheme 來利用此未公開的依賴關係，否則使用 accentTextTheme 是不必要的。此更改將此 accentTextTheme 的使用替換為 textTheme。

此更改分兩步進行：

1. 如果 FloatingActionButton 的前景色設定為非預設顏色，則現在會列印警告。
2. 已移除 accentIconTheme 依賴。如果尚未完成，請按照以下模式遷移您的應用程式。

要為所有 FAB 配置 FloatingActionButton 的 foregroundColor，您可以配置主題的 floatingActionButtonTheme，而不是 accentIconTheme。

遷移前的程式碼

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

遷移後的程式碼

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

釋出版本: 1.16.3
穩定版本: 1.17

設計文件

• 移除 FAB Accent 主題依賴

API 文件

• 浮動操作按鈕
• ThemeData
• FloatingActionButtonThemeData

相關 PR

• 第 1 步（共 2 步） 警告 Flutter 的 FloatingActionButton 對 ThemeData accent 屬性的依賴
• 第 2 步（共 2 步） 移除 Flutter 的 FloatingActionButton 對 ThemeData accent 屬性的依賴

其他

• Material 主題系統更新