The DropdownSuggestionsFormField widget provides a list of suggestions while typing into a TextFormField. The widget can be used with a default or a custom item builder, separator builder and a filter method. The TextFormField and the widgets inside such as the Overlay, the CompositedTransformFollower, the Card, etc can be customized too. When no suggestion are found or the filter method is processing the list of items, the dropdown will show a message that can be customized with a custom message or a custom widget.
Getting Started #
This project is a starting point for a more advanced autocomplete and suggestions widget.
The suggestions can be filtered with a custom filter method. If a custom filter is used there is no need to use the items parameter.
The dropdown is constructed with an Overlay and a CompositedTransformFollower linked to a CompositedTransformTarget that has a TextFormField as a child. The dropdown and the widgets inside can be fully customized.
Dropdown suggestions #
The suggestions are displayed inside a ListView.separated widget. Each item can be fully customized with a ItemBuilder and the separator widgets can be customized too.
A onSelect method is exposed by using a GlobalKey
The TextFormField can be customized using the same parameters that a simple TextFormField widget has including the onChange method. There is a delay between the TextFormField onChanges method, for making less request to the filtering method. The delay between changes can be customized.
A TextEditingController is exposed by using a GlobalKey
A streamBuilder widget is used for showing the suggestion inside a listView. This streamBuilder allows the widget to return a message when there are no results to show or when the stream is waiting for the results. The two possible message can be customized by customizing the text inside or by customizing the widget it self.
[1.0.2] - 2020/02/14
- Example tab modified
[1.0.1] - 2020/02/14
- Code formatted.
- Example tab with the code preview.
[1.0.0] - 2020/02/14
- Fix an interpolation when not needed
- Example added
[0.0.1] - 2020/02/12
- First reviewed release
The DropdownSuggestionsForm field widget provides a list of suggestions while typing into a textFormField.
At the example you can find a widget that call the two widgets, each one are examples of the DropdownSuggestionsFormField widget. One widget example is a simple DropdownSuggestionsFormField and the other one is a more advance implementation that let you see how much this widget can be customized.
Simple example #
The simple example expose the minimum parameter that this widget needs.
Advance example #
The advance example show many of the customization that this widget support. For more customization is recommended to check inspect the widget code in more detail.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies: dropdown_suggestions_form_field: ^1.0.2
2. Install it
You can install packages from the command line:
$ flutter pub get
Alternatively, your editor might support
flutter pub get.
Check the docs for your editor to learn more.
3. Import it
Now in your Dart code, you can use:
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
We analyzed this package on Feb 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.7.1
- pana: 0.13.5
- Flutter: 1.12.13+hotfix.7