This Flutter package helps create a dropdown which constains a search bar inside. And also provides a feature for compatibility with paginated searchable requests.
- SearchableDropdown for pre setted item list,
- SearchableDropdown.paginated for paginated requests.
- SearchableDropdown.future for normal requests.
- SearchableDropdownFormfield for compatibility with forms.
To use this package, add searchable_dropdown as a dependency in your [pubspec.yaml] file. And add this import to your file.
import 'package:searchable_dropdown/searchable_dropdown.dart';Pre setted item list example
SearchableDropdown<int>(
hintText: const Text('List of items'),
margin: const EdgeInsets.all(15),
items: List.generate(10, (i) => SearchableDropdownMenuItem(value: i, label: 'item $i', child: Text('item $i'))),
onChanged: (int? value) {
debugPrint('$value');
},
)Paginated request example
- requestItemCount: Paginated request item count which returns in one page, this value is using for knowledge about isDropdown has more item or not.
SearchableDropdown<int>.paginated(
hintText: const Text('Paginated request'),
margin: const EdgeInsets.all(15),
paginatedRequest: (int page, String? searchKey) async {
final paginatedList = await getAnimeList(page: page, key: searchKey);
return paginatedList?.animeList
?.map((e) => SearchableDropdownMenuItem(value: e.malId, label: e.title ?? '', child: Text(e.title ?? '')))
.toList();
},
requestItemCount: 25,
onChanged: (int? value) {
debugPrint('$value');
},
)Future request example
SearchableDropdown<int>.future(
hintText: const Text('Future request'),
margin: const EdgeInsets.all(15),
futureRequest: () async {
final paginatedList = await getAnimeList(page: 1, key: '');
return paginatedList?.animeList
?.map((e) => SearchableDropdownMenuItem(value: e.malId, label: e.title ?? '', child: Text(e.title ?? '')))
.toList();
},
onChanged: (int? value) {
debugPrint('$value');
},
)Example of usage inside a form.
- backgroundDecoration: Background decoration of dropdown, i.e. with this you can wrap dropdown with Card
Form(
key: formKey,
child: SearchableDropdownFormField<int>(
backgroundDecoration: (child) => Card(
margin: EdgeInsets.zero,
color: Colors.red,
elevation: 3,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: child,
),
),
hintText: const Text('Search Anime'),
margin: const EdgeInsets.all(15),
items: List.generate(10, (i) => SearchableDropdownMenuItem(value: i, label: 'item $i', child: Text('item $i'))),
validator: (val) {
if (val == null) return 'Cant be empty';
return null;
},
onSaved: (val) {
debugPrint('On save: $val');
},
),
)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent