FlexKeyColors class

Immutable data class that configures if and how FlexColorScheme uses key colors to populate the Material 3 ColorScheme it creates and uses to generate its ThemeData object.

For more information on Material 3 color system and usage of key colors to generate tonal palettes and tones, see: https://m3.material.io/styles/color/the-color-system/key-colors-tones

A key based ColorScheme will be generated if a FlexKeyColors instance is passed to FlexColorScheme.light or FlexColorScheme.dark parameter keyColorSetup with useKeyColors set to true, in its FlexKeyColors configuration input.

By default keyColorSetup is null and key colors are not used. To activate the feature pass you can in a default FlexKeyColors instance, its useKeyColors defaults to true.

The default constructor creates a setup that creates a seeded generated ColorScheme for the active FlexColorScheme using its current primary color as key in a ColorScheme.fromSeed If the default setup is suitable, no further configuration is required. You can however further customize its behavior by adjusting the properties in FlexKeyColors.

Flutter standard ColorScheme only offers color scheme creation from one single input color using ColorScheme.fromSeed. With FlexColorScheme you can use its effective color value for primary, secondary and tertiary colors to generate the seeded TonalPalette for primary, secondary and tertiary colors in the ColorScheme, by using these as input colors. To do so also set properties useSecondary and useTertiary to true. You will then get tonal palette's for secondary and tertiary colors that depend on these key colors and not on only the primary color.

If you use factory FlexColorScheme.light and FlexColorScheme.scheme, to use a built in color scheme set, then the primary, secondary and tertiary colors for the associated FlexScheme enum will be used as key colors for those color categories in the resulting ColorScheme.

When using FlexColorScheme.dark and FlexColorScheme.scheme, the same colors from the light theme color definitions will be used as key color inputs to generate the tonal palettes for dark mode ColorScheme. This is because the light and dark theme mode colors should use the same TonalPalette, and only use different in M3 guide standardized tones from the same TonalPalette. Hence the same base color is used to generate the tonal palette for both light and dark theme to adhere to this design principle.

If you use FlexColorScheme.colors in the factories light and dark, or direct color property inputs, or a custom FlexColorScheme.colorScheme as input, and combine them with key color usage via the useKeyColors flag, then it is possible to use different key color inputs for light and dark mode, as the provided effective colors are used as direct inputs to the seeding. It is then up to you, the designer to create harmonious designs. If you want to get the Material 3 intended design when using custom FlexColorScheme based key color inputs, then use the same color value as input for primary, secondary and tertiary colors for both dark and light mode FlexColorScheme based themes, when making themes with useKeyColors enabled.

The neutral tonal palette and its variant are used as inputs to ColorScheme colors in the same way as in ColorScheme.fromSeed and are produced with a slight hint of primary key color in them using same algorithm as ColorScheme.fromSeed too. This color branding is a bit equivalent to using primary color alpha surface blends, or so called primary color branding in FlexColorScheme. The surface mode and blend levels can even be combined with M3 based key color branding, for a bit different and stronger effects from key color generated themes too.

To completely customize how the tonal palettes for the seed generated ColorScheme are produced from key colors, and which tones from the generated tonal palettes are used by which color in the ColorScheme, please see FlexTones. With FlexTones you can completely customize the tonal palette generation and tone usage in produced ColorScheme.

Mixed in types
Annotations

Constructors

FlexKeyColors({bool useKeyColors = true, bool useSecondary = false, bool useTertiary = false, bool keepPrimary = false, bool keepSecondary = false, bool keepTertiary = false, bool keepPrimaryContainer = false, bool keepSecondaryContainer = false, bool keepTertiaryContainer = false})
Used to configure how key colors are used when generating a key color seeded ColorScheme for FlexColorScheme,
const

Properties

hashCode int
Override for hashcode, dart.ui Jenkins based.
no setteroverride
keepPrimary bool
When using useKeyColors, set keepPrimary to true, to keep the resulting ColorScheme.primary color as defined by effective FlexColorScheme.primary input key color, while still letting all other colors derived from input primary key to be based on colors seeded from it.
final
keepPrimaryContainer bool
When using useKeyColors, set keepPrimaryContainer to true, to keep the resulting ColorScheme.primaryContainer color as defined by effective FlexColorScheme.primaryContainer input key color, while still letting all other colors derived from input primary key to be based on colors seeded from it.
final
keepSecondary bool
When using useKeyColors, set keepSecondary to true, to keep the resulting ColorScheme.secondary color as defined by effective FlexColorScheme.secondary input key color, while still letting all other colors derived from input primary key to be based on colors seeded from it.
final
keepSecondaryContainer bool
When using useKeyColors, set keepSecondaryContainer to true, to keep the resulting ColorScheme.secondaryContainer color as defined by effective FlexColorScheme.secondaryContainer input key color, while still letting all other colors derived from input secondary key to be based on colors seeded from it.
final
keepTertiary bool
When using useKeyColors, set keepTertiary to true, to keep the resulting ColorScheme.tertiary color as defined by effective FlexColorScheme.tertiary input key color, while still letting all other colors derived from input primary key to be based on colors seeded from it.
final
keepTertiaryContainer bool
When using useKeyColors, set keepTertiaryContainer to true, to keep the resulting ColorScheme.tertiaryContainer color as defined by effective FlexColorScheme.tertiaryContainer input key color, while still letting all other colors derived from input tertiary key to be based on colors seeded from it.
final
runtimeType Type
A representation of the runtime type of the object.
no setterinherited
useKeyColors bool
Turn on using Material 3 key color based TonalPalette colors for the resulting ColorScheme produced by FlexColorScheme.toScheme that is also consumed by FlexColorScheme.toTheme when it generates its ThemeData object.
final
useSecondary bool
Use effective FlexColorScheme.secondary color as key generation input color for all ColorScheme secondary colors.
final
useTertiary bool
Use effective FlexColorScheme.tertiary color as key generation input color for all ColorScheme secondary colors.
final

Methods

copyWith({bool? useKeyColors, bool? useSecondary, bool? useTertiary, bool? keepPrimary, bool? keepSecondary, bool? keepTertiary, bool? keepPrimaryContainer, bool? keepSecondaryContainer, bool? keepTertiaryContainer}) FlexKeyColors
Copy the object with one or more provided properties changed.
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Flutter debug properties override, includes toString.
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
Override the equality operator.
override