Skip to content

Conversation

HansMuller
Copy link
Contributor

@HansMuller HansMuller commented Jan 8, 2020

Generate a warning if a FloatingActionButton's foreground color has been configured with the Theme's accentIconTheme.

This feature has been deprecated: https://flutter.dev/go/remove-fab-accent-theme-dependency . Apps can configure the appearance of FloatingActionButtons using the theme's FloatingActionButtonTheme instead. Support for configuring the foreground color of FloatingActionButton with the Theme's accentIconTheme will be removed in the future, with #46923.

Context

This is a small part of the "Update Material Theme System" project, flutter.dev/go/material-theme-system-updates.

Currently, the ThemeData accentIconTheme property is only used by FloatingActionButton. It's the default color of the text or icons that appear within the button.

FloatingActionButton also uses ThemeData accentTextTheme property, however this dependency is undocumented and unnecessary.

Both of these dependencies are apt to be confusing. For example if one configures the Theme's accentIconTheme to change the appearance of floating action buttons, it's difficult to know what other components will 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.

Currently applications can 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 is specified the foreground color currently defaults to the accentIconTheme's color. The #46923 PR will cause the default to be the color scheme's onSecondary color instead.

Description of change

Currently the accentIconTheme provides 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 currently 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. This PR removes the line that contains accentIconTheme.

The FloatingActionButton's foregroundColor is used to configure the textStyle of the RawMaterialButton created by FloatingActionButton. Currently, this text style is based on the button style of ThemeData.accentTextTheme:

// theme.accentTextTheme will become 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. The #46923 PR replaces this use of accentTextTheme with textTheme.

Migration guide

To configure the FloatingActionButton's foregroundColor for all FABs, apps can configure the theme's floatingActionButtonTheme instead of its accentIconTheme.

Before

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

After

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

@fluttergithubbot fluttergithubbot added f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. labels Jan 8, 2020
Copy link
Contributor

@gspencergoog gspencergoog left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

32384589-a60f0e74-c078-11e7-9bc1-e5b5287aea9d

@@ -411,6 +423,25 @@ class FloatingActionButton extends StatelessWidget {
final ThemeData theme = Theme.of(context);
final FloatingActionButtonThemeData floatingActionButtonTheme = theme.floatingActionButtonTheme;

// Applications should no longer use accentIconTheme's color to configure
// the foreground color of floating action buttons. For more information, see
// flutter.dev/go/remove-fab-accent-theme-dependency.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make it a link: add https:// in front of the URL, so it can be clicked on in IDEs.

@@ -117,7 +118,17 @@ void main() {
expect(_getRawMaterialButton(tester).splashColor, splashColor);
});

// The feature checked by this test has been deprecated, see
// flutter.dev/go/remove-fab-accent-theme-dependency. This test will be
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here (make it a link).

debugPrint = (String message, { int wrapWidth }) {
log.add(message);
};
debugPrintBuildScope = true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this do?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point, it's not needed in this case.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants