ColorScheme class Null safety
A set of 25 colors based on the Material spec that can be used to configure the color properties of most components.
The main accent color groups in the scheme are primary, secondary, and tertiary.
-
Primary colors are used for key components across the UI, such as the FAB, prominent buttons, and active states.
-
Secondary colors are used for less prominent components in the UI, such as filter chips, while expanding the opportunity for color expression.
-
Tertiary colors are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element, such as an input field. The tertiary colors are left for makers to use at their discretion and are intended to support broader color expression in products.
The remaining colors of the scheme are comprised of neutral colors used for backgrounds and surfaces, as well as specific colors for errors, dividers and shadows.
Many of the colors have matching 'on' colors, which are used for drawing content on top of the matching color. For example, if something is using primary for a background color, onPrimary would be used to paint text and icons on top of it. For this reason, the 'on' colors should have a contrast ratio with their matching colors of at least 4.5:1 in order to be readable.
The Theme has a color scheme, ThemeData.colorScheme, which can either be passed in as a parameter to the constructor or by using 'brightness' and 'colorSchemeSeed' parameters (which are used to generate a scheme with ColorScheme.fromSeed).
- Mixed in types
- Annotations
Constructors
- ColorScheme({required Brightness brightness, required Color primary, required Color onPrimary, Color? primaryContainer, Color? onPrimaryContainer, required Color secondary, required Color onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, required Color error, required Color onError, Color? errorContainer, Color? onErrorContainer, required Color background, required Color onBackground, required Color surface, required Color onSurface, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? shadow, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use primary or primaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? primaryVariant, @Deprecated('Use secondary or secondaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? secondaryVariant})
-
Create a ColorScheme instance from the given colors.
const
- ColorScheme.dark({Brightness brightness = Brightness.dark, Color primary = const Color(0xffbb86fc), Color onPrimary = Colors.black, Color? primaryContainer, Color? onPrimaryContainer, Color secondary = const Color(0xff03dac6), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color error = const Color(0xffcf6679), Color onError = Colors.black, Color? errorContainer, Color? onErrorContainer, Color background = const Color(0xff121212), Color onBackground = Colors.white, Color surface = const Color(0xff121212), Color onSurface = Colors.white, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? shadow, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use primary or primaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? primaryVariant = const Color(0xff3700B3), @Deprecated('Use secondary or secondaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? secondaryVariant = const Color(0xff03dac6)})
-
Create the recommended dark color scheme that matches the
baseline Material color scheme.
const
- ColorScheme.fromSeed({required Color seedColor, Brightness brightness = Brightness.light, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? outline, Color? background, Color? onBackground, Color? surface, Color? onSurface, Color? surfaceVariant, Color? onSurfaceVariant, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? shadow, Color? surfaceTint})
-
Generate a ColorScheme derived from the given
seedColor
.factory - ColorScheme.fromSwatch({MaterialColor primarySwatch = Colors.blue, Color? primaryColorDark, Color? accentColor, Color? cardColor, Color? backgroundColor, Color? errorColor, Brightness brightness = Brightness.light})
-
Create a color scheme from a MaterialColor swatch.
factory
- ColorScheme.highContrastDark({Brightness brightness = Brightness.dark, Color primary = const Color(0xffefb7ff), Color onPrimary = Colors.black, Color? primaryContainer, Color? onPrimaryContainer, Color secondary = const Color(0xff66fff9), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color error = const Color(0xff9b374d), Color onError = Colors.black, Color? errorContainer, Color? onErrorContainer, Color background = const Color(0xff121212), Color onBackground = Colors.white, Color surface = const Color(0xff121212), Color onSurface = Colors.white, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? shadow, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use primary or primaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? primaryVariant = const Color(0xffbe9eff), @Deprecated('Use secondary or secondaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? secondaryVariant = const Color(0xff66fff9)})
-
Create a high contrast ColorScheme based on the dark
baseline Material color scheme.
const
- ColorScheme.highContrastLight({Brightness brightness = Brightness.light, Color primary = const Color(0xff0000ba), Color onPrimary = Colors.white, Color? primaryContainer, Color? onPrimaryContainer, Color secondary = const Color(0xff66fff9), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color error = const Color(0xff790000), Color onError = Colors.white, Color? errorContainer, Color? onErrorContainer, Color background = Colors.white, Color onBackground = Colors.black, Color surface = Colors.white, Color onSurface = Colors.black, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? shadow, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use primary or primaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? primaryVariant = const Color(0xff000088), @Deprecated('Use secondary or secondaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? secondaryVariant = const Color(0xff018786)})
-
Create a high contrast ColorScheme based on a purple primary color that
matches the baseline Material color scheme.
const
- ColorScheme.light({Brightness brightness = Brightness.light, Color primary = const Color(0xff6200ee), Color onPrimary = Colors.white, Color? primaryContainer, Color? onPrimaryContainer, Color secondary = const Color(0xff03dac6), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color error = const Color(0xffb00020), Color onError = Colors.white, Color? errorContainer, Color? onErrorContainer, Color background = Colors.white, Color onBackground = Colors.black, Color surface = Colors.white, Color onSurface = Colors.black, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? shadow, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use primary or primaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? primaryVariant = const Color(0xff3700b3), @Deprecated('Use secondary or secondaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.') Color? secondaryVariant = const Color(0xff018786)})
-
Create a ColorScheme based on a purple primary color that matches the
baseline Material color scheme.
const
Properties
- background → Color
-
A color that typically appears behind scrollable content.
final
- brightness → Brightness
-
The overall brightness of this color scheme.
final
- error → Color
-
The color to use for input validation errors, e.g. for
InputDecoration.errorText.
final
- errorContainer → Color
-
A color used for error elements needing less emphasis than error.
read-only
- hashCode → int
-
The hash code for this object.
read-onlyoverride
- inversePrimary → Color
-
An accent color used for displaying a highlight color on inverseSurface
backgrounds, like button text in a SnackBar.
read-only
- inverseSurface → Color
-
A surface color used for displaying the reverse of what’s seen in the
surrounding UI, for example in a SnackBar to bring attention to
an alert.
read-only
- onBackground → Color
-
A color that's clearly legible when drawn on background.
final
- onError → Color
-
A color that's clearly legible when drawn on error.
final
- onErrorContainer → Color
-
A color that's clearly legible when drawn on errorContainer.
read-only
- onInverseSurface → Color
-
A color that's clearly legible when drawn on inverseSurface.
read-only
- onPrimary → Color
-
A color that's clearly legible when drawn on primary.
final
- onPrimaryContainer → Color
-
A color that's clearly legible when drawn on primaryContainer.
read-only
- onSecondary → Color
-
A color that's clearly legible when drawn on secondary.
final
- onSecondaryContainer → Color
-
A color that's clearly legible when drawn on secondaryContainer.
read-only
- onSurface → Color
-
A color that's clearly legible when drawn on surface.
final
- onSurfaceVariant → Color
-
A color that's clearly legible when drawn on surfaceVariant.
read-only
- onTertiary → Color
-
A color that's clearly legible when drawn on tertiary.
read-only
- onTertiaryContainer → Color
-
A color that's clearly legible when drawn on tertiaryContainer.
read-only
- outline → Color
-
A utility color that creates boundaries and emphasis to improve usability.
read-only
- primary → Color
-
The color displayed most frequently across your app’s screens and components.
final
- primaryContainer → Color
-
A color used for elements needing less emphasis than primary.
read-only
- primaryVariant → Color
-
A darker version of the primary color.
Deprecated('Use primary or primaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.')">@Deprecated('Use primary or primaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.')read-only
- runtimeType → Type
-
A representation of the runtime type of the object.
read-onlyinherited
- secondary → Color
-
An accent color used for less prominent components in the UI, such as
filter chips, while expanding the opportunity for color expression.
final
- secondaryContainer → Color
-
A color used for elements needing less emphasis than secondary.
read-only
- secondaryVariant → Color
-
A darker version of the secondary color.
Deprecated('Use secondary or secondaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.')">@Deprecated('Use secondary or secondaryContainer instead. ' 'This feature was deprecated after v2.6.0-0.0.pre.')read-only
- shadow → Color
-
A color use to paint the drop shadows of elevated components.
read-only
- surface → Color
-
The background color for widgets like Card.
final
- surfaceTint → Color
-
A color used as an overlay on a surface color to indicate a component's
elevation.
read-only
- surfaceVariant → Color
-
A color variant of surface that can be used for differentiation against
a component using surface.
read-only
- tertiary → Color
-
A color used as a contrasting accent that can balance primary
and secondary colors or bring heightened attention to an element,
such as an input field.
read-only
- tertiaryContainer → Color
-
A color used for elements needing less emphasis than tertiary.
read-only
Methods
-
copyWith(
{Brightness? brightness, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? background, Color? onBackground, Color? surface, Color? onSurface, Color? surfaceVariant, Color? onSurfaceVariant, Color? outline, Color? shadow, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, Color? primaryVariant, Color? secondaryVariant}) → ColorScheme - Creates a copy of this color scheme with the given fields replaced by the non-null parameter values.
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
override
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a non-existent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringShort(
) → String -
A brief description of this object, usually just the runtimeType and the
hashCode.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
override
Static Methods
-
lerp(
ColorScheme a, ColorScheme b, double t) → ColorScheme - Linearly interpolate between two ColorScheme objects.