Searchable Dropdown Flutter With Example

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.

dependencies:
dropdown_search: ^0.6.3

Import the following package. This package will provide the searchable dropdown element in flutter.

import 'package:dropdown_search/dropdown_search.dart';

Types :

Searchable dropdown
Non searchable dropdown

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.

showSearchBox: true,

Modes:

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

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.