MaterialColor class

Defines a single color as well a color swatch with ten shades of the color.

The color's shades are referred to by index. The greater the index, the darker the color. There are 10 valid indices: 50, 100, 200, ..., 900. The value of this color should the same the value of index 500 and shade500.

Updating to ColorScheme

The ColorScheme is preferred for representing colors in applications that are configured for Material 3 (see ThemeData.useMaterial3). For more information on colors in Material 3 see the spec at m3.material.io/styles/color/the-color-system.

In Material 3, colors are represented using color roles and corresponding tokens. Each property in the ColorScheme class represents one color role as defined in the spec above.

Material 3 Colors in Flutter

Flutter's Material widgets can be assigned colors at the widget level using widget properties, or at the app level using theme classes.

For example, you can set the background of the AppBar by setting the AppBar.backgroundColor to a specific Color value.

To globally set the AppBar background color for your app, you can set the ThemeData.appBarTheme property for your MaterialApp using the ThemeData class. You can also override the default appearance of all the AppBars in a widget subtree by placing the AppBarTheme at the root of the subtree.

Alternatively, you can set the ThemeData.colorScheme property to a custom ColorScheme. This creates a unified ColorScheme to be used across the app. The AppBar.backgroundColor uses the ColorScheme.surface by default.

Migrating from MaterialColor to ColorScheme

In most cases, there are new properties in Flutter widgets that accept a ColorScheme instead of a MaterialColor.

For example, you may have previously constructed a ThemeData using a primarySwatch:

ThemeData(
  primarySwatch: Colors.amber,
)

In Material 3, you can use the ColorScheme class to construct a ThemeData with the same color palette by using the ColorScheme.fromSeed constructor:

ThemeData(
 colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),
)

The ColorScheme.fromSeed constructor will generate a set of tonal palettes, which are used to create the color scheme.

Alternatively you can use the ColorScheme.fromSwatch constructor:

ThemeData(
 colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
)

The ColorScheme.fromSwatch constructor will create the color scheme directly from the specific color values used in the MaterialColor.

See also:

  • Colors, which defines all of the standard material colors.
Inheritance

Constructors

MaterialColor(int primary, Map<int, Color> swatch)
Creates a color swatch with a variety of shades.
const

Properties

alpha int
The alpha channel of this color in an 8 bit value.
no setterinherited
blue int
The blue channel of this color in an 8 bit value.
no setterinherited
green int
The green channel of this color in an 8 bit value.
no setterinherited
hashCode int
The hash code for this object.
no setterinherited
opacity double
The alpha channel of this color as a double.
no setterinherited
red int
The red channel of this color in an 8 bit value.
no setterinherited
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
shade50 Color
The lightest shade.
no setter
shade100 Color
The second lightest shade.
no setter
shade200 Color
The third lightest shade.
no setter
shade300 Color
The fourth lightest shade.
no setter
shade400 Color
The fifth lightest shade.
no setter
shade500 Color
The default shade.
no setter
shade600 Color
The fourth darkest shade.
no setter
shade700 Color
The third darkest shade.
no setter
shade800 Color
The second darkest shade.
no setter
shade900 Color
The darkest shade.
no setter
value int
A 32 bit value representing this color.
finalinherited

Methods

computeLuminance() double
Returns a brightness value between 0 for darkest and 1 for lightest.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toString() String
A string representation of this object.
inherited
withAlpha(int a) Color
Returns a new color that matches this color with the alpha channel replaced with a (which ranges from 0 to 255).
inherited
withBlue(int b) Color
Returns a new color that matches this color with the blue channel replaced with b (which ranges from 0 to 255).
inherited
withGreen(int g) Color
Returns a new color that matches this color with the green channel replaced with g (which ranges from 0 to 255).
inherited
withOpacity(double opacity) Color
Returns a new color that matches this color with the alpha channel replaced with the given opacity (which ranges from 0.0 to 1.0).
inherited
withRed(int r) Color
Returns a new color that matches this color with the red channel replaced with r (which ranges from 0 to 255).
inherited

Operators

operator ==(Object other) bool
The equality operator.
inherited
operator [](int index) Color?
Returns an element of the swatch table.
inherited