FloatingActionButton (FAB) dependency on
ThemeData accent properties.
This was a small part of the Material Theme System Updates project.
ThemeData accentIconTheme property was only
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
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.
Previously, applications could configure the color of text and icons
FloatingActionButtons with the widget’s
property, or with the
foregroundColor property was specified, the foreground
color defaulted to the
With this change, the default behavior uses the color scheme’s
onSecondary color instead.
Description of change
accentIconTheme provided a default for the
final Color foregroundColor = this.foregroundColor ?? floatingActionButtonTheme.foregroundColor ?? theme.accentIconTheme.color // To be removed. ?? theme.colorScheme.onSecondary;
Apps that configure their theme’s
to effectively configure the
foregroundColor of all
floating action buttons, can get the same effect by
foregroundColor of their theme’s
foregroundColor is now used
to configure the
textStyle of the
this text style was based on the button style of
// 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
This change occurred in two steps:
- If the foreground of a
FloatingActionButtonis set to a non-default color, a warning is now printed.
accentIconThemedependency was removed. If you haven’t already done so, migrate your apps per the pattern below.
To configure the
for all FABs, you can configure the theme’s
floatingActionButtonTheme instead of its
Code before migration:
MaterialApp( theme: ThemeData( accentIconTheme: IconThemeData(color: Colors.red), ), )
Code after migration:
MaterialApp( theme: ThemeData( floatingActionButtonTheme: FloatingActionButtonThemeData( foregroundColor: Colors.red, ), ), )
Landed in version: 1.16.3
In stable release: 1.17
- 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