searchable_paginated_dropdown

Description:

searchable paginated dropdown

This Flutter package helps create a dropdown which constains a search bar inside.
And also provides a feature for compatibility with paginated searchable requests.
Features #

SearchableDropdown for pre setted item list,
SearchableDropdown.paginated for paginated requests.
SearchableDropdown.future for normal requests.
SearchableDropdownFormfield for compatibility with forms.


Getting started #
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';
copied to clipboard
Usage #
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');
},
)
copied to clipboard
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');
},
)
copied to clipboard
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');
},
)
copied to clipboard
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');
},
),
)
copied to clipboard
License #