Form
Multi Select
A multi 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 single selections, consider using a 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 multi-selectUsage
FMultiSelect(...)
1FMultiSelect<String>(2 size: .md,3 style: const .delta(emptyTextStyle: .delta()),4 enabled: true,5 items: const {'Apple': 'apple', 'Banana': 'banana', 'Cherry': 'cherry'},6)FMultiSelect.rich(...)
1FMultiSelect<String>.rich(2 size: .md,3 style: const .delta(emptyTextStyle: .delta()),4 enabled: true,5 format: Text.new,6 children: [7 .item(title: const Text('Apple'), value: 'apple'),8 .item(title: const Text('Banana'), value: 'banana'),9 .section(10 label: const Text('More'),11 items: {'Cherry': 'cherry', 'Date': 'date'},12 ),13 ],14)FMultiSelect.search(...)
1FMultiSelect<String>.search(2 const {'Apple': 'apple', 'Banana': 'banana', 'Cherry': 'cherry'},3 size: .md,4 style: const .delta(emptyTextStyle: .delta()),5 enabled: true,6 filter: (query) =>7 ['apple', 'banana', 'cherry'].where((e) => e.startsWith(query)),8)FMultiSelect.searchBuilder(...)
1FMultiSelect<String>.searchBuilder(2 size: .md,3 style: const .delta(emptyTextStyle: .delta()),4 enabled: true,5 filter: (query) =>6 ['apple', 'banana', 'cherry'].where((e) => e.startsWith(query)),7 format: Text.new,8 contentBuilder: (context, style, values) => [9 for (final value in values) .item(title: Text(value), value: value),10 ],11)