Form
Select
A select displays a list of drop-down options for the user to pick from. It is a form-field and can therefore be used in a form.
For multi selections, consider using a multi select.
For touch devices, a select tile group or select menu tile is generally recommended over this.
CLI
To generate a specific style for customization:
dart run forui style create selectUsage
FSelect(...)
1FSelect<String>(2 size: .md,3 style: const .delta(emptyTextStyle: .delta()),4 enabled: true,5 contentScrollHandles: true,6 items: const {'Apple': 'apple', 'Banana': 'banana', 'Cherry': 'cherry'},7)FSelect.rich(...)
1FSelect<String>.rich(2 size: .md,3 style: const .delta(emptyTextStyle: .delta()),4 enabled: true,5 contentScrollHandles: true,6 format: (value) => value,7 children: [8 .item(title: const Text('Apple'), value: 'apple'),9 .item(title: const Text('Banana'), value: 'banana'),10 .section(11 label: const Text('More'),12 items: {'Cherry': 'cherry', 'Date': 'date', 'Elderberry': 'elderberry'},13 ),14 ],15)FSelect.search(...)
1FSelect<String>.search(2 size: .md,3 style: const .delta(emptyTextStyle: .delta()),4 enabled: true,5 contentScrollHandles: true,6 filter: (query) =>7 ['apple', 'banana', 'cherry'].where((e) => e.startsWith(query)),8 items: const {'Apple': 'apple', 'Banana': 'banana', 'Cherry': 'cherry'},9)FSelect.searchBuilder(...)
1FSelect<String>.searchBuilder(2 size: .md,3 style: const .delta(emptyTextStyle: .delta()),4 enabled: true,5 contentScrollHandles: true,6 format: (value) => value,7 filter: (query) =>8 ['apple', 'banana', 'cherry'].where((e) => e.startsWith(query)),9 contentBuilder: (context, style, values) => [10 for (final value in values) .item(title: Text(value), value: value),11 ],12)