Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Deprecate ThemeData accentColor, accentColorBright, accentIconTheme, accentTextTheme #81336

Merged
merged 4 commits into from
Apr 30, 2021

Conversation

HansMuller
Copy link
Contributor

@HansMuller HansMuller commented Apr 27, 2021

Deprecate the ThemeData accentColor, accentColorBrightness, accentIconTheme, and accentTextTheme properties because they are no longer used by the material library (see #56918).

The official migration guide is https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties

Summary

The ThemeData accentColor, accentColorBrightness, accentIconTheme and accentTextTheme properties have been deprecated.

The Material Design spec no longer specifies or uses an "accent" color for the Material components. The default values for component colors are derived from the overall theme's color scheme. The ColorScheme's secondary color is now typically used instead of accentColor and the onSecondary color is used when a contrasting color is needed.

Context

This was a small part of the Material Theme System Updates project.

As of Flutter 1.17, the ThemeData accent properties - accentColor, accentColorBrightness, accentIconTheme, and accentTextTheme - were no longer used by the Material library. They had been replaced by dependencies on the theme's colorScheme and textTheme properties as part of the long-term goal of making the default configurations of the
material components depend almost exclusively on these two properties.

The motivation for these changes is to make the theme system easier to understand and use. The default colors for all components are to be defined by the components themselves and based on the color scheme. The defaults for specific component types can be overridden with component-specific themes like FloatingActionButtonTheme or CheckBoxTheme. Previously, properties like accentColor were used by a handful of component types and only in some situations, which made it difficult to understand the implications of overriding them.

Description of change

The ThemeData accentColor, accentColorBrightness, accentIconTheme and accentTextTheme properties have been deprecated because the Material library no longer uses them.

Migration guide

Application theme

ThemeData values no long need to specify accentColor, accentColorBrightness, accentIconTheme, or accentTextTheme.

To configure the appearance of the material components in about the same way as before, specify the color scheme's secondary color instead of accentColor.

Code before migration:

MaterialApp(
  theme: ThemeData(accentColor: myColor),
  // ...
);

Code after migration:

final ThemeData theme = ThemeData();
MaterialApp(
  theme: theme.copyWith(
    colorScheme: theme.colorScheme.copyWith(secondaryColor: myColor),
  ),
  //...
)

accentColor

The closest backwards compatible ColorScheme color is ColorScheme.secondary. To hew most closely to the latest Material Design guidelines one can substitute ColorScheme.primary instead. If a contrasting color is needed then use ColorScheme.onSecondary.

Custom components that used to look up the theme's accentColor, can look up the ColorScheme.secondary instead.

Code before migration:

Color myColor = Theme.of(context).accentColor;

Code after migration:

Color myColor = Theme.of(context).colorScheme.secondary;

accentColorBrightness

The static ThemeData.estimateBrightnessForColor() method can be used to compute the brightness of any color.

accentTextTheme

This was white TextStyles for dark themes, black TextStyles for light themes. In most cases textTheme can be used instead. A common idiom was to refer to one TextStyle from accentTextTheme, since the text style's color was guaranteed to contrast well with the accent color (now ColorScheme.secondaryColor). To get the same result now, specify the text style's color as ColorScheme.onSecondary:

Code before migration:

TextStyle style = Theme.of(context).accentTextTheme.headline1;

Code after migration:

final ThemeData theme = Theme.of(context);
TextStyle style = theme.textTheme.headline1.copyWith(
  color: theme.colorScheme.onSecondary,
)

accentIconTheme

This property had only been used to configure the color of icons within a FloatingActionButton. It's now possible to configure the icon color directly or with the FloatingActionButtonTheme. See FloatingActionButton and ThemeData's accent properties.

Timeline

Landed in version: 2.3.0-0.1.pre

In stable release: not yet

References

Relevant issues:

Relevant PRs:

Other:

Copy link
Contributor

@darrenaustin darrenaustin left a comment

Choose a reason for hiding this comment

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

LGTM. Nice to see this go.

@HansMuller
Copy link
Contributor Author

Google testing passed upon deflake

@HansMuller HansMuller merged commit 8c45386 into flutter:master Apr 30, 2021
@HansMuller HansMuller deleted the deprecate_accent_color branch April 30, 2021 15:24
@Piinks Piinks mentioned this pull request Jul 13, 2021
8 tasks
smanilov added a commit to smanilov/t700kilos that referenced this pull request Mar 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
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.

2 participants