searchable_paginated_dropdown 0.0.6 icon indicating copy to clipboard operation
searchable_paginated_dropdown: ^0.0.6 copied to clipboard

Flutter searchable dropdown widget which can be used also with paginated requests.

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';

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');
    },
)

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');
        },
    ),
)

License #

License

3
likes
120
pub points
41%
popularity

Publisher

verified publisher iconmdikcinar.dev

Flutter searchable dropdown widget which can be used also with paginated requests.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

async, flutter

More

Packages that depend on searchable_paginated_dropdown