概述

#

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

背景

#

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

以前,ThemeDataaccentIconTheme 属性仅被 FloatingActionButton 用于确定按钮内文本或图标的默认颜色。

FloatingActionButton 还使用了 ThemeData accentTextTheme 属性,但此依赖关系是未公开的且不必要的。

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

Material Design 规范 不再包含“accent”颜色。现在改用 ColorSchemesecondary color

以前,应用程序可以使用 widget 的 foregroundColor 属性,或使用 FloatingActionButtonThemeforegroundColor 来配置 FloatingActionButtons 中文本和图标的颜色。如果两者都没有指定 foregroundColor 属性,则前景色将默认为 accentIconTheme 的颜色。

通过此更改,默认行为改用 color scheme 的 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

其他