Select

A dropdown picker: a focusable trigger showing the current value (or a placeholder) that, when activated, opens a floating list of options anchored just below it.

See also: Autocomplete to type-and-filter many options · MultiSelect for multiple choices.

Learn more: Forms & validation

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

Usage

Select<String>(
  value: _size,
  options: const [
    SelectOption(value: 'low', label: 'Low'),
    SelectOption(value: 'medium', label: 'Medium'),
    SelectOption(value: 'high', label: 'High'),
  ],
  onChanged: (value) => setState(() => _size = value),
)

Details

Enter or Down — or a click — opens it; arrows or pointer hover move the highlight (skipping disabled options), Enter or a click picks one (calling onChanged and closing), Esc closes without changing the value. A bullet marks the currently-selected option as you navigate. Focus is trapped in the open list and returns to the trigger on close.

Controlled: hold value yourself and update it from onChanged. The list floats over other content and moves to stay on screen when there isn’t room below the trigger. Passing null for onChanged disables the picker.

Constructors

Select()

Parameter	Type	Default	Description
options:	List<SelectOption<T>>	required	Choices shown in the opened dropdown.
value:	T?	required	The currently-selected value, or null to show the placeholder.
onChanged:	void Function(T value)?	required	Called when the user picks an enabled option; null disables the picker.
onHighlightChanged:	void Function(T? value)?	—	Called as the highlight moves through the open list, before anything is committed — use it to live-preview the highlighted option, the way theme, font and color pickers show you the choice while you arrow through it. More
placeholder:	String	'Select…'	Text shown when value is null.
focusNode:	FocusNode?	—	Focus node used by the closed trigger.
autofocus:	bool	false	Whether the closed trigger should request focus when mounted.
semanticLabel:	String?	—	Stable label for semantic snapshots. More
style:	CellStyle?	—	Base styling for the closed trigger, plus optional hover, focus, disabled, and invalid state entries from CellStyle.interactive.

• onHighlightChanged: Fires again with the applied value when the list is dismissed without a pick (Esc, click-away), so a preview never outlives the dropdown that drove it. onChanged still reports the commit.
• semanticLabel: The visible collapsed value changes as the user picks options, so pass a label such as “Environment” or “Color” when tests, tools, or agents need to refer to the picker itself.

Source

Select is defined in packages/fleury/lib/src/catalog/select.dart.

Category: Inputs & controls · All widgets

Live demo

select_example.dart

Restart Run Expand

Example · editable Revert Format

class _SelectExampleState extends State<_SelectExample> {
  String _v = 'medium';
  @override
  Widget build(BuildContext context) => Select<String>(
    value: _v,
    onChanged: (v) => setState(() => _v = v),
    options: const <SelectOption<String>>[
      SelectOption(value: 'low', label: 'Low'),
      SelectOption(value: 'medium', label: 'Medium'),
      SelectOption(value: 'high', label: 'High'),
    ],
  );
}

Live preview

Live · interactive

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