30 Flutter Tips| FT25: Searchable Dropdown In Flutter

Flutter Tips 25 of #30FlutterTips With LakshydeepVikram series which had explored about how to searchable dropdown and select a particular item from it in Flutter.
You can search for #30FlutterTips for more. If you like this series, please don’t forget to share with #30FlutterTips tag.

FT25: Searchable Dropdown In Flutter

Here we are going to implement Searchable Dropdown in Flutter. All we need is:

👉 Install dropdown_button2 package.

dropdown_button2: ^1.7.0

👉 Create a list of String.

final List<String> _list = [
    "Follow",
    "lakshydeep-14",
    "on",
    "Github",
    "Medium",
    "LinkedIn"
  ];

👉 Use DropdownButton2 widget for showing searchable dropdown.
To hide underline from the dropdown, wrap the above widget with DropdownButtonHideUnderline.

 DropdownButtonHideUnderline(
    child: DropdownButton2<String>()
 ),

👉 Use the above list inside DropdownButton2 widget for showing items in dropdown.

items: [
  ..._list.map((e) => DropdownMenuItem(
    child: Text(e),
    value: e,
   ),
 )
],

👉 Use searchController for controlling search.

TextEditingController searchController = TextEditingController();

DropdownButtonHideUnderline(
    child: DropdownButton2<String>(
//...
        searchController: searchController,
//...
)
),

👉 Give a TextField/ TextFormField for searching inside dropdown with the same searchController.

searchInnerWidget: TextFormField( controller: searchController)

👉 For search result on the basis of dropdown list and the text you have searched for.

searchMatchFn: (a, searchValue) {
                  return a.value
                      .toString()
                      .toLowerCase()
                      .contains(searchValue);
                },