How to Make a Searchable Dropdown in Flutter

Dropdowns are an essential UI component, but adding a searchable dropdown can greatly enhance the user experience. In this post, we'll implement a custom searchable dropdown using the dropdown_search package in Flutter. This tutorial includes step-by-step instructions, along with reusable code snippets.

Searchable Dropdown in Flutter

Step 1: Add Dependencies:

Start by adding the dropdown_search dependency to your project. Open your pubspec.yaml file and include the following:

 dependencies:  
  dropdown_search: ^6.0.1 # or the latest version

Step 2: Create a Custom Search Dropdown Widget:

To make your dropdown reusable, create a new file named custom_dropdown_search.dart and paste the following code:

 import 'package:dropdown_search/dropdown_search.dart';  
 import 'package:flutter/material.dart';  
 class CustomSearchDropdown extends StatelessWidget {  
  final String? hint;  
  final String? label;  
  final List<String> items;  
  final String? selectedItem;  
  final FormFieldValidator<String>? validator;  
  final ValueChanged<String?>? onChanged;  
  final bool? showSearchBox;  
  final bool? isEnable;  
  final bool? isMandatory;  
  const CustomSearchDropdown({  
   super.key,  
   this.hint,  
   this.label,  
   required this.items,  
   this.selectedItem,  
   this.validator,  
   this.onChanged,  
   this.showSearchBox,  
   this.isEnable,  
   this.isMandatory,  
  });  
  @override  
  Widget build(BuildContext context) {  
   return Column(  
    crossAxisAlignment: CrossAxisAlignment.start,  
    children: [  
     label != null ? Text('$label') : const Offstage(),  
     const SizedBox(  
      height: 8,  
     ),  
     DropdownSearch<String>(  
      items: (string, loadProps) => items,  
      validator: validator,  
      onChanged: onChanged,  
      enabled: isEnable ?? true,  
      selectedItem: selectedItem,  
      autoValidateMode: AutovalidateMode.onUserInteraction,  
      decoratorProps: DropDownDecoratorProps(  
       decoration: InputDecoration(  
        contentPadding: const EdgeInsets.all(8),  
        hintText: hint,  
        filled: true,  
        isDense: true,  
        suffixIcon: const Icon(Icons.arrow_drop_down, size: 15),  
        suffixIconConstraints: const BoxConstraints(maxHeight: 43),  
        fillColor:  
          isEnable == false ? Colors.grey.shade300 : Colors.white,  
        enabledBorder: customBorder(color: const Color(0xff7d7d82)),  
        focusedBorder: customBorder(color: const Color(0xff7d7d82)),  
        disabledBorder: customBorder(color: const Color(0xff7d7d82)),  
        errorBorder: customBorder(color: Colors.red),  
        focusedErrorBorder: customBorder(color: Colors.red),  
        border: customBorder(color: const Color(0xff7d7d82)),  
       ),  
      ),  
      dropdownBuilder: (context, selectedItem) {  
       return Padding(  
        padding: const EdgeInsets.all(6.0),  
        child: selectedItem == null ? const Text('') : Text(selectedItem),  
       );  
      },  
      popupProps: PopupProps.dialog(  
       showSearchBox: showSearchBox ?? false,  
       dialogProps: DialogProps(  
        shape: RoundedRectangleBorder(  
         borderRadius: BorderRadius.circular(14),  
        ),  
       ),  
       searchFieldProps: TextFieldProps(  
        decoration: InputDecoration(  
         filled: true,  
         hintText: "Search",  
         prefixIcon: const Icon(Icons.search, color: Color(0xff707070)),  
         isDense: true,  
         border: OutlineInputBorder(  
          borderRadius: BorderRadius.circular(8),  
          borderSide: const BorderSide(  
           color: Color(0xff707070),  
          ),  
         ),  
        ),  
       ),  
       itemBuilder: (context, item, isenable, isSelected) {  
        return Container(  
         alignment: Alignment.centerLeft,  
         padding:  
           const EdgeInsets.symmetric(horizontal: 12, vertical: 14),  
         child: Text(item),  
        );  
       },  
      ),  
     ),  
    ],  
   );  
  }  
  OutlineInputBorder customBorder({required Color color}) {  
   return OutlineInputBorder(  
    borderRadius: BorderRadius.circular(15.0),  
    borderSide: BorderSide(color: color),  
   );  
  }  
 }

This widget is reusable, supports validation, and includes optional search functionality.

Step 3: Use the Custom Dropdown in a New Screen

Now, create a screen or widget to use the CustomSearchDropdown. For this example, we'll create a new screen named DropdownExampleScreen.

 import 'package:flutter/material.dart';  
 import 'custom_dropdown_search.dart';  
 class DropdownExampleScreen extends StatelessWidget {  
  DropdownExampleScreen({super.key});  
  final List<String> dropdownItems = [  
   "Apple",  
   "Banana",  
   "Cherry",  
   "Date",  
   "Elderberry",  
   "Fig",  
   "Grapes"  
  ];  
  @override  
  Widget build(BuildContext context) {  
   return Scaffold(  
    appBar: AppBar(title: const Text("Searchable Dropdown Example")),  
    body: Padding(  
     padding: const EdgeInsets.all(16.0),  
     child: CustomSearchDropdown(  
      items: dropdownItems,  
      label: "Select Fruit",  
      hint: "Select a Fruit",  
      showSearchBox: true,  
      isMandatory: true,  
      validator: (value) {  
       if (value == null || value.isEmpty) {  
        return "Please select a fruit";  
       }  
       return null;  
      },  
      onChanged: (value) {  
       print("Selected fruit: $value");  
      },  
     ),  
    ),  
   );  
  }  
 }

Step 4: Update Your Home Page

Finally, call the DropdownExampleScreen from your main.dart file or any navigation logic:

 import 'package:flutter/material.dart';  
 import 'dropdown_example_screen.dart';  
 void main() {  
  runApp(const MyApp());  
 }  
 class MyApp extends StatelessWidget {  
  const MyApp({super.key});  
  @override  
  Widget build(BuildContext context) {  
   return MaterialApp(  
    title: 'Flutter Demo',  
    theme: ThemeData(primarySwatch: Colors.blue),  
    home: DropdownExampleScreen(),  
   );  
  }  
 }

Final Output When you run the app, you'll see a clean and responsive dropdown with a search option. Users can select items or filter them using the search bar.

This concludes the tutorial. Feel free to modify the widget and functionality to meet your project requirements! Let me know if you have further questions or need more enhancements. 😊