Flutter Searchable DropDown 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

searchable dropdown flutter
searchable dropdown flutter

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.

searchable dropdown flutter
searchable dropdown flutter

Mode – Mode.MENU

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-

searchable dropdown in flutter menu mode
searchable dropdown in flutter menu mode

Mode – Mode.BOTTOM_SHEET

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.

searchable dropdown bottom sheet in flutter
searchable dropdown bottom sheet in flutter

Please share and do comment if this article is useful to you. If any issue please share in comment section. See more flutter and android tutorials.

You can also visit our news section which shares technical and useful news please visit once.


close

Don’t miss new tips!

We don’t spam! Read our [link]privacy policy[/link] for more info.

Leave a Comment