Flutter Multi Dropdown 🚀

A highly customizable multi-select dropdown widget for Flutter with select-all functionality, type safety, and comprehensive decoration options.

✨ Features

• Multi-Selection Support - Intuitive interface for selecting multiple items
• Search Functionality - Built-in search to quickly find items in large lists
• Select All Option - Built-in "Select All" functionality with customizable text
• Full UI Control – Customize every part with itemBuilder & selectAllBuilder!
• Disabled Items – Mark items as non-selectable via DropDownMenuItemData.
• Visual Feedback - Clear checkbox indicators for selection state
• Type Safety - Generic implementation works with any data type
• Programmatic Control - Full control via MultiDropdownController
• Customizable UI - Extensive decoration options for complete visual control

📸 Screenshots & Demo

📦 Installation

Add the package to your pubspec.yaml:

dependencies:
  flutter_multi_dropdown: latest

Then run:

flutter pub get

🎮 Basic Usage

import 'package:flutter_multi_dropdown/flutter_multi_dropdown.dart';

// Simple usage with controller
final MultiDropdownController dropdownController = MultiDropdownController();

FlutterMultiDropdown<int>(
  controller: dropdownController,
  items: const [
    DropDownMenuItemData(name: 'Option 1', id: 1),
    DropDownMenuItemData(name: 'Option 2', id: 2),
    DropDownMenuItemData(name: 'Option 3', id: 3),
  ],
  onSelectionChanged: (selectedItems) {
    print('Selected items: $selectedItems');
  },
)

⚙️ Configuration

Widget Properties

Decoration Properties

decoration: DropdownDecoration(
  borderRadius: 10,
  borderColor: Colors.blue,
  checkboxActiveColor: Colors.blueAccent,
  // See all options below
)

🎛️ Controller Methods

// Get current selections
List<int> selected = controller.selectedIds;

// Update selections programmatically
controller.updateSelection([1, 2, 3]);

// Clear all selections
controller.clearSelection();

🎨 Complete Example

final MultiDropdownController fruitsController = MultiDropdownController();

final List<DropDownMenuItemData> fruitsItems = [
    DropDownMenuItemData(name: "Apple", id: 1),
    DropDownMenuItemData(name: "Banana", id: 2),
    DropDownMenuItemData(name: "Orange", id: 3),
    DropDownMenuItemData(name: "Mango", id: 4, isSelected: true),
    DropDownMenuItemData(name: "Grapes", id: 5, enabled: false),
];

 FlutterMultiDropdown(
     items: fruitsItems,
     controller: fruitsController,
     itemBuilder: (context, item, isSelected, onChanged) {
      return InkWell(
        onTap: () => onChanged!(!isSelected),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          child: Row(
            children: [
              Icon(
                isSelected
                    ? Icons.check_circle
                    : Icons.circle_outlined,
                color: isSelected ? Colors.green : Colors.grey[400],
                size: 20,
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Text(
                  item.name,
                  style: TextStyle(
                    color:item.enabled ? Colors.black87 : Colors.grey,
                    fontSize: 15,
                    fontWeight: isSelected
                        ? FontWeight.w500
                        : FontWeight.normal,
                  ),
                ),
              ),
              if (!item.enabled)
                Icon(Icons.lock_outline,size: 16, color: Colors.grey[400]),
            ],
          ),
        ),
      );
    },
    selectAllBuilder: (context, selectAll, onChanged) {
      return InkWell(
        onTap: () => onChanged!(!selectAll),
        child: Container(
          padding: const EdgeInsets.symmetric(
              horizontal: 16, vertical: 12),
          child: Row(
            children: [
              Icon(
                selectAll
                    ? Icons.check_circle
                    : Icons.circle_outlined,
                color: selectAll ? Colors.green : Colors.grey[400],
                size: 20,
              ),
              const SizedBox(width: 12),
              Expanded(
                child: Text(
                  "Select All",
                  style: TextStyle(
                    color: Colors.black87,
                    fontSize: 15,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    },
    onSelectionChanged: (selectedIds) {
      debugPrint("Selected Fruits: $selectedIds");
    },
    decoration: DropdownDecoration(
      backgroundColor: Colors.white,
      borderRadius: 12,
      borderColor: Colors.grey[300]!,
      maxHeight: 250,
    ),
    placeholder: 'Choose fruits...',
),

📜 License

This project is licensed under the MIT License - see the LICENSE file for details.