FlexColorScheme class
Make beautiful Flutter themes using pre-designed color schemes or custom colors. Get the resulting ThemeData with the toTheme method.
Flutter's ThemeData.from is a good starting point for ColorScheme based themes. It has a some gaps leaving some properties in the theme to their defaults from the standard ThemeData factory constructor, those default values will end up not matching the used ColorScheme, especially in dark mode themes. FlexColorScheme fixes these gaps and makes it much easier to create consistent themes using the ColorScheme concept.
You can create the theme using a standard ColorScheme, but you can also create a theme by just providing a few selected color values, or no color values at all and get defaults. If you provide both a ColorScheme and some individual property values that also exist in a ColorScheme, the individual property values will override the corresponding ones in your ColorScheme.
FlexColorScheme does not rely on ThemeData.from a ColorScheme for its implementation. It uses the ThemeData factory directly to create the ThemeData object from its FlexColorScheme data, that is then returned with the FlexColorScheme.toTheme getter.
A more opinionated theme and style can be returned by passing in a default FlexSubThemesData constructor to subThemesData. By default the sub-themes take inspiration from the Material 3 (M3) Design guide specification and uses many f its values as defaults when it is possible to do so in Flutter SDK theming, within any remaining Material 2 (M2) design limitations.
The component sub-themes can be configured further by configuring a large amount of properties in FlexSubThemesData that is passed into FlexColorScheme.subThemesData. A commonly used feature is to adjust the default corner border radius on all sub-themes for widgets that supports it. The opinionated design is also more flat and features primary tinted hover, focus, highlight and splash colors, among other things.
It can be verbose to define nice themes directly with the default unnamed constructor. FlexColorScheme is primarily intended to be used with its two factory constructors FlexColorScheme.light and FlexColorScheme.dark, that create nice themes using defaults and computed color values. The light and dark factories also give you access to many predefined color schemes that you can use and easily modify.
With the light and dark factories you can also create beautiful toned themes from just a single color. Additionally FlexColorScheme makes it easy to create themes that use color branded surfaces (backgrounds), that use alpha blend to mix in a varying degree of a color, typically the primary color, into surfaces and backgrounds.
Branded surface are described in the Material design guide, but Flutter offers no out of the box help to make such themes. With FlexColorScheme you can use a varying degree of surface and background branding levels for any theme you make, both in light and dark mode. When you use Material 3 color system matching ColorScheme its surface colors also include a hint of the primary color in surfaces and background. This is called surface tint in the Material 3 design guide. The name may be different and the algorithm to generate the colors is also much more refined, but the design idea is the same. With the factory constructors FlexColorScheme.light and FlexColorScheme.dark you can also use the Material 3 color system and its tools to generate ColorScheme for it. The factories also provide more advanced and flexible key color generated ColorScheme's, than what is offered in Flutter SDK via ColorScheme.fromSeed.
FlexColorScheme makes it easy to adjust the AppBar's themed background also to surface, background and scaffold background colors that also use the same tint as these themed colors.
FlexColorScheme can automatically adjust the TabBarTheme to fit with the active AppBar background or to be themed to always fit on background/surface colors, if its primary usage will be in e.g. a Scaffold body, or Material surface or canvas.
You can also quickly adjust things like the scrim on the app bar in Android with transparentStatusBar and a quick tooltip style adjustment with tooltipsMatchBackground.
- Mixed in types
- Annotations
Constructors
-
FlexColorScheme({ColorScheme? colorScheme, Brightness? brightness, Color? primary, Color? primaryContainer, Color? secondary, Color? secondaryContainer, Color? tertiary, Color? tertiaryContainer, Color? error, Color? surface, Color? background, Color? scaffoldBackground, Color? dialogBackground, Color? appBarBackground, Color? onPrimary, Color? onPrimaryContainer, Color? onSecondary, Color? onSecondaryContainer, Color? onTertiary, Color? onTertiaryContainer, Color? onSurface, Color? onBackground, Color? onError, Color? surfaceTint, FlexTabBarStyle? tabBarStyle, double? appBarElevation, double? bottomAppBarElevation, bool tooltipsMatchBackground = false, bool transparentStatusBar = true, VisualDensity? visualDensity, TextTheme? textTheme, TextTheme? primaryTextTheme, String? fontFamily, List<
String> ? fontFamilyFallback, String? package, MaterialTapTargetSize? materialTapTargetSize, PageTransitionsTheme? pageTransitionsTheme, InteractiveInkFeatureFactory? splashFactory, TargetPlatform? platform, Typography? typography, bool applyElevationOverlayColor = true, FlexSubThemesData? subThemesData, bool useMaterial3 = false, Iterable<ThemeExtension> ? extensions}) -
Default constructor with no required properties.
const
-
FlexColorScheme.dark({FlexSchemeColor? colors, FlexScheme? scheme, ColorScheme? colorScheme, int usedColors = 6, FlexSurfaceMode? surfaceMode, int blendLevel = 0, FlexAppBarStyle? appBarStyle, double? appBarOpacity, bool transparentStatusBar = true, double? appBarElevation, double? bottomAppBarElevation, FlexTabBarStyle? tabBarStyle, Color? primary, Color? primaryContainer, Color? secondary, Color? secondaryContainer, Color? tertiary, Color? tertiaryContainer, Color? error, Color? surface, Color? background, Color? scaffoldBackground, Color? dialogBackground, Color? appBarBackground, Color? onPrimary, Color? onPrimaryContainer, Color? onSecondary, Color? onSecondaryContainer, Color? onTertiary, Color? onTertiaryContainer, Color? onSurface, Color? onBackground, Color? onError, Color? surfaceTint, bool darkIsTrueBlack = false, bool swapColors = false, bool tooltipsMatchBackground = false, FlexSubThemesData? subThemesData, FlexKeyColors? keyColors, bool useMaterial3ErrorColors = false, FlexTones? tones, VisualDensity? visualDensity, TextTheme? textTheme, TextTheme? primaryTextTheme, String? fontFamily, List<
String> ? fontFamilyFallback, String? package, MaterialTapTargetSize? materialTapTargetSize, PageTransitionsTheme? pageTransitionsTheme, InteractiveInkFeatureFactory? splashFactory, TargetPlatform? platform, Typography? typography, bool applyElevationOverlayColor = true, bool useMaterial3 = false, bool swapLegacyOnMaterial3 = false, Iterable<ThemeExtension> ? extensions}) -
Creates a FlexColorScheme for dark theme mode.
factory
-
FlexColorScheme.light({FlexSchemeColor? colors, FlexScheme? scheme, ColorScheme? colorScheme, int usedColors = 6, FlexSurfaceMode? surfaceMode, int blendLevel = 0, FlexAppBarStyle? appBarStyle, double? appBarOpacity, bool transparentStatusBar = true, double? appBarElevation, double? bottomAppBarElevation, FlexTabBarStyle? tabBarStyle, Color? primary, Color? primaryContainer, Color? secondary, Color? secondaryContainer, Color? tertiary, Color? tertiaryContainer, Color? error, Color? surface, Color? background, Color? scaffoldBackground, Color? dialogBackground, Color? appBarBackground, Color? onPrimary, Color? onPrimaryContainer, Color? onSecondary, Color? onSecondaryContainer, Color? onTertiary, Color? onTertiaryContainer, Color? onSurface, Color? onBackground, Color? onError, Color? surfaceTint, bool lightIsWhite = false, bool swapColors = false, bool tooltipsMatchBackground = false, FlexSubThemesData? subThemesData, FlexKeyColors? keyColors, bool useMaterial3ErrorColors = false, FlexTones? tones, VisualDensity? visualDensity, TextTheme? textTheme, TextTheme? primaryTextTheme, String? fontFamily, List<
String> ? fontFamilyFallback, String? package, MaterialTapTargetSize? materialTapTargetSize, PageTransitionsTheme? pageTransitionsTheme, InteractiveInkFeatureFactory? splashFactory, TargetPlatform? platform, Typography? typography, bool applyElevationOverlayColor = true, bool useMaterial3 = false, bool swapLegacyOnMaterial3 = false, Iterable<ThemeExtension> ? extensions}) -
Creates a FlexColorScheme for light theme mode.
factory
Properties
- appBarBackground → Color?
-
Background theme color for the AppBar.
final
- appBarElevation → double?
-
The themed elevation for the AppBar.
final
- applyElevationOverlayColor → bool
-
Apply a semi-transparent overlay color on Material surfaces to indicate
elevation for dark themes.
final
- background → Color?
-
A color that typically appears behind scrollable content.
final
- bottomAppBarElevation → double?
-
The themed elevation for the BottomAppBar.
final
- brightness → Brightness?
-
The overall brightness of this color scheme.
final
- colorScheme → ColorScheme?
-
The overall ColorScheme based colors for the theme.
final
- dialogBackground → Color?
-
The background color of Dialog elements.
final
- error → Color?
-
The color to use for input validation errors, for example on
InputDecoration.errorText.
final
-
extensions
→ Iterable<
ThemeExtension> ? -
Arbitrary additions to this theme.
final
- fontFamily → String?
-
Name of the font family to use as default font for the text theme in
created theme.
final
-
fontFamilyFallback
→ List<
String> ? -
Name of the font families to use as fallback to main font family.
final
- hashCode → int
-
Override for hashcode, dart.ui Jenkins based.
no setteroverride
- materialTapTargetSize → MaterialTapTargetSize?
-
Configures the hit test size of certain Material widgets.
final
- onBackground → Color?
-
A color that is clearly legible when drawn on background color.
final
- onError → Color?
-
A color that is clearly legible when drawn on error color.
final
- onPrimary → Color?
-
A color that is clearly legible when drawn on primary color.
final
- onPrimaryContainer → Color?
-
A color that's clearly legible when drawn on primaryContainer.
final
- onSecondary → Color?
-
A color that is clearly legible when drawn on secondary color.
final
- onSecondaryContainer → Color?
-
A color that's clearly legible when drawn on secondaryContainer.
final
- onSurface → Color?
-
A color that is clearly legible when drawn on surface color.
final
- onTertiary → Color?
-
A color that's clearly legible when drawn on tertiary.
final
- onTertiaryContainer → Color?
-
A color that's clearly legible when drawn on tertiaryContainer.
final
- package → String?
-
Name of the font package to use with font fallback.
final
- pageTransitionsTheme → PageTransitionsTheme?
-
Default MaterialPageRoute transitions per TargetPlatform.
final
- platform → TargetPlatform?
-
The platform adaptive widgets should adapt to target and mechanics too.
final
- primary → Color?
-
The color displayed most frequently across your application’s screens and
components.
final
- primaryContainer → Color?
-
A color used for elements needing less emphasis than primary.
final
- primaryTextTheme → TextTheme?
-
A text theme that contrasts with the primary color.
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- scaffoldBackground → Color?
-
The color of the Scaffold background.
final
- secondary → Color?
-
An accent color that, when used sparingly, calls attention to parts
of your application.
final
- secondaryContainer → Color?
-
A color used for elements needing less emphasis than secondary.
final
- splashFactory → InteractiveInkFeatureFactory?
-
Defines the appearance of ink splashes produces by InkWell
and InkResponse.
final
- subThemesData → FlexSubThemesData?
-
Activate using FlexColorScheme opinionated component sub-themes by
passing in a default
FlexSubThemesData()
.final - surface → Color?
-
The surface (background) color for widgets like Card and
BottomAppBar.
final
- surfaceTint → Color?
-
A custom color used as an overlay on a surface color to indicate a
component's elevation and surface color branding or tinting.
final
- tabBarStyle → FlexTabBarStyle?
-
Select preferred style for the default TabBarTheme.
final
- 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.
final
- tertiaryContainer → Color?
-
A color used for elements needing less emphasis than tertiary.
final
- textTheme → TextTheme?
-
Text with a color that contrasts with background, surface, card and
canvas colors.
final
- tooltipsMatchBackground → bool
-
When set to true, tooltip background color will match the brightness of
the theme's background color.
final
- toScheme → ColorScheme
-
Returns the effective ColorScheme defined by your FlexColorScheme.
no setter
- toTheme → ThemeData
-
Returns the ThemeData object defined by FlexColorScheme properties
and its theming logic.
no setter
- transparentStatusBar → bool
-
When
true
, the status bar on Android will be the same color as the rest of the AppBar.final - typography → Typography?
-
The color and geometry TextTheme values used to configure textTheme.
final
- useMaterial3 → bool
-
A temporary flag used to opt-in to new SDK Material 3 features.
final
- visualDensity → VisualDensity?
-
The density value for specifying the compactness of various UI components.
final
Methods
-
copyWith(
{ColorScheme? colorScheme, Brightness? brightness, Color? primary, Color? primaryContainer, Color? secondary, Color? secondaryContainer, Color? tertiary, Color? tertiaryContainer, Color? error, Color? surface, Color? background, Color? scaffoldBackground, Color? dialogBackground, Color? appBarBackground, Color? onPrimary, Color? onPrimaryContainer, Color? onSecondary, Color? onSecondaryContainer, Color? onTertiary, Color? onTertiaryContainer, Color? onSurface, Color? onBackground, Color? onError, Color? surfaceTint, FlexTabBarStyle? tabBarStyle, double? appBarElevation, double? bottomAppBarElevation, bool? tooltipsMatchBackground, bool? transparentStatusBar, VisualDensity? visualDensity, TextTheme? textTheme, TextTheme? primaryTextTheme, String? fontFamily, List< String> ? fontFamilyFallback, String? package, MaterialTapTargetSize? materialTapTargetSize, PageTransitionsTheme? pageTransitionsTheme, TargetPlatform? platform, Typography? typography, bool? applyElevationOverlayColor, FlexSubThemesData? subThemesData, bool? useMaterial3, Iterable<ThemeExtension> ? extensions}) → FlexColorScheme - 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
Static Properties
- comfortablePlatformDensity → VisualDensity
-
Returns a VisualDensity that is defaultTargetPlatform adaptive to
VisualDensity.comfortable instead of to VisualDensity.compact.
no setter
Static Methods
-
createPrimarySwatch(
Color? color) → MaterialColor -
Create a primary Material color swatch from a given
color
. -
defaultComfortablePlatformDensity(
TargetPlatform platform) → VisualDensity -
Returns a VisualDensity that is adaptive based on the given
platform
. - Returns a SystemUiOverlayStyle that by default has a system navigation bar style that matches the current theme.