Searchable Dropdown in Flutter: A Complete Guide with Code Example

In mobile applications, dropdown menus are a common UI component that allows users to select from a predefined list of options. However, when dealing with large datasets, finding a specific item in a dropdown can become cumbersome. This is where a searchable dropdown in Flutter becomes an essential feature. A searchable dropdown enhances the user experience by allowing users to quickly filter and select an option by typing in a search field.

Implementing a searchable dropdown in Flutter is simple, thanks to various packages and built-in solutions. Whether you’re fetching data from an API or using a local list, adding search functionality to a dropdown can significantly improve usability. In this guide, we will explore different methods to create a searchable dropdown in Flutter, including the use of packages and custom implementations. We will also provide a working Flutter code example to help you integrate this feature into your application efficiently.

Why Use a Searchable Dropdown in Flutter?

A standard dropdown works well for a limited number of items, but when the list grows longer, users may struggle to find the desired option quickly. A searchable dropdown solves this issue by providing an input field where users can type and filter results dynamically. Here are some key benefits of using a searchable dropdown in Flutter:

• Improved User Experience: Users can quickly find options without excessive scrolling.
• Efficiency: Helps in handling large datasets smoothly.
• Reduced Errors: Minimizes the chances of selecting the wrong option.
• Better Data Representation: Works well with API-based dropdowns that fetch dynamic data.

Now that we understand why searchable dropdowns are important, let’s explore how to implement them in Flutter using different methods.

Method 1: Using dropdown_search Package

One of the easiest ways to create a searchable dropdown in Flutter is by using the dropdown_search package. It provides a built-in search field along with various customization options.

Step 1: Install the Package

First, add the dropdown_search dependency to your pubspec.yaml file:

dependencies:
  dropdown_search: latest_version

Then, run:

flutter pub get

Step 2: Implement the Searchable Dropdown

Now, import the package and use the DropdownSearch widget in your Flutter app:

import 'package:flutter/material.dart';
import 'package:dropdown_search/dropdown_search.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Searchable Dropdown in Flutter")),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: DropdownSearch<String>(
              mode: Mode.MENU,
              showSearchBox: true,
              items: ["Apple", "Banana", "Cherry", "Date", "Elderberry"],
              label: "Select a Fruit",
              onChanged: (value) {
                print("Selected Item: $value");
              },
            ),
          ),
        ),
      ),
    );
  }
}

Explanation

• DropdownSearch<String>: Creates a searchable dropdown.
• showSearchBox: true: Enables the search box.
• items: Defines the list of dropdown items.
• onChanged: Triggers when an item is selected.

Method 2: Creating a Custom Searchable Dropdown

If you prefer a custom implementation without external packages, you can achieve this by combining TextField and DropdownButton. Here’s how you can create a custom searchable dropdown in Flutter:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SearchableDropdownDemo(),
    );
  }
}

class SearchableDropdownDemo extends StatefulWidget {
  @override
  _SearchableDropdownDemoState createState() => _SearchableDropdownDemoState();
}

class _SearchableDropdownDemoState extends State<SearchableDropdownDemo> {
  List<String> items = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
  List<String> filteredItems = [];
  String? selectedItem;

  @override
  void initState() {
    super.initState();
    filteredItems = items;
  }

  void filterSearchResults(String query) {
    setState(() {
      filteredItems = items
          .where((item) => item.toLowerCase().contains(query.toLowerCase()))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Custom Searchable Dropdown")),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(16.0),
            child: TextField(
              onChanged: filterSearchResults,
              decoration: InputDecoration(
                labelText: "Search",
                border: OutlineInputBorder(),
              ),
            ),
          ),
          DropdownButton<String>(
            value: selectedItem,
            hint: Text("Select an Item"),
            isExpanded: true,
            items: filteredItems.map((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (newValue) {
              setState(() {
                selectedItem = newValue;
              });
            },
          ),
        ],
      ),
    );
  }
}

Explanation

• The TextField allows users to type and filter options dynamically.
• The DropdownButton updates its items based on the filtered list.
• The filterSearchResults function filters items as the user types.

Conclusion

Implementing a searchable dropdown in Flutter can greatly enhance user experience, especially when dealing with long lists. Whether you use a third-party package like dropdown_search or create a custom implementation, the key is to provide an intuitive search feature that allows users to find their desired option quickly.

By following this guide, you can easily integrate a searchable dropdown into your Flutter applications. Happy coding!