FlexThemeModeSwitch class

A 3-way Light, Dark and System theme-mode switch widget.

Pass in current selected themeMode value and the onThemeModeChanged callback will return the selected theme-mode.

Requires a FlexSchemeData object via flexSchemeData. You should pass it one that has the same value as the one currently used by your FlexColorScheme based theme. Doing so, the option toggle buttons will contain the scheme colors for both the light and dark theme included in the option toggle button for each theme mode.

They scheme colors for each button will be in the order:

| Primary           | Secondary       |
| Primary container | Tertiary        |

In the option button. In the system choice the 2nd column will instead contain the dark mode primary and secondary colors, thus combining both theme mode's color scheme.

All other properties are optional, but it has extensive customization options in order create a theme mode switch widget with a customized look, see API reference for more info.

Inheritance

Constructors

FlexThemeModeSwitch({Key? key, required ThemeMode themeMode, required ValueChanged<ThemeMode> onThemeModeChanged, required FlexSchemeData flexSchemeData, Widget? title, bool hasTitle = true, String labelLight = 'LIGHT', String labelDark = 'DARK', String labelSystem = 'SYSTEM', bool showSystemMode = true, FlexThemeModeButtonOrder buttonOrder = FlexThemeModeButtonOrder.lightDarkSystem, TextStyle? selectedLabelStyle, TextStyle? unselectedLabelStyle, bool labelAbove = true, Color? backgroundLight, Color? backgroundDark, Color? backgroundSystem, BorderSide? selectedBorder, BorderSide? unselectedBorder, double selectedElevation = 0, double unselectedElevation = 0, EdgeInsetsGeometry? optionButtonPadding, EdgeInsetsGeometry? optionButtonMargin, double optionButtonBorderRadius = 5, double height = 24, double width = 24, double borderRadius = 4, EdgeInsetsGeometry? padding, Color? hoverColor, Color? focusColor})
Default constructor.
const

Properties

backgroundDark → Color?
Background color for the dark theme option button.
final
backgroundLight → Color?
Background color for the light theme option button.
final
backgroundSystem → Color?
Background color for the system theme option button.
final
borderRadius → double
The circular borderRadius of an individual scheme color box.
final
buttonOrder → FlexThemeModeButtonOrder
Set the order of the system mode selection buttons.
final
flexSchemeData → FlexSchemeData
The FlexSchemeData used to colorize the four colors in each theme mode option button.
final
focusColor → Color?
The InkWell focus color for the option button.
final
hashCode → int
The hash code for this object.
no setterinherited
hasTitle → bool
To use the widget without any leading title set to false;
final
height → double
The height of an individual scheme color box.
final
hoverColor → Color?
The InkWell hover color for the option buttons.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
labelAbove → bool
Label is positioned above the option button.
final
labelDark → String
Option label for theme mode dark.
final
labelLight → String
Option label for theme mode light.
final
labelSystem → String
Option label for theme mode system.
final
onThemeModeChanged → ValueChanged<ThemeMode>
The new theme mode that was selected using the 3 option buttons.
final
optionButtonBorderRadius → double
The circular borderRadius of the option button.
final
optionButtonMargin → EdgeInsetsGeometry?
The margin inside the option button, before the scheme color boxes.
final
optionButtonPadding → EdgeInsetsGeometry?
Padding around the option button.
final
padding → EdgeInsetsGeometry?
Padding around an individual scheme color box.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectedBorder → BorderSide?
Border side for the selected option state.
final
selectedElevation → double
The elevation of the option button when selected.
final
selectedLabelStyle → TextStyle?
Optional text style for the theme mode selected label.
final
showSystemMode → bool
Include a theme option button for selecting system theme mode.
final
themeMode → ThemeMode
The current themeMode option button to be marked as selected.
final
title → Widget?
A leading title widget for the theme mode switch. Defaults to Text('Theme mode') with style subtitle1, if it is null.
final
unselectedBorder → BorderSide?
Border side for the unselected option state.
final
unselectedElevation → double
The elevation of the option button when unselected.
final
unselectedLabelStyle → TextStyle?
Optional text style for the theme mode unselected label.
final
width → double
The width of an individual scheme color box.
final

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
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
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited