FloatingActionButton and ThemeData's accent properties
Summary
#Removed Flutter's FloatingActionButton
(FAB) dependency on
ThemeData
accent properties.
Context
#This was a small part of the Material Theme System Updates project.
Previously, the ThemeData
accentIconTheme
property was only
used by FloatingActionButton
to determine the default
color of the text or icons that appeared within the button.
FloatingActionButton
also used the
ThemeData accentTextTheme
property,
however this dependency was undocumented and unnecessary.
Both of these dependencies were confusing.
For example if one configured the Theme
's accentIconTheme
to change the appearance of all floating action buttons,
it was difficult to know what other components would be affected,
or might be affected in the future.
The Material Design spec no longer includes an "accent" color.
The ColorScheme
's secondary color is now used instead.
Previously, applications could configure the color of text and icons
within FloatingActionButtons
with the widget's foregroundColor
property, or with the FloatingActionButtonTheme
's foregroundColor
.
If neither foregroundColor
property was specified, the foreground
color defaulted to the accentIconTheme
's color.
With this change, the default behavior uses the color scheme's
onSecondary
color instead.
Description of change
#Previously, the accentIconTheme
provided a default for the
FloatingActionButton
's foregroundColor
property:
final Color foregroundColor = this.foregroundColor
?? floatingActionButtonTheme.foregroundColor
?? theme.accentIconTheme.color // To be removed.
?? theme.colorScheme.onSecondary;
Apps that configure their theme's accentIconTheme
to effectively configure the foregroundColor
of all
floating action buttons, can get the same effect by
configuring the foregroundColor
of their theme's
floatingActionButtonTheme
.
The FloatingActionButton
's foregroundColor
is now used
to configure the textStyle
of the RawMaterialButton
created by FloatingActionButton
. Previously,
this text style was based on the button style of
ThemeData.accentTextTheme
:
// theme.accentTextTheme becomes theme.textTheme
final TextStyle textStyle = theme.accentTextTheme.button.copyWith(
color: foregroundColor,
letterSpacing: 1.2,
);
Except in a case where an app has explicitly configured the
accentTextTheme
to take advantage of this undocumented dependency,
this use of accentTextTheme
is unnecessary.
This change replaces this use of accentTextTheme
with textTheme
.
Migration guide
#This change occurred in two steps:
- If the foreground of a
FloatingActionButton
is set to a non-default color, a warning is now printed. - The
accentIconTheme
dependency was removed. If you haven't already done so, migrate your apps per the pattern below.
To configure the FloatingActionButton
's foregroundColor
for all FABs, you can configure the theme's
floatingActionButtonTheme
instead of its accentIconTheme
.
Code before migration:
MaterialApp(
theme: ThemeData(
accentIconTheme: IconThemeData(color: Colors.red),
),
)
Code after migration:
MaterialApp(
theme: ThemeData(
floatingActionButtonTheme: FloatingActionButtonThemeData(
foregroundColor: Colors.red,
),
),
)
Timeline
#Landed in version: 1.16.3
In stable release: 1.17
References
#Design doc:
API documentation:
Relevant PRs:
- Step 1 of 2 Warn about Flutter's FloatingActionButton dependency on ThemeData accent properties
- Step 2 of 2 Remove Flutter's FloatingActionButton dependency on ThemeData accent properties
Other:
除非另有说明,本文档之所提及适用于 Flutter 的最新稳定版本,本页面最后更新时间: 2024-09-04。 查看文档源码 或者 为本页面内容提出建议。