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