Switch

A wider, accent-tinted boolean switch — visually distinct from Toggle for cases where you want the on/off state to stand out at a glance (settings panels, feature flags). When value: true the track tints in the theme’s primary color and the handle sits on the right; when false the track is muted and the handle sits on the left.

See also: Toggle for a compact on/off switch · Checkbox for a checklist item.

Learn more: Forms & validation

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Switch(
  value: _streaming,
  label: 'Streaming updates',
  onChanged: (value) => setState(() => _streaming = value),
)

Details

Off: [●━━━], On (colored): [━━━●]. Enter or Space toggles it when focused, as does a click. Passing null for onChanged disables the switch.

Constructors

Switch()

Parameter	Type	Default	Description
value:	bool	required	Controlled on/off state that positions and colors the switch handle.
onChanged:	void Function(bool value)?	required	Called with the requested next state on activation; null disables it.
label:	String?	—	Optional visible text and semantic label beside the track.
focusNode:	FocusNode?	—	Optional externally owned focus node used for activation.
autofocus:	bool	false	Whether the switch requests focus when mounted.
style:	CellStyle?	—	Base styling, plus optional hover, focus, selected, disabled, and invalid state entries from CellStyle.interactive.

Source

Switch is defined in packages/fleury/lib/src/catalog/controls.dart.

Category: Inputs & controls · All widgets

Live demo

switch_example.dart

Restart Run Expand

Example · editable Revert Format

class _SwitchExampleState extends State<_SwitchExample> {
  bool _streaming = false;

  @override
  Widget build(BuildContext context) => Switch(
    value: _streaming,
    label: 'Streaming updates',
    autofocus: true,
    onChanged: (value) => setState(() => _streaming = value),
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand