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.
themedSystemNavigationBar(BuildContext? context, {bool? useDivider, double opacity = 1, bool noAppBar = false, bool invertStatusIcons = false, FlexSystemNavBarStyle systemNavBarStyle = FlexSystemNavBarStyle.background, Color? systemNavigationBarColor, Color? systemNavigationBarDividerColor, Brightness nullContextBrightness = Brightness.light}) SystemUiOverlayStyle
Returns a SystemUiOverlayStyle that by default has a system navigation bar style that matches the current theme.