Toggle

A boolean switch: [ o] on, [o ] off (the knob slides). Enter or Space toggles it when focused, as does a click. Like Checkbox, controlled via onChanged. Passing null disables it.

See also: Checkbox for a checklist item · Switch for a setting that should stand out.

Learn more: Forms & validation

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

Usage

Toggle(
  value: _compact,
  label: 'Compact rows',
  onChanged: (value) => setState(() => _compact = value),
)

Constructors

Toggle()

Parameter	Type	Default	Description
value:	bool	required	Controlled on/off state rendered by the toggle.
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 indicator.
focusNode:	FocusNode?	—	Optional externally owned focus node used for activation.
autofocus:	bool	false	Whether the toggle requests focus when mounted.
style:	CellStyle?	—	Base styling, plus optional hover, focus, selected, disabled, and invalid state entries from CellStyle.interactive.

Source

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

Category: Inputs & controls · All widgets

Live demo

toggle_example.dart

Restart Run Expand

Example · editable Revert Format

class _ToggleExampleState extends State<_ToggleExample> {
  bool _compact = true;

  @override
  Widget build(BuildContext context) => Toggle(
    value: _compact,
    label: 'Compact rows',
    autofocus: true,
    onChanged: (value) => setState(() => _compact = value),
  );
}

Live preview

Live · interactive

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