FlexThemeModeSwitch class Null safety

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, 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
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
hashCode int
The hash code for this object. [...]
@nonVirtual, read-only, inherited
hasTitle bool
To use the widget without any leading title set to false; [...]
final
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. [...]
final, inherited
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.
read-only, inherited
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. [...]
@protected, inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent 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. [...]
@nonVirtual, inherited