DropdownMenu — A searchable dropdown: Supercharge your Flutter forms!

- ?? Create Custom Dropdown in Flutter

- Objective: Develop a searchable dropdown in Flutter with personalized style.

- ?? DropdownMenu Implementation

- Prepare a list of items for the dropdown menu, including IDs, labels, and icons.

- Use DropdownMenu widget with attributes like initialSelection, controller, width, hintText, and enableFilter.

- Define DropdownMenuEntry for each menu item, specifying its value and label.

- ?? Understanding DropdownMenuEntry

- It acts as a name tag for menu items, providing identification to the program and clarity to users.

- Assign both a value (secret code) and a label (friendly name) to each DropdownMenuEntry.

- ?? Advantages and Disadvantages

- Pros:

- Built-in feature, no extra packages required.

- Simple to implement and use for basic dropdown menus.

- Offers customization options for style and behavior.

- Suitable for straightforward dropdown needs.

- Cons:

- Limited search capability, only matches beginning of labels.

- Constraints in customization, unable to modify individual items or complex search logic.

- Lacks advanced features like autocomplete or multi-selection.

- ?? Choosing the Right Approach

- For simple dropdowns with basic filtering, utilize built-in DropdownMenu.

- For advanced search, intricate customizations, or additional features, consider employing the dropdown_search package.

- ?? Contact and Support

- Reach out via email for important questions or queries.

- Support the author by purchasing a coffee to fuel their writing passion.

1. Lets prepare a list of items you want to display in the dropdown menu. This could be a list of strings, objects, or widgets.

class MenuItem {
  final int id;
  final String label;
  final IconData icon;

  MenuItem(this.id, this.label, this.icon);
}

List<MenuItem> menuItems = [
  MenuItem(1, 'Home', Icons.home),
  MenuItem(2, 'Profile', Icons.person),
  MenuItem(3, 'Settings', Icons.settings),
  MenuItem(4, 'Favorites', Icons.favorite),
  MenuItem(5, 'Notifications', Icons.notifications)
];        

2. Here’s the code for our searchable DropdownMenu.

DropdownMenu<MenuItem>(
                initialSelection: menuItems.first,
                controller: menuController,
                width: width,
                hintText: "Select Menu",
                requestFocusOnTap: true,
                enableFilter: true,
                label: const Text('Select Menu'),
                onSelected: (MenuItem? menu) {
                  selectedMenu = menu;
                },
                dropdownMenuEntries:
                    menuItems.map<DropdownMenuEntry<MenuItem>>((MenuItem menu) {
                  return DropdownMenuEntry<MenuItem>(
                      value: menu,
                      label: menu.label,
                      leadingIcon: Icon(menu.icon));
                }).toList(),
              ),        

DropdownMenuEntry is like a name tag for each menu item, telling the program who it is and showing the user what it does.

Here is the final cut,

import 'package:flutter/material.dart';

class MenuItem {
  final int id;
  final String label;
  final IconData icon;

  MenuItem(this.id, this.label, this.icon);
}

List<MenuItem> menuItems = [
  MenuItem(1, 'Home', Icons.home),
  MenuItem(2, 'Profile', Icons.person),
  MenuItem(3, 'Settings', Icons.settings),
  MenuItem(4, 'Favorites', Icons.favorite),
  MenuItem(5, 'Notifications', Icons.notifications),
  MenuItem(6, 'Messages', Icons.message),
  MenuItem(7, 'Explore', Icons.explore),
  MenuItem(8, 'Search', Icons.search),
  MenuItem(9, 'Chat', Icons.chat),
  MenuItem(10, 'Calendar', Icons.calendar_today),
];

class DropdownMenuSample extends StatefulWidget {
  const DropdownMenuSample({super.key});

  @override
  State<DropdownMenuSample> createState() => _DropdownMenuSampleState();
}

class _DropdownMenuSampleState extends State<DropdownMenuSample> {
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width - 16.0;
    final TextEditingController menuController = TextEditingController();
    MenuItem? selectedMenu;

    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: const Text(
            'DropdownMenu',
          ),
          backgroundColor: Colors.lightBlueAccent,
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              const SizedBox(
                height: 50.0,
              ),
              DropdownMenu<MenuItem>(
                //initialSelection: menuItems.first,
                controller: menuController,
                width: width,
                hintText: "Select Menu",
                requestFocusOnTap: true,
                enableFilter: true,
                menuStyle: MenuStyle(
                  backgroundColor: MaterialStateProperty.all<Color>(
                      Colors.lightBlue.shade50),
                ),

                label: const Text('Select Menu'),
                onSelected: (MenuItem? menu) {
                  setState(() {
                    selectedMenu = menu;
                  });
                },
                dropdownMenuEntries:
                    menuItems.map<DropdownMenuEntry<MenuItem>>((MenuItem menu) {
                  return DropdownMenuEntry<MenuItem>(
                      value: menu,
                      label: menu.label,
                      leadingIcon: Icon(menu.icon));
                }).toList(),
              ),
            ],
          ),
        ));
  }
}