RadioGroup

A controlled group of Radios: hold the selected value and update it from onChanged.

See also: Radio to lay out each choice yourself.

Learn more: Forms & validation

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

Usage

RadioGroup<String>(
  value: _mode,
  options: const <RadioOption<String>>[
    RadioOption(value: 'fast', label: 'Fast'),
    RadioOption(value: 'safe', label: 'Safe'),
  ],
  onChanged: (value) => setState(() => _mode = value),
)

Details

The arrow keys move focus and selection together to the adjacent enabled option, wrapping at the ends: Up or Left selects the previous option, and Down or Right the next, in either axis. Each radio is also its own Tab stop, and Enter, Space, or a click selects it.

Constructors

RadioGroup()

Parameter	Type	Default	Description
value:	T?	required	The currently selected value.
onChanged:	void Function(T value)?	required	Called with the new value when the user moves or activates a radio. Passing null disables the whole group.
options:	List<RadioOption<T>>	required	Ordered choices; disabled options remain visible but navigation skips them.
axis:	Axis	Axis.vertical	Whether options are stacked vertically or laid out in one row. All four directional arrows navigate in either layout.
spacing:	int	2	Horizontal gap between options when axis is horizontal.
semanticLabel:	String	'Radio group'	Label exposed for the group through the semantic app graph.
autofocus:	bool	false	Whether the selected enabled radio, or first enabled option, requests initial focus.
style:	CellStyle?	—	Base styling for every radio, plus optional hover, focus, selected, disabled, and invalid state entries from CellStyle.interactive.

Source

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

Category: Inputs & controls · All widgets

Live demo

radiogroup_example.dart

Restart Run Expand

Example · editable Revert Format

class _RadioGroupExampleState extends State<_RadioGroupExample> {
  String _mode = 'fast';

  @override
  Widget build(BuildContext context) => RadioGroup<String>(
    value: _mode,
    autofocus: true,
    options: const <RadioOption<String>>[
      RadioOption(value: 'fast', label: 'Fast'),
      RadioOption(value: 'safe', label: 'Safe'),
      RadioOption(value: 'thorough', label: 'Thorough'),
    ],
    onChanged: (value) => setState(() => _mode = value),
  );
}

Live preview

Live · interactive

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