M3E Dropdown Menu #

A comprehensive Flutter package providing an expressive, Material 3 dropdown menu with spring physics and extensive customization options. It offers single and multi-selection, fuzzy search, async loading, and animated chip tags—all featuring expressive M3 styling and neighbour animations.

It automatically calculates and draws the corners to fit exactly the Material 3 Expressive spec for interactive elements. It provides deep control over styling, custom haptic feedback, and highly tunable spring stiffness and damping for animations.

🚀 Features #

• Dynamic border radius: Fluid transitions between field states with animated borders.
• Rich Interaction: Spring-driven physics for expanding and collapsing the dropdown menu.
• Chips & Search: Built-in multi-selection chip support and fuzzy search input.
• Form Integration: Fully compatible with Flutter's standard Form and validation APIs.
• Highly Customizable: Complete control over haptics, splash ripples, border colors, radii, padding, and animations.

📦 Installation #

dependencies:
  m3e_dropdown_menu: ^0.1.0

import 'package:m3e_dropdown_menu/m3e_dropdown_menu.dart';

🧩 Usage #

🔴 M3E Dropdown (With expandedBorderRadius) #

🔴 M3E Dropdown (Without expandedBorderRadius, With Chips) #

Single-select #

A basic dropdown selecting one item, with an animated border radius transition.

M3EDropdownMenu<String>(
  items: [
    M3EDropdownItem(label: 'Apple', value: 'apple'),
    M3EDropdownItem(label: 'Banana', value: 'banana'),
    M3EDropdownItem(label: 'Cherry', value: 'cherry'),
  ],
  singleSelect: true,
  stiffness: 400,
  damping: 0.6,
  fieldDecoration: M3EDropdownFieldDecoration(
    hintText: 'Choose a fruit',
    borderRadius: BorderRadius.circular(12),
    expandedBorderRadius: BorderRadius.circular(28),
  ),
  dropdownDecoration: const M3EDropdownDecoration(containerRadius: 18),
  itemDecoration: const M3EDropdownItemDecoration(outerRadius: 18, innerRadius: 6),
  onSelectionChanged: (items) => print(items),
)

Multi-select + Search + Chips + Clear #

Provides a search bar, animated chip display, and a clear-all icon.

M3EDropdownMenu<String>(
  items: fruitItems,
  searchEnabled: true,
  showChipAnimation: true,
  maxSelections: 7,
  fieldDecoration: M3EDropdownFieldDecoration(
    hintText: 'Pick up to 7 fruits',
    border: BorderSide(color: Theme.of(context).colorScheme.outline),
    showClearIcon: true,
  ),
  chipDecoration: M3EChipDecoration(
    maxDisplayCount: 3,
    borderRadius: BorderRadius.circular(33),
    openStiffness: 600,
    openDamping: 0.7,
    closeStiffness: 700,
    closeDamping: 0.4,
  ),
  searchDecoration: M3ESearchDecoration(
    hintText: 'Search fruits…',
    filled: true,
    borderRadius: BorderRadius.circular(24),
  ),
  itemDecoration: M3EDropdownItemDecoration(
    outerRadius: 24,
    innerRadius: 8,
    selectedIcon: Icon(Icons.check_rounded, color: Theme.of(context).colorScheme.primary, size: 18),
  ),
  onSelectionChanged: (items) => print(items),
)

With Form Validation #

Integrates seamlessly with Flutter's standard Form and validations.

Form(
  child: Column(
    children: [
      M3EDropdownMenu<String>(
        items: fruitItems,
        singleSelect: true,
        validator: (selected) {
          if (selected == null || selected.isEmpty) return 'Required';
          return null;
        },
        autovalidateMode: AutovalidateMode.onUserInteraction,
        fieldDecoration: M3EDropdownFieldDecoration(
          hintText: 'Required fruit',
          borderRadius: BorderRadius.circular(12),
          expandedBorderRadius: BorderRadius.circular(28),
        ),
        dropdownDecoration: const M3EDropdownDecoration(
          containerRadius: 24,
          header: Text("Pick a fruit"),
          footer: Text("Swipe to see more"),
        ),
        itemDecoration: const M3EDropdownItemDecoration(
          outerRadius: 24,
          selectedBorderRadius: 24,
          itemPadding: EdgeInsets.all(14),
        ),
        onSelectionChanged: (items) => print(items),
      ),
      ElevatedButton(
        onPressed: () => formKey.currentState!.validate(),
        child: const Text('Submit'),
      ),
    ],
  ),
)

Custom Selected Item Builder #

Build custom chip-like representations for selected items.

M3EDropdownMenu<String>(
  items: fruitItems,
  showChipAnimation: true,
  haptic: 1,
  selectedItemBuilder: (item) {
    return Chip(
      avatar: Icon(Icons.check_circle, color: Theme.of(context).colorScheme.primary, size: 18),
      label: Text(item.label),
      backgroundColor: Theme.of(context).colorScheme.primaryContainer,
    );
  },
  chipDecoration: const M3EChipDecoration(
    openStiffness: 600,
    openDamping: 0.7,
    closeStiffness: 700,
    closeDamping: 0.4,
  ),
  onSelectionChanged: (items) => print(items),
)

Async Data Loading #

Loads dropdown items asynchronously via a Future.

M3EDropdownMenu<int>.future(
  future: () async {
    await Future.delayed(const Duration(seconds: 2));
    return List.generate(
      10,
      (i) => M3EDropdownItem(label: 'User ${i + 1}', value: i + 1),
    );
  },
  singleSelect: true,
  fieldDecoration: const M3EDropdownFieldDecoration(
    hintText: 'Loading users…',
  ),
  onSelectionChanged: (items) => print(items),
)

Constructor Parameters:

M3EDropdownFieldDecoration Parameters:

M3EDropdownDecoration Parameters:

M3EChipDecoration Parameters:

M3ESearchDecoration Parameters:

M3EDropdownItemDecoration Parameters:

🎯 Check the Example App for more details. #

🐞 Found a bug? or ✨ You have a Feature Request? #

Feel free to open a Issue or Contribute to the project.

Hope You Love It!

Credits #

• Motor Pub Package for Expressive Animations
• Multi_dropdown Pub Package for Dropdown Menu
• Claude and Gemini for helping me with the code and documentation.

Radhe Radhe 🙏 #