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    | Primary variant   |
| Secondary  | Secondary variant |

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, String labelLight = 'LIGHT', String labelDark = 'DARK', String labelSystem = 'SYSTEM', bool showSystemMode = true, TextStyle? selectedLabelStyle, TextStyle? unselectedLabelStyle, bool labelAbove = true, Color? backgroundLight, Color? backgroundDark, Color? backgroundSystem, BorderSide? selectedBorder, BorderSide? unselectedBorder, double selectedElevation = 0, double unselectedElevation = 0, EdgeInsets? optionButtonPadding, EdgeInsets? optionButtonMargin, double optionButtonBorderRadius = 5, double height = 24, double width = 24, double borderRadius = 4, EdgeInsets? padding, Color? hoverColor})
Default constructor.
const

Properties

backgroundDark → Color?
Background color for the dark theme option button. If null, defaults to Colors.grey[850].
final
backgroundLight → Color?
Background color for the light theme option button. If null, defaults to Colors.white.
final
backgroundSystem → Color?
Background color for the system theme option button. If null, defaults to Colors.grey[500].
final
borderRadius → double
The circular borderRadius of an individual scheme color box. Defaults to 3 dp.
final
flexSchemeData → FlexSchemeData
The FlexSchemeData used to colorize the four colors in each theme mode option button.
final
hashCode → int
The hash code for this object.
no setterinherited
height → double
The height of an individual scheme color box. Defaults to 24 dp.
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
If true, the label will be above the option button, if false the label will be below the option button. Defaults to true.
final
labelDark → String
Option label for theme mode dark. Defaults to 'DARK', assign null to omit the label.
final
labelLight → String
Option label for theme mode light. Defaults to 'LIGHT', assign null to omit the label.
final
labelSystem → String
Option label for theme mode system. Defaults to 'SYSTEM', assign null to omit the label.
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 Defaults to 5 dp.
final
optionButtonMargin → EdgeInsets?
The margin inside the option button before the scheme color boxes. If null, defaults to const EdgeInsets.all(4).
final
optionButtonPadding → EdgeInsets?
Padding around the option button. If null, defaults to const EdgeInsetsDirectional.only(start: 6).
final
padding → EdgeInsets?
Padding around an individual scheme color box. If null, default to const EdgeInsets.all(3)
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
selectedBorder → BorderSide?
Border side for the selected option state. If null, defaults to BorderSide(color: Theme.of(context).colorScheme.primary, width: 4).
final
selectedElevation → double
The elevation of the option button when selected. Defaults to 0 dp.
final
selectedLabelStyle → TextStyle?
Optional text style for the theme mode selected label. If null, default to Theme.of(context).textTheme.caption).
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. If null, defaults to BorderSide(color: Theme.of(context).dividerColor).
final
unselectedElevation → double
The elevation of the option button when unselected. Defaults to 0 dp.
final
unselectedLabelStyle → TextStyle?
Optional text style for the theme mode unselected label. If null, default to Theme.of(context).textTheme.caption).
final
width → double
The width of an individual scheme color box. Defaults to 24 dp.
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