Select – Forui (original) (raw)
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.
Preview
Usage
FSelect(...)
FSelect<String>(
controller: FSelectController<String>(vsync: this),
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(
value: 'us',
child: const Text('United States'),
),
FSelectItem(
value: 'ca',
child: const Text('Canada'),
),
],
),
FSelectItem(
value: 'jp',
child: const Text('Japan'),
),
],
);FSelect.fromMap(...)
FSelect<Locale>.fromMap(
{
'United States': Locale('en', 'US'),
'Canada': Locale('en', 'CA'),
'jp': Locale('ja', 'JP'),
},
initialValue: 'ca',
controller: FSelectController<Locale>(vsync: this),
label: const Text('Country'),
description: const Text('Select your country of residence'),
hint: 'Choose a country',
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,
);FSelect.search(...)
FSelect<User>.search(
controller: FSelectController<User>(),
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...',
style: FSelectStyle.inherit(...),
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...'),
);