Radio

A single choice in a group: selected when value equals groupValue ((o) selected, ( ) not). Enter or Space selects it when focused, as does a click, calling onChanged with this radio’s value. Give every radio in the group the same groupValue and onChanged. Passing null disables it.

See also: RadioGroup for a ready-made group whose arrow keys move the selection.

Learn more: Forms & validation

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

Usage

Radio<String>(
  value: 'fast',
  groupValue: _mode,
  label: 'Fast',
  onChanged: (value) => setState(() => _mode = value),
)

Constructors

Radio()

Parameter	Type	Default	Description
value:	T	required	Value emitted when this radio is activated.
groupValue:	T?	required	Controlled group selection; equality with value selects this radio.
onChanged:	void Function(T value)?	required	Called with value on activation; null disables this radio.
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 this radio requests focus when mounted.
style:	CellStyle?	—	Base styling, plus optional hover, focus, selected, and disabled state entries from CellStyle.interactive.

Source

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

Category: Inputs & controls · All widgets

Live demo

radio_example.dart

Restart Run Expand

Example · editable Revert Format

class _RadioExampleState extends State<_RadioExample> {
  String _mode = 'fast';

  @override
  Widget build(BuildContext context) => Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Radio<String>(
        value: 'fast',
        groupValue: _mode,
        label: 'Fast',
        autofocus: true,
        onChanged: (value) => setState(() => _mode = value),
      ),
      Radio<String>(
        value: 'safe',
        groupValue: _mode,
        label: 'Safe',
        onChanged: (value) => setState(() => _mode = value),
      ),
    ],
  );
}

Live preview

Live · interactive

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