概述

#

移除了 Flutter 的 FloatingActionButton (FAB) 对 ThemeData 强调属性的依赖。

背景

#

这是 Material 主题系统更新 项目的一小部分。

此前,ThemeData 的 accentIconTheme 属性仅由 FloatingActionButton 用于确定按钮内文本或图标的默认颜色。

FloatingActionButton 也使用了 ThemeData accentTextTheme 属性,但此依赖未被记录且没有必要。

这两个依赖都令人困惑。例如,如果配置主题的 accentIconTheme 以更改所有浮动操作按钮的外观,很难知道其他哪些组件会受到影响,或者将来可能会受到影响。

Material Design 规范 不再包含“强调色”("accent" color)。现在改为使用 ColorSchemesecondary color

此前,应用程序可以通过微件的 foregroundColor 属性或 FloatingActionButtonThemeforegroundColor 来配置 FloatingActionButtons 内文本和图标的颜色。如果未指定任何 foregroundColor 属性,则前景颜色默认为 accentIconTheme 的颜色。

通过此更改,默认行为改为使用配色方案的 onSecondary 颜色。

变更说明

#

此前,accentIconThemeFloatingActionButtonforegroundColor 属性提供了默认值

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

配置其主题的 accentIconTheme 以有效配置所有浮动操作按钮的 foregroundColor 的应用程序,可以通过配置其主题的 floatingActionButtonThemeforegroundColor 来达到相同的效果。

FloatingActionButtonforegroundColor 现在用于配置由 FloatingActionButton 创建的 RawMaterialButtontextStyle。此前,此文本样式基于 ThemeData.accentTextTheme 的按钮样式。

dart
// 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 的 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

其他