Flutter
Component Status
Up to date
Resources
Examples
OptimusSelectInput<String>(
value: _selectedValue,
isEnabled: true,
leading: const Icon(OptimusIcons.search),
onTextChanged: _onTextChanged,
prefix: Text(prefix),
suffix: Text(suffix),
trailing: Icon(trailing),
showLoader: false,
onChanged: (i) => setState(() {
_selectedValue = i;
if (multiselect) {
if (_selectedValues.contains(i)) {
_selectedValues.remove(i);
} else {
_selectedValues.add(i);
}
}
}),
size: OptimusWidgetSize.large,
label: 'Optimus input field',
placeholder: 'Hint',
items: _characters
.where((e) => e.toLowerCase().contains(_searchToken))
.map(
(e) => ListDropdownTile<String>(
value: e,
title: Text(e),
subtitle: Text(e.toUpperCase()),
isSelected: multiselect ? _selectedValues.contains(e) : null,
),
)
.toList(),
builder: (option) => option,
emptyResultPlaceholder: const Padding(
padding: EdgeInsets.all(spacing100),
child: OptimusLabel(child: Text('No results found')),
),
multiselect: multiselect,
selectedValues: multiselect ? _selectedValues : null,
embeddedSearch: embeddedSearch
? OptimusDropdownEmbeddedSearch(
initialValue: _searchToken,
onTextChanged: _onTextChanged,
placeholder: 'Search',
)
: null,
groupBy: enableGrouping
? (item) => item.split(' ')[1][0].toLowerCase()
: null,
);
API
|
Name |
Description |
|
Default Value |
|---|---|---|---|
|
label |
Label of the input |
String? |
|
|
placeholder |
Placeholder of the input |
String |
empty |
|
value |
Currently selected value |
T? |
|
|
items |
Items to select from |
List<OptimusDropdownTile<T>> |
|
|
builder |
Builder to create a visual representation from each selection item |
ValueBuilder<T> |
|
|
isEnabled |
Whether the component is enabled for the interaction |
bool |
|
|
isRequired |
Whether the selection is required |
bool |
|
|
leading |
Leading icon |
Widget? |
|
|
prefix |
Prefix text |
Widget? |
|
|
trailing |
Trailing icon |
Widget? |
|
|
suffix |
Suffix text |
Widget? |
|
|
caption |
Caption text |
Widget? |
|
|
secondaryCaption |
Helper message |
Widget? |
|
|
error |
Error message |
String? |
|
|
size |
Size of the input |
OptimusWidgetSize |
OptimusWidgetSize.large |
|
onChanged |
Callback on select change |
ValueSetter<T> |
|
|
onTextChanged |
Callback on input text change |
ValueSetter<String>? |
|
|
focusNode |
The focus node of the input |
FocusNode? |
|
|
readOnly |
Whether the input is read-only |
bool |
|
|
showLoader |
Whether the input should show loading animation |
bool |
false |
|
emptyResultyPlaceholder |
Placeholder to show when the search query returns nothing |
Widget? |
|
|
embeddedSearch |
Search that is embedded into the dropdown itself |
OptimusDropdownEmbeddedSearch? |
|
|
groupBy |
The rule for the grouping of the items inside the dropdown |
Grouper<T>? |
|
|
groupBuilder |
Builder for each group |
GroupBuilder? |
|
|
multiselect |
Enables selection of several values at once |
bool |
|
|
selectedValues |
List of selected values |
final List<T>? |
|