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 themes using the color scheme 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 setting FlexColorScheme.useSubThemes to true.

By default the sub themes take inspiration from the Material 3 (M3) Design guide specification and uses its values as defaults when it is possible to do so in Flutter SDK theming, within its current Material 2 (M2) design limitations.

The sub-themes can configured further by passing a custom FlexSubThemesData to FlexColorScheme.subThemesData. The main sub theme feature is an easy way to adjust the default corner radius on all sub themes for widgets that supports it. The design is also a bit more flat and features primary tinted hover, focus, highlight and splash colors.

It can be verbose to define nice color scheme directly with the class default constructor. FlexColorScheme is primarily intended to be used with its two factory constructors FlexColorScheme.light and FlexColorScheme.dark, that create nice schemes using defaults and computed color values. The light and dark schemes also give you easy 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. The light and dark factories also provide properties that enables you to create themes with primary color alpha blended surfaces automatically. You can customize all properties with the factories as well, but you usually you don't have to.

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.

FlexColorScheme makes it easier to make a theme where the AppBar themed background color is not tied to primary color in light theme mode or to surface color in dark theme mode, and it can also follow the branded scheme surface or background color.

FlexColorScheme can also 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 tooltip style with tooltipsMatchBackground.

Mixed in types

• Diagnosticable

Annotations

• @immutable

Constructors

FlexColorScheme({ColorScheme? colorScheme, Brightness? brightness, Color? primary, Color? primaryVariant, Color? secondary, Color? secondaryVariant, Color? error, Color? surface, Color? background, Color? scaffoldBackground, Color? dialogBackground, Color? appBarBackground, Color? onPrimary, Color? onSecondary, Color? onSurface, Color? onBackground, Color? onError, FlexTabBarStyle tabBarStyle = FlexTabBarStyle.forAppBar, double appBarElevation = 0, double bottomAppBarElevation = 0, bool tooltipsMatchBackground = false, bool transparentStatusBar = true, VisualDensity? visualDensity, TextTheme? textTheme, TextTheme? primaryTextTheme, String? fontFamily, TargetPlatform? platform, Typography? typography, bool applyElevationOverlayColor = true, bool useSubThemes = false, FlexSubThemesData? subThemesData})

Default constructor that requires brightness and four main color scheme color properties in order to make a fully defined color scheme for a ThemeData object.

const

FlexColorScheme.dark({FlexSchemeColor? colors, FlexScheme? scheme, ColorScheme? colorScheme, int usedColors = 4, @Deprecated('Deprecated in v4.2.0, use surfaceMode and blendLevel instead.') FlexSurface surfaceStyle = FlexSurface.material, FlexSurfaceMode? surfaceMode, int blendLevel = 0, FlexAppBarStyle appBarStyle = FlexAppBarStyle.material, double appBarOpacity = 1, double appBarElevation = 0, double? bottomAppBarElevation, FlexTabBarStyle tabBarStyle = FlexTabBarStyle.forAppBar, Color? primary, Color? primaryVariant, Color? secondary, Color? secondaryVariant, Color? error, Color? surface, Color? background, Color? scaffoldBackground, Color? dialogBackground, Color? appBarBackground, Color? onPrimary, Color? onSecondary, Color? onSurface, Color? onBackground, Color? onError, bool darkIsTrueBlack = false, bool swapColors = false, bool tooltipsMatchBackground = false, bool transparentStatusBar = true, VisualDensity? visualDensity, TextTheme? textTheme, TextTheme? primaryTextTheme, String? fontFamily, TargetPlatform? platform, Typography? typography, bool applyElevationOverlayColor = true, bool useSubThemes = false, FlexSubThemesData? subThemesData})

Creates a FlexColorScheme for dark theme mode.

factory

FlexColorScheme.light({FlexSchemeColor? colors, FlexScheme? scheme, ColorScheme? colorScheme, int usedColors = 4, @Deprecated('Deprecated in v4.2.0, use surfaceMode and blendLevel instead.') FlexSurface surfaceStyle = FlexSurface.material, FlexSurfaceMode? surfaceMode, int blendLevel = 0, FlexAppBarStyle appBarStyle = FlexAppBarStyle.primary, double appBarOpacity = 1, double appBarElevation = 0, double? bottomAppBarElevation, FlexTabBarStyle tabBarStyle = FlexTabBarStyle.forAppBar, Color? primary, Color? primaryVariant, Color? secondary, Color? secondaryVariant, Color? error, Color? surface, Color? background, Color? scaffoldBackground, Color? dialogBackground, Color? appBarBackground, Color? onPrimary, Color? onSecondary, Color? onSurface, Color? onBackground, Color? onError, bool lightIsWhite = false, bool swapColors = false, bool tooltipsMatchBackground = false, bool transparentStatusBar = true, VisualDensity? visualDensity, TextTheme? textTheme, TextTheme? primaryTextTheme, String? fontFamily, TargetPlatform? platform, Typography? typography, bool applyElevationOverlayColor = true, bool useSubThemes = false, FlexSubThemesData? subThemesData})

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 bottom app bar.

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, e.g. for InputDecoration.errorText.

final

fontFamily → String?

Name of the font family to use as default for the theme.

final

hashCode → int

Hashcode override for the FlexColorScheme object.

no setter, override

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

onSecondary → Color?

A color that is clearly legible when drawn on secondary color.

final

onSurface → Color?

A color that is clearly legible when drawn on surface color.

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

primaryTextTheme → TextTheme?

A text theme that contrasts with the primary color.

final

primaryVariant → Color?

A darker version of the primary color.

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

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

secondaryVariant → Color?

A darker version of the secondary color.

final

subThemesData → FlexSubThemesData?

Optional configuration parameters for the opt-in widget sub-themes.

final

surface → Color?

The surface (background) color for widgets like Card and BottomAppBar.

final

tabBarStyle → FlexTabBarStyle

Select preferred style for the default TabBarTheme.

final

textTheme → TextTheme?

Text with a color that contrasts with background, surface, card and canvas colors.

final

tooltipsMatchBackground → bool

When 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

useSubThemes → bool

Set to true to opt in on using additional opinionated widget sub themes.

final

visualDensity → VisualDensity?

The density value for specifying the compactness of various UI components.

final

Methods

copyWith({ColorScheme? colorScheme, Brightness? brightness, Color? primary, Color? primaryVariant, Color? secondary, Color? secondaryVariant, Color? surface, Color? background, Color? error, Color? scaffoldBackground, Color? dialogBackground, Color? appBarBackground, Color? onPrimary, Color? onSecondary, Color? onSurface, Color? onBackground, Color? onError, FlexTabBarStyle? tabBarStyle, double? appBarElevation, double? bottomAppBarElevation, bool? tooltipsMatchBackground, bool? transparentStatusBar, VisualDensity? visualDensity, TextTheme? textTheme, TextTheme? primaryTextTheme, String? fontFamily, TargetPlatform? platform, Typography? typography, bool? applyElevationOverlayColor, bool? useSubThemes, FlexSubThemesData? subThemesData}) → FlexColorScheme

Copy the object with one or more provided properties changed.

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Flutter debug properties override for FlexColorScheme object.

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

Equality operator override for the FlexColorScheme object.

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.

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, Color? nullContextBackground}) → SystemUiOverlayStyle

Returns a SystemUiOverlayStyle that by default has a system navigation bar style that matches the current theme.

Constants

m3TextTheme → const TextTheme

A Material 3 (M3) like and inspired TextTheme for Material 2 (M2).