Skip to Content
Forui 0.12.0 is released 🎉

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 touch devices, a select tile group or select menu tile is generally recommended over this.

CLI

To generate and customize this style:

dart run forui style create select

Usage

FSelect(...)

FSelect<String>( controller: FSelectController<String>(vsync: this), style: FSelectStyle(...), label: const Text('Country'), description: const Text('Select your country of residence'), hint: 'Choose a country', format: (value) => value.toUpperCase(), onChange: (value) => print('Selected country: $value'), onSaved: (value) => print('Saved country: $value'), style: FSelectStyle.inherit(...), autovalidateMode: AutovalidateMode.onUserInteraction, builder: (context, styles, child) => child!, prefixBuilder: (context, styles, _) => Icon(FIcons.globe), suffixBuilder: (context, styles, _) => Icon(FIcons.arrowDown), popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 400), clearable: true, contentScrollHandles: true, initialValue: 'ca', children: [ FSelectSection( label: const Text('North American Countries'), children: [ FSelectItem.from( child: const Text('United States'), value: 'us', ), FSelectItem( 'Canada' value: 'ca', ), ], ), FSelectItem( 'Japan', value: 'jp', ), ], );

FSelect.fromMap(...)

FSelect<Locale>.fromMap( { 'United States': Locale('en', 'US'), 'Canada': Locale('en', 'CA'), 'Japan': Locale('ja', 'JP'), }, controller: FSelectController<Locale>(vsync: this), style: FSelectStyle.inherit(...), label: const Text('Country'), description: const Text('Select your country of residence'), hint: 'Choose a country', format: (value) => value.toUpperCase(), onChange: (value) => print('Selected country: $value'), onSaved: (value) => print('Saved country: $value'), autovalidateMode: AutovalidateMode.onUserInteraction, builder: (context, styles, child) => child!, prefixBuilder: (context, styles, _) => Icon(FIcons.globe), suffixBuilder: (context, styles, _) => Icon(FIcons.arrowDown), popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 400), clearable: true, contentScrollHandles: true, );

FSelect.search(...)

FSelect<User>.search( controller: FSelectController<User>(), style: FSelectStyle.inherit(...), label: const Text('User'), description: const Text('Search and select a user'), builder: (context, styles, child) => child!, format: (user) => '${user.firstName} ${user.lastName}', hint: 'Search users...', popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 400), clearable: true, autoHide: false, onChange: (value) => print('Selected country: $value'), initialValue: 'value', contentScrollHandles: false, contentPhysics: const BouncingScrollPhysics(), emptyBuilder: (context, style, _) => Text('No results'), filter: (query) async { // Fetch users based on search query return fetchUsers(query); }, contentBuilder: (context, users) => [ for (final user in users) FSelectItem(value: user, child: Text('${user.firstName} ${user.lastName}')), ], searchFieldProperties: FSelectSearchFieldProperties( autofocus: true, hint: 'Type to search...', ), searchLoadingBuilder: (context, style, _) => Text('Loading...'), searchErrorBuilder: (context, error, stackTrace) => Text('Error...'), );

FSelect.searchFromMap(...)

FSelect<User>.searchFromMap( { 'Bob Ross': User(firstName: 'Bob', lastName: 'Ross'), 'John Doe': User(firstName: 'John', lastName: 'Doe'), 'Mary Jane': User(firstName: 'Mary', lastName: 'Jane'), 'Peter Parker': User(firstName: 'Peter', lastName: 'Parker'), }, controller: FSelectController<User>(), style: FSelectStyle.inherit(...), label: const Text('User'), description: const Text('Search and select a user'), builder: (context, styles, child) => child!, format: (user) => '${user.firstName} ${user.lastName}', hint: 'Search users...', popoverConstraints: const FAutoWidthPortalConstraints(maxHeight: 400), clearable: true, autoHide: false, onChange: (value) => print('Selected country: $value'), initialValue: 'value', contentScrollHandles: false, contentPhysics: const BouncingScrollPhysics(), emptyBuilder: (context, style, _) => Text('No results'), filter: (query) async { // Fetch users based on search query return fetchUsers(query); }, contentBuilder: (context, users) => [ for (final user in users) FSelectItem(value: user, child: Text('${user.firstName} ${user.lastName}')), ], searchFieldProperties: FSelectSearchFieldProperties( autofocus: true, hint: 'Type to search...', ), searchLoadingBuilder: (context, style, _) => Text('Loading...'), searchErrorBuilder: (context, error, stackTrace) => Text('Error...'), );

Examples

Sections

Searchable

Sync

Async

Async with Custom Loading

Async with Custom Error Handling

Behavior

Toggleable Items

Clearable

Custom Formatting

With Scroll Handles

Form

Last updated on