[Solved] Implementing Flutter Dropdown Search With Example

In this tutorial, we’ll learn how to properly implement Flutter dropdown search. We’ll be going through a proper code example to practically understand how its done.

Introduction: Flutter Dropdown Search

It specifies a Flutter dropdown widget with a search feature. For instance, we’ve a dropdown of countries and we want to search for a specific country, that’s where search in dropdown plays its role. It saves the user alot of time.

Let’s now see how to implement search in Flutter dropdown with a practical Flutter code example.

Implementing Flutter Dropdown Search

We need to follow the below steps in order to implement Flutter dropdown search in our Flutter app.

Step 1: Import Flutter Dropdown Search Package

dropdown_search: ^5.0.3

Import this dropdown package in your project’s pubspec.yaml file dependencies block and run flutter pub get. Click here to get the latest version.

import 'package:dropdown_search/dropdown_search.dart';

Use this line in the screen where you want to use the dropdown search widget.

Step 2: Creating a List of Items

 List countriesList = [
    'Pakistan',
    'Afghanistan',
    'America',
    'China',
    'Indonesia'
  ];

We’ve to pass some items to the dropdown. In our case, we’ve created a list.

Step 3: Storing the Selected Item in a Variable

String itemSelected = '';

We also have to create a variable that will be used to store the selected value. We can do other operations on the stored selected value as well.

Step 4: Flutter Dropdown Search Widget

DropdownSearch<dynamic>(  // we can pass string to it as well but then we've to make
                          // sure that the list of items are string like this List<String>                         
        items: countriesList,

        onChanged: (value) {
          setState(() {
            itemSelected = value.toString();
          });
        },

        selectedItem: itemSelected,
      )

Items constructor takes a list of strings so we’ll pass the above specified list to it.
On changed constructor takes a function which is triggered/called whenever an item is selected/tapped in dropdown. The selected value is passed to it as an argument. In our case, we’ve stored the selected value in our string variable.
Selected item constructor takes a string and its used to show the selected item value in the dropdown button.

We can see that their is no search box in the dropdown. See below code in order to understand how to implement that.

popupProps: PopupProps.menu(
          showSearchBox: true,
        ),

We’ve to use the popup props constructor of dropdown search widget and pass menu method of popup props. After that, passing true to show search box constructor will show search in Flutter dropdown as seen in the above image.

So this is how we can easily implement Flutter dropdown search. Hope you like this post. Do share it with your developer friends.

The complete source code of customized Flutter dropdown search is given in the below section.

Custom Flutter Dropdown Search Source Code

import 'package:dropdown_search/dropdown_search.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  List<String> countriesList = [
    'Pakistan',
    'Afghanistan',
    'America',
    'China',
    'Indonesia'
  ];
  String itemSelected = '';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Padding(
      padding: EdgeInsets.all(20),
      child: DropdownSearch<String>(
        items: countriesList,
        popupProps: PopupProps.menu(
          showSearchBox: true,
        ),
        dropdownButtonProps: DropdownButtonProps(color: Colors.blue,),
        dropdownDecoratorProps: DropDownDecoratorProps(
          textAlignVertical: TextAlignVertical.center,
          dropdownSearchDecoration: InputDecoration(
              border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(50),
          )),
        ),
        onChanged: (value) {
          setState(() {
            itemSelected = value.toString();
          });
        },
        selectedItem: itemSelected,
      ),
    )));
  }
}

Conclusion

To conclude this tutorial, hope now you’ve a complete practical knowledge of how to properly implement Flutter dropdown search. We’d be very happy to have your valuable feedback on this post.

We’d also love to see you visit my other tutorials on Flutter app development. Thank you for reading this article.