It is very easy to make Searchable Dropdown in flutter in TextField or TextFormField. Add the following dependency into your pubspec.yml file and click on pub get.
Add searchable dropdown dependency
Run following command in flutter terminal
$ flutter pub add dropdown_search
This will add a following line in your pubspec.yaml file. Or you can add this line without running above command in terminal.
Note: If you get any error like sdk version error then you can try lower version of this dependency from official site.
Import the following package. This package will provide the searchable dropdown element in flutter.
- Searchable dropdown
- Non searchable dropdown
In this above Image you can see the Dropdown data in Searchable format. If I click on input box a dialog box appears like above. When you click on any list item from Dropdown it will goes to the input box.
Here list is static it is fixed. If you want to load the list from server inside this Dropdown. You can set the JSON list by calling an API.
Here I displayed only the name of bank. You can design the single row according to the requirement. It is very easy to create the design in flutter.
After implementing the above dependency use following code directly in your project.
DropdownSearch<String>( //mode of dropdown mode: Mode.DIALOG, //to show search box showSearchBox: true, showSelectedItem: true, //list of dropdown items items: [ "India", "USA", "Brazil", "Canada", "Australia", "Singapore" ], label: "Country", onChanged: print, //show selected item selectedItem: "India", ),
This code shows the result which is shown in above image.
Show search box
You can simply enable or disable the search box. This is boolean type takes true and false only.
- mode: Mode.DIALOG
- mode: Mode.MENU
- mode: Mode.BOTTOM_SHEET
You can change the mode of list which you are showing. This is custom dropdown search also. Similar to searchable list in textfield in flutter. So you can manage this according manually to your requirements.
Change the mode type and you will get different different result in searchable dropdown flutter.
Mode – Mode.DIALOG
This mode create a dialog box of your list which appears when you click on searchable dropdown flutter. This feature in flutter make it easy for user interface to autocomplete the list in dropdown box.
Mode – Mode.MENU
This mode shows the searchable dropdown list in a menu sheet which open below to the searchable box, see in below example-
Mode – Mode.BOTTOM_SHEET
To show the list in bottom sheet use this mode. The item list will appear in bottom sheet. This is also most used mode to show the dropdown items.
You can also visit our news section which shares technical and useful news please visit once.