SmartSearchableDropdown

A highly customizable dropdown widget for Flutter that supports searching, single-select, and multi-select options.

Features

• Customizable dropdown design (border, colors, padding).
• Supports both single and multi-select modes.
• Search functionality for easy filtering of items.
• Dynamic and adjustable UI properties like height, padding, and label styling.
• Display selected items count, list of selected items, or custom label.

List

List ItemList = [
                {'id': 1, 'name': 'Vishal'},
                {'id': 2, 'name': 'Pragya'},
                {'id': 3, 'name': 'Chotu'},
                {'id': 7, 'name': 'CU'},
                {'id': 4, 'name': 'Pari'},
              ],
 

Preview

1. Menu mode with signle selection

 SmartSearchableDropdown(
              items: ItemList,
              onChanged: (value) {
                print('Selected Value: '+value.toString());
              },
              label: 'Select Name',  
              hideSearch: true ,
              menuHeight: 200,
              menuMode: true, 
              borderRadius: 0, 
              keyValue: 'name',
            ),

2. Menu mode with multi selection

 SmartSearchableDropdown(
              items: ItemList,
              onChanged: (value) {
                print('Selected Value: '+value.toString());
              },
              multiSelect: true,
              label: 'Select Name',  
              hideSearch: true ,
              menuHeight: 200,
              menuMode: true, 
              borderRadius: 0, 
              keyValue: 'name',
            ),

3. Menu mode with Searchable selection

 SmartSearchableDropdown(
              items: ItemList,
              onChanged: (value) {
                print('Selected Value: '+value.toString());
              },
              multiSelect: true,
              label: 'Select Name',  
              hideSearch: false ,
              menuHeight: 200,
              menuMode: true, 
              borderRadius: 0, 
              keyValue: 'name',
            ),

4. Dialog Box mode selection

 SmartSearchableDropdown(
              items: ItemList,
              onChanged: (value) {
                print('Selected Value: '+value.toString());
              },
              multiSelect: true,
              label: 'Select Name',  
              hideSearch: false ,
              menuHeight: 200,
              menuMode: false,  // false this for dialogbox mode 
              showSelectedList: true,
              showLabelInMenu: true,
              showSelectedCount: true,
              borderRadius: 0, 
              keyValue: 'name',
            ),

This is a preview of the SmartSearchableDropdown in action.

Installation

1. Add the following to your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  smart_searchable_dropdown:
   

Hi, I'm Vishal Singh! 👋

Feedback

If you have any feedback, please reach out to us at iamervishalsingh@gmail.com# smart_searchable_dropdown # smart_searchable_dropdown