ColorScheme class
A set of 45 colors based on the Material spec that can be used to configure the color properties of most components.
Colors in Material 3
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.
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.
Each accent color group (primary, secondary and tertiary) includes '-Fixed' '-Dim' color roles, such as primaryFixed and primaryFixedDim. Fixed roles are appropriate to use in places where Container roles are normally used, but they stay the same color between light and dark themes. The '-Dim' roles provide a stronger, more emphasized color with the same fixed behavior.
The remaining colors of the scheme are composed of neutral colors used for backgrounds and surfaces, as well as specific colors for errors, dividers and shadows. Surface colors are used for backgrounds and large, low-emphasis areas of the screen.
Material 3 also introduces tone-based surfaces and surface containers. They replace the old opacity-based model which applied a tinted overlay on top of surfaces based on their elevation. These colors include: surfaceBright, surfaceDim, surfaceContainerLowest, surfaceContainerLow, surfaceContainer, surfaceContainerHigh, and surfaceContainerHighest.
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. On '-FixedVariant' roles, such as onPrimaryFixedVariant, also have the same color between light and dark themes, but compared with on '-Fixed' roles, such as onPrimaryFixed, they provide a lower-emphasis option for text and icons.
This example shows all Material ColorScheme roles in light and dark brightnesses.
To see it in action, copy and run this code snippet on DartPad.
import 'package:material_ui/material_ui.dart';
/// Flutter code sample for [ColorScheme].
const Widget divider = SizedBox(height: 10);
void main() => runApp(const ColorSchemeExample());
class ColorSchemeExample extends StatefulWidget {
const ColorSchemeExample({super.key});
@override
State<ColorSchemeExample> createState() => _ColorSchemeExampleState();
}
class _ColorSchemeExampleState extends State<ColorSchemeExample> {
Color selectedColor = ColorSeed.baseColor.color;
Brightness selectedBrightness = .light;
double selectedContrast = 0.0;
static const List<DynamicSchemeVariant> schemeVariants =
DynamicSchemeVariant.values;
void updateTheme(Brightness brightness, Color color, double contrastLevel) {
setState(() {
selectedBrightness = brightness;
selectedColor = color;
selectedContrast = contrastLevel;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: selectedColor,
brightness: selectedBrightness,
contrastLevel: selectedContrast,
),
),
home: Scaffold(
appBar: AppBar(
title: const Text('ColorScheme'),
actions: <Widget>[
SettingsButton(
selectedColor: selectedColor,
selectedBrightness: selectedBrightness,
selectedContrast: selectedContrast,
updateTheme: updateTheme,
),
],
),
body: SingleChildScrollView(
child: Padding(
padding: const .only(top: 5),
child: Column(
crossAxisAlignment: .start,
children: <Widget>[
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: List<Widget>.generate(schemeVariants.length, (
int index,
) {
return ColorSchemeVariantColumn(
selectedColor: selectedColor,
brightness: selectedBrightness,
schemeVariant: schemeVariants[index],
contrastLevel: selectedContrast,
);
}).toList(),
),
),
],
),
),
),
),
);
}
}
class Settings extends StatefulWidget {
const Settings({
super.key,
required this.updateTheme,
required this.selectedBrightness,
required this.selectedContrast,
required this.selectedColor,
});
final Brightness selectedBrightness;
final double selectedContrast;
final Color selectedColor;
final void Function(Brightness, Color, double) updateTheme;
@override
State<Settings> createState() => _SettingsState();
}
class _SettingsState extends State<Settings> {
late Brightness selectedBrightness = widget.selectedBrightness;
late Color selectedColor = widget.selectedColor;
late double selectedContrast = widget.selectedContrast;
@override
Widget build(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.fromSeed(
seedColor: selectedColor,
contrastLevel: selectedContrast,
brightness: selectedBrightness,
),
),
child: ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
child: Padding(
padding: const .all(20.0),
child: ListView(
children: <Widget>[
Center(
child: Text(
'Settings',
style: Theme.of(context).textTheme.titleLarge,
),
),
Row(
children: <Widget>[
const Text('Brightness: '),
Switch(
value: selectedBrightness == Brightness.light,
onChanged: (bool value) {
setState(() {
selectedBrightness = value
? Brightness.light
: Brightness.dark;
});
widget.updateTheme(
selectedBrightness,
selectedColor,
selectedContrast,
);
},
),
],
),
Wrap(
crossAxisAlignment: .center,
children: <Widget>[
const Text('Seed color: '),
...List<Widget>.generate(ColorSeed.values.length, (
int index,
) {
final Color itemColor = ColorSeed.values[index].color;
return IconButton(
icon: selectedColor == ColorSeed.values[index].color
? Icon(Icons.circle, color: itemColor)
: Icon(Icons.circle_outlined, color: itemColor),
onPressed: () {
setState(() {
selectedColor = itemColor;
});
widget.updateTheme(
selectedBrightness,
selectedColor,
selectedContrast,
);
},
);
}),
],
),
Row(
children: <Widget>[
const Text('Contrast level: '),
Expanded(
child: Slider(
divisions: 4,
label: selectedContrast.toString(),
min: -1,
value: selectedContrast,
onChanged: (double value) {
setState(() {
selectedContrast = value;
});
widget.updateTheme(
selectedBrightness,
selectedColor,
selectedContrast,
);
},
),
),
],
),
],
),
),
),
);
}
}
class ColorSchemeVariantColumn extends StatelessWidget {
const ColorSchemeVariantColumn({
super.key,
this.schemeVariant = DynamicSchemeVariant.tonalSpot,
this.brightness = Brightness.light,
this.contrastLevel = 0.0,
required this.selectedColor,
});
final DynamicSchemeVariant schemeVariant;
final Brightness brightness;
final double contrastLevel;
final Color selectedColor;
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: const BoxConstraints.tightFor(width: 250),
child: Column(
children: <Widget>[
Padding(
padding: const .symmetric(vertical: 15),
child: Text(
schemeVariant.name == 'tonalSpot'
? '${schemeVariant.name} (Default)'
: schemeVariant.name,
style: const TextStyle(fontWeight: .bold),
),
),
Padding(
padding: const .symmetric(horizontal: 15),
child: ColorSchemeView(
colorScheme: ColorScheme.fromSeed(
seedColor: selectedColor,
brightness: brightness,
contrastLevel: contrastLevel,
dynamicSchemeVariant: schemeVariant,
),
),
),
],
),
);
}
}
class ColorSchemeView extends StatelessWidget {
const ColorSchemeView({super.key, required this.colorScheme});
final ColorScheme colorScheme;
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ColorGroup(
children: <ColorChip>[
ColorChip('primary', colorScheme.primary, colorScheme.onPrimary),
ColorChip('onPrimary', colorScheme.onPrimary, colorScheme.primary),
ColorChip(
'primaryContainer',
colorScheme.primaryContainer,
colorScheme.onPrimaryContainer,
),
ColorChip(
'onPrimaryContainer',
colorScheme.onPrimaryContainer,
colorScheme.primaryContainer,
),
],
),
divider,
ColorGroup(
children: <ColorChip>[
ColorChip(
'primaryFixed',
colorScheme.primaryFixed,
colorScheme.onPrimaryFixed,
),
ColorChip(
'onPrimaryFixed',
colorScheme.onPrimaryFixed,
colorScheme.primaryFixed,
),
ColorChip(
'primaryFixedDim',
colorScheme.primaryFixedDim,
colorScheme.onPrimaryFixedVariant,
),
ColorChip(
'onPrimaryFixedVariant',
colorScheme.onPrimaryFixedVariant,
colorScheme.primaryFixedDim,
),
],
),
divider,
ColorGroup(
children: <ColorChip>[
ColorChip(
'secondary',
colorScheme.secondary,
colorScheme.onSecondary,
),
ColorChip(
'onSecondary',
colorScheme.onSecondary,
colorScheme.secondary,
),
ColorChip(
'secondaryContainer',
colorScheme.secondaryContainer,
colorScheme.onSecondaryContainer,
),
ColorChip(
'onSecondaryContainer',
colorScheme.onSecondaryContainer,
colorScheme.secondaryContainer,
),
],
),
divider,
ColorGroup(
children: <ColorChip>[
ColorChip(
'secondaryFixed',
colorScheme.secondaryFixed,
colorScheme.onSecondaryFixed,
),
ColorChip(
'onSecondaryFixed',
colorScheme.onSecondaryFixed,
colorScheme.secondaryFixed,
),
ColorChip(
'secondaryFixedDim',
colorScheme.secondaryFixedDim,
colorScheme.onSecondaryFixedVariant,
),
ColorChip(
'onSecondaryFixedVariant',
colorScheme.onSecondaryFixedVariant,
colorScheme.secondaryFixedDim,
),
],
),
divider,
ColorGroup(
children: <ColorChip>[
ColorChip('tertiary', colorScheme.tertiary, colorScheme.onTertiary),
ColorChip(
'onTertiary',
colorScheme.onTertiary,
colorScheme.tertiary,
),
ColorChip(
'tertiaryContainer',
colorScheme.tertiaryContainer,
colorScheme.onTertiaryContainer,
),
ColorChip(
'onTertiaryContainer',
colorScheme.onTertiaryContainer,
colorScheme.tertiaryContainer,
),
],
),
divider,
ColorGroup(
children: <ColorChip>[
ColorChip(
'tertiaryFixed',
colorScheme.tertiaryFixed,
colorScheme.onTertiaryFixed,
),
ColorChip(
'onTertiaryFixed',
colorScheme.onTertiaryFixed,
colorScheme.tertiaryFixed,
),
ColorChip(
'tertiaryFixedDim',
colorScheme.tertiaryFixedDim,
colorScheme.onTertiaryFixedVariant,
),
ColorChip(
'onTertiaryFixedVariant',
colorScheme.onTertiaryFixedVariant,
colorScheme.tertiaryFixedDim,
),
],
),
divider,
ColorGroup(
children: <ColorChip>[
ColorChip('error', colorScheme.error, colorScheme.onError),
ColorChip('onError', colorScheme.onError, colorScheme.error),
ColorChip(
'errorContainer',
colorScheme.errorContainer,
colorScheme.onErrorContainer,
),
ColorChip(
'onErrorContainer',
colorScheme.onErrorContainer,
colorScheme.errorContainer,
),
],
),
divider,
ColorGroup(
children: <ColorChip>[
ColorChip(
'surfaceDim',
colorScheme.surfaceDim,
colorScheme.onSurface,
),
ColorChip('surface', colorScheme.surface, colorScheme.onSurface),
ColorChip(
'surfaceBright',
colorScheme.surfaceBright,
colorScheme.onSurface,
),
ColorChip(
'surfaceContainerLowest',
colorScheme.surfaceContainerLowest,
colorScheme.onSurface,
),
ColorChip(
'surfaceContainerLow',
colorScheme.surfaceContainerLow,
colorScheme.onSurface,
),
ColorChip(
'surfaceContainer',
colorScheme.surfaceContainer,
colorScheme.onSurface,
),
ColorChip(
'surfaceContainerHigh',
colorScheme.surfaceContainerHigh,
colorScheme.onSurface,
),
ColorChip(
'surfaceContainerHighest',
colorScheme.surfaceContainerHighest,
colorScheme.onSurface,
),
ColorChip('onSurface', colorScheme.onSurface, colorScheme.surface),
ColorChip(
'onSurfaceVariant',
colorScheme.onSurfaceVariant,
colorScheme.surfaceContainerHighest,
),
],
),
divider,
ColorGroup(
children: <ColorChip>[
ColorChip('outline', colorScheme.outline, null),
ColorChip('shadow', colorScheme.shadow, null),
ColorChip(
'inverseSurface',
colorScheme.inverseSurface,
colorScheme.onInverseSurface,
),
ColorChip(
'onInverseSurface',
colorScheme.onInverseSurface,
colorScheme.inverseSurface,
),
ColorChip(
'inversePrimary',
colorScheme.inversePrimary,
colorScheme.primary,
),
],
),
],
);
}
}
class ColorGroup extends StatelessWidget {
const ColorGroup({super.key, required this.children});
final List<Widget> children;
@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: Card(
clipBehavior: .antiAlias,
child: Column(children: children),
),
);
}
}
class ColorChip extends StatelessWidget {
const ColorChip(this.label, this.color, this.onColor, {super.key});
final Color color;
final Color? onColor;
final String label;
static Color contrastColor(Color color) {
final Brightness brightness = ThemeData.estimateBrightnessForColor(color);
return brightness == .dark ? Colors.white : Colors.black;
}
@override
Widget build(BuildContext context) {
final Color labelColor = onColor ?? contrastColor(color);
return ColoredBox(
color: color,
child: Padding(
padding: const .all(16),
child: Row(
children: <Expanded>[
Expanded(
child: Text(label, style: TextStyle(color: labelColor)),
),
],
),
),
);
}
}
enum ColorSeed {
baseColor('M3 Baseline', Color(0xff6750a4)),
indigo('Indigo', Colors.indigo),
blue('Blue', Colors.blue),
teal('Teal', Colors.teal),
green('Green', Colors.green),
yellow('Yellow', Colors.yellow),
orange('Orange', Colors.orange),
deepOrange('Deep Orange', Colors.deepOrange),
pink('Pink', Colors.pink),
brightBlue('Bright Blue', Color(0xFF0000FF)),
brightGreen('Bright Green', Color(0xFF00FF00)),
brightRed('Bright Red', Color(0xFFFF0000));
const ColorSeed(this.label, this.color);
final String label;
final Color color;
}
class SettingsButton extends StatelessWidget {
const SettingsButton({
super.key,
required this.updateTheme,
required this.selectedBrightness,
required this.selectedContrast,
required this.selectedColor,
});
final Brightness selectedBrightness;
final double selectedContrast;
final Color selectedColor;
final void Function(Brightness, Color, double) updateTheme;
@override
Widget build(BuildContext context) {
return IconButton(
icon: const Icon(Icons.settings),
onPressed: () {
showModalBottomSheet<void>(
barrierColor: Colors.transparent,
context: context,
builder: (BuildContext context) {
return Settings(
selectedColor: selectedColor,
selectedBrightness: selectedBrightness,
selectedContrast: selectedContrast,
updateTheme: updateTheme,
);
},
);
},
);
}
}
Setting 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.
- Mixed-in types
- Annotations
Constructors
- ColorScheme({required Brightness brightness, required Color primary, required Color onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? primaryFixed, Color? primaryFixedDim, Color? onPrimaryFixed, Color? onPrimaryFixedVariant, required Color secondary, required Color onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? secondaryFixed, Color? secondaryFixedDim, Color? onSecondaryFixed, Color? onSecondaryFixedVariant, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? tertiaryFixed, Color? tertiaryFixedDim, Color? onTertiaryFixed, Color? onTertiaryFixedVariant, required Color error, required Color onError, Color? errorContainer, Color? onErrorContainer, required Color surface, required Color onSurface, Color? surfaceDim, Color? surfaceBright, Color? surfaceContainerLowest, Color? surfaceContainerLow, Color? surfaceContainer, Color? surfaceContainerHigh, Color? surfaceContainerHighest, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? background, @Deprecated('Use onSurface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? onBackground, @Deprecated('Use surfaceContainerHighest instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? surfaceVariant})
-
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? primaryFixed, Color? primaryFixedDim, Color? onPrimaryFixed, Color? onPrimaryFixedVariant, Color secondary = const Color(0xff03dac6), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? secondaryFixed, Color? secondaryFixedDim, Color? onSecondaryFixed, Color? onSecondaryFixedVariant, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? tertiaryFixed, Color? tertiaryFixedDim, Color? onTertiaryFixed, Color? onTertiaryFixedVariant, Color error = const Color(0xffcf6679), Color onError = Colors.black, Color? errorContainer, Color? onErrorContainer, Color surface = const Color(0xff121212), Color onSurface = Colors.white, Color? surfaceDim, Color? surfaceBright, Color? surfaceContainerLowest, Color? surfaceContainerLow, Color? surfaceContainer, Color? surfaceContainerHigh, Color? surfaceContainerHighest, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? background = const Color(0xff121212), @Deprecated('Use onSurface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? onBackground = Colors.white, @Deprecated('Use surfaceContainerHighest instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? surfaceVariant})
-
Create the dark color scheme that matches the
baseline Material 2 color scheme.
const
- ColorScheme.fromSeed({required Color seedColor, Brightness brightness = Brightness.light, DynamicSchemeVariant dynamicSchemeVariant = DynamicSchemeVariant.tonalSpot, double contrastLevel = 0.0, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? primaryFixed, Color? primaryFixedDim, Color? onPrimaryFixed, Color? onPrimaryFixedVariant, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? secondaryFixed, Color? secondaryFixedDim, Color? onSecondaryFixed, Color? onSecondaryFixedVariant, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? tertiaryFixed, Color? tertiaryFixedDim, Color? onTertiaryFixed, Color? onTertiaryFixedVariant, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? outline, Color? outlineVariant, Color? surface, Color? onSurface, Color? surfaceDim, Color? surfaceBright, Color? surfaceContainerLowest, Color? surfaceContainerLow, Color? surfaceContainer, Color? surfaceContainerHigh, Color? surfaceContainerHighest, Color? onSurfaceVariant, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? shadow, Color? scrim, Color? surfaceTint, @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? background, @Deprecated('Use onSurface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? onBackground, @Deprecated('Use surfaceContainerHighest instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? surfaceVariant})
-
Generate a ColorScheme derived from the given
seedColor.factory - ColorScheme.fromSwatch({MaterialColor primarySwatch = Colors.blue, Color? accentColor, Color? cardColor, Color? backgroundColor, Color? errorColor, Brightness brightness = Brightness.light})
-
Creates 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? primaryFixed, Color? primaryFixedDim, Color? onPrimaryFixed, Color? onPrimaryFixedVariant, Color secondary = const Color(0xff66fff9), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? secondaryFixed, Color? secondaryFixedDim, Color? onSecondaryFixed, Color? onSecondaryFixedVariant, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? tertiaryFixed, Color? tertiaryFixedDim, Color? onTertiaryFixed, Color? onTertiaryFixedVariant, Color error = const Color(0xff9b374d), Color onError = Colors.black, Color? errorContainer, Color? onErrorContainer, Color surface = const Color(0xff121212), Color onSurface = Colors.white, Color? surfaceDim, Color? surfaceBright, Color? surfaceContainerLowest, Color? surfaceContainerLow, Color? surfaceContainer, Color? surfaceContainerHigh, Color? surfaceContainerHighest, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? background = const Color(0xff121212), @Deprecated('Use onSurface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? onBackground = Colors.white, @Deprecated('Use surfaceContainerHighest instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? surfaceVariant})
-
Create a high contrast ColorScheme based on the dark
baseline Material 2 color scheme.
const
- ColorScheme.highContrastLight({Brightness brightness = Brightness.light, Color primary = const Color(0xff0000ba), Color onPrimary = Colors.white, Color? primaryContainer, Color? onPrimaryContainer, Color? primaryFixed, Color? primaryFixedDim, Color? onPrimaryFixed, Color? onPrimaryFixedVariant, Color secondary = const Color(0xff66fff9), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? secondaryFixed, Color? secondaryFixedDim, Color? onSecondaryFixed, Color? onSecondaryFixedVariant, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? tertiaryFixed, Color? tertiaryFixedDim, Color? onTertiaryFixed, Color? onTertiaryFixedVariant, Color error = const Color(0xff790000), Color onError = Colors.white, Color? errorContainer, Color? onErrorContainer, Color surface = Colors.white, Color onSurface = Colors.black, Color? surfaceDim, Color? surfaceBright, Color? surfaceContainerLowest, Color? surfaceContainerLow, Color? surfaceContainer, Color? surfaceContainerHigh, Color? surfaceContainerHighest, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? background = Colors.white, @Deprecated('Use onSurface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? onBackground = Colors.black, @Deprecated('Use surfaceContainerHighest instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? surfaceVariant})
-
Create a high contrast ColorScheme based on a purple primary color that
matches the baseline Material 2 color scheme.
const
- ColorScheme.light({Brightness brightness = Brightness.light, Color primary = const Color(0xff6200ee), Color onPrimary = Colors.white, Color? primaryContainer, Color? onPrimaryContainer, Color? primaryFixed, Color? primaryFixedDim, Color? onPrimaryFixed, Color? onPrimaryFixedVariant, Color secondary = const Color(0xff03dac6), Color onSecondary = Colors.black, Color? secondaryContainer, Color? onSecondaryContainer, Color? secondaryFixed, Color? secondaryFixedDim, Color? onSecondaryFixed, Color? onSecondaryFixedVariant, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? tertiaryFixed, Color? tertiaryFixedDim, Color? onTertiaryFixed, Color? onTertiaryFixedVariant, Color error = const Color(0xffb00020), Color onError = Colors.white, Color? errorContainer, Color? onErrorContainer, Color surface = Colors.white, Color onSurface = Colors.black, Color? surfaceDim, Color? surfaceBright, Color? surfaceContainerLowest, Color? surfaceContainerLow, Color? surfaceContainer, Color? surfaceContainerHigh, Color? surfaceContainerHighest, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, @Deprecated('Use surface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? background = Colors.white, @Deprecated('Use onSurface instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? onBackground = Colors.black, @Deprecated('Use surfaceContainerHighest instead. ' 'This feature was deprecated after v3.18.0-0.1.pre.') Color? surfaceVariant})
-
Create a light ColorScheme based on a purple primary color that matches the
baseline Material 2 color scheme.
const
Properties
- background → Color
-
A color that typically appears behind scrollable content.
no setter
- 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.
no setter
- hashCode → int
-
The hash code for this object.
no setteroverride
- inversePrimary → Color
-
An accent color used for displaying a highlight color on inverseSurface
backgrounds, like button text in a SnackBar.
no setter
- 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.
no setter
- onBackground → Color
-
A color that's clearly legible when drawn on background.
no setter
- 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.
no setter
- onInverseSurface → Color
-
A color that's clearly legible when drawn on inverseSurface.
no setter
- 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.
no setter
- onPrimaryFixed → Color
-
A color that is used for text and icons that exist on top of elements having
primaryFixed color.
no setter
- onPrimaryFixedVariant → Color
-
A color that provides a lower-emphasis option for text and icons than
onPrimaryFixed.
no setter
- 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.
no setter
- onSecondaryFixed → Color
-
A color that is used for text and icons that exist on top of elements having
secondaryFixed color.
no setter
- onSecondaryFixedVariant → Color
-
A color that provides a lower-emphasis option for text and icons than
onSecondaryFixed.
no setter
- 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.
no setter
- onTertiary → Color
-
A color that's clearly legible when drawn on tertiary.
no setter
- onTertiaryContainer → Color
-
A color that's clearly legible when drawn on tertiaryContainer.
no setter
- onTertiaryFixed → Color
-
A color that is used for text and icons that exist on top of elements having
tertiaryFixed color.
no setter
- onTertiaryFixedVariant → Color
-
A color that provides a lower-emphasis option for text and icons than
onTertiaryFixed.
no setter
- outline → Color
-
A utility color that creates boundaries and emphasis to improve usability.
no setter
- outlineVariant → Color
-
A utility color that creates boundaries for decorative elements when a
3:1 contrast isn’t required, such as for dividers or decorative elements.
no setter
- 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.
no setter
- primaryFixed → Color
-
A substitute for primaryContainer that's the same color for the dark
and light themes.
no setter
- primaryFixedDim → Color
-
A color used for elements needing more emphasis than primaryFixed.
no setter
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- scrim → Color
-
A color use to paint the scrim around of modal components.
no setter
- 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.
no setter
- secondaryFixed → Color
-
A substitute for secondaryContainer that's the same color for the dark
and light themes.
no setter
- secondaryFixedDim → Color
-
A color used for elements needing more emphasis than secondaryFixed.
no setter
- shadow → Color
-
A color use to paint the drop shadows of elevated components.
no setter
- surface → Color
-
The background color for widgets like Scaffold.
final
- surfaceBright → Color
-
A color that's always the lightest in the dark or light theme.
no setter
- surfaceContainer → Color
-
A recommended color role for a distinct area within the surface.
no setter
- surfaceContainerHigh → Color
-
A surface container color with a darker tone. It is used to create more
emphasis than surfaceContainer but less emphasis than surfaceContainerHighest.
no setter
- surfaceContainerHighest → Color
-
A surface container color with the darkest tone. It is used to create the
most emphasis against the surface.
no setter
- surfaceContainerLow → Color
-
A surface container color with a lighter tone that creates less emphasis
than surfaceContainer but more emphasis than surfaceContainerLowest.
no setter
- surfaceContainerLowest → Color
-
A surface container color with the lightest tone and the least emphasis
relative to the surface.
no setter
- surfaceDim → Color
-
A color that's always darkest in the dark or light theme.
no setter
- surfaceTint → Color
-
A color used as an overlay on a surface color to indicate a component's
elevation.
no setter
- surfaceVariant → Color
-
A color variant of surface that can be used for differentiation against
a component using surface.
no setter
- 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.
no setter
- tertiaryContainer → Color
-
A color used for elements needing less emphasis than tertiary.
no setter
- tertiaryFixed → Color
-
A substitute for tertiaryContainer that's the same color for dark
and light themes.
no setter
- tertiaryFixedDim → Color
-
A color used for elements needing more emphasis than tertiaryFixed.
no setter
Methods
-
copyWith(
{Brightness? brightness, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? primaryFixed, Color? primaryFixedDim, Color? onPrimaryFixed, Color? onPrimaryFixedVariant, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? secondaryFixed, Color? secondaryFixedDim, Color? onSecondaryFixed, Color? onSecondaryFixedVariant, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? tertiaryFixed, Color? tertiaryFixedDim, Color? onTertiaryFixed, Color? onTertiaryFixedVariant, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? surface, Color? onSurface, Color? surfaceDim, Color? surfaceBright, Color? surfaceContainerLowest, Color? surfaceContainerLow, Color? surfaceContainer, Color? surfaceContainerHigh, Color? surfaceContainerHighest, Color? onSurfaceVariant, Color? outline, Color? outlineVariant, Color? shadow, Color? scrim, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? surfaceTint, Color? background, Color? onBackground, Color? surfaceVariant}) → 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 nonexistent 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
-
fromImageProvider(
{required ImageProvider< Object> provider, Brightness brightness = Brightness.light, DynamicSchemeVariant dynamicSchemeVariant = DynamicSchemeVariant.tonalSpot, double contrastLevel = 0.0, Color? primary, Color? onPrimary, Color? primaryContainer, Color? onPrimaryContainer, Color? primaryFixed, Color? primaryFixedDim, Color? onPrimaryFixed, Color? onPrimaryFixedVariant, Color? secondary, Color? onSecondary, Color? secondaryContainer, Color? onSecondaryContainer, Color? secondaryFixed, Color? secondaryFixedDim, Color? onSecondaryFixed, Color? onSecondaryFixedVariant, Color? tertiary, Color? onTertiary, Color? tertiaryContainer, Color? onTertiaryContainer, Color? tertiaryFixed, Color? tertiaryFixedDim, Color? onTertiaryFixed, Color? onTertiaryFixedVariant, Color? error, Color? onError, Color? errorContainer, Color? onErrorContainer, Color? outline, Color? outlineVariant, Color? surface, Color? onSurface, Color? surfaceDim, Color? surfaceBright, Color? surfaceContainerLowest, Color? surfaceContainerLow, Color? surfaceContainer, Color? surfaceContainerHigh, Color? surfaceContainerHighest, Color? onSurfaceVariant, Color? inverseSurface, Color? onInverseSurface, Color? inversePrimary, Color? shadow, Color? scrim, Color? surfaceTint, Color? background, Color? onBackground, Color? surfaceVariant}) → Future<ColorScheme> -
Generate a ColorScheme derived from the given
imageProvider. -
lerp(
ColorScheme a, ColorScheme b, double t) → ColorScheme - Linearly interpolate between two ColorScheme objects.
-
of(
BuildContext context) → ColorScheme - The ThemeData.colorScheme of the ambient Theme.