Form
Autocomplete
An autocomplete provides a list of suggestions based on the user's input and shows typeahead text for the first match. It is a form-field and can therefore be used in a form.
Not a searchable select
An autocomplete is not a searchable select. it is a text-field with suggestions. Values are not limited to one of suggestions, users can type anything. If you need a searchable select, use a searchable select or a searchable multi select
CLI
To generate a specific style for customization:
dart run forui style create autocompleteUsage
FAutocomplete(...)
1FAutocomplete(2 style: const .delta(),3 size: .md,4 enabled: true,5 hint: 'Hint',6 items: const {'Apple': 'Apple', 'Banana': 'Banana', 'Cherry': 'Cherry'},7 format: (suggestion) => suggestion,8 parse: (text) => text,9)FAutocomplete.builder(...)
1FAutocomplete.builder(2 size: .md,3 style: const .delta(),4 enabled: true,5 filter: (query) => [6 'Apple',7 'Banana',8 ].where((item) => item.toLowerCase().startsWith(query.toLowerCase())),9 contentBuilder: (context, query, values) => [10 for (final value in values) .item(value: value),11 ],12 format: (suggestion) => suggestion,13 parse: (text) => text,14)FAutocomplete.text(...)
1FAutocomplete.text(2 style: const .delta(),3 size: .md,4 enabled: true,5 hint: 'Hint',6 items: const ['Apple', 'Banana', 'Cherry'],7)FAutocomplete.textBuilder(...)
1FAutocomplete.textBuilder(2 size: .md,3 style: const .delta(),4 enabled: true,5 filter: (query) => [6 'Apple',7 'Banana',8 ].where((item) => item.toLowerCase().startsWith(query.toLowerCase())),9 contentBuilder: (context, query, values) => [10 for (final value in values) .item(value: value),11 ],12)