menu_chip 2.0.0

A customizable chip widget with an integrated dropdown menu for single-value selection.

A Flutter filter chip with a built-in dropdown menu for single-value selection.

MaterialMenuChip opens a Material 3 menu from a chip, shows the current selection, and lets users clear it—ideal for compact filters in toolbars, search bars, and list headers.

Requires Flutter ≥3.44 and uses the standalone material_ui package (pulled in transitively). Host apps should use material_ui's MaterialApp / theme, or wrap legacy Material subtrees with MaterialUiCompatibilityBridge.

Features

• Filter chip that anchors a Material 3 dropdown menu
• Typed single selection with optional clear
• Customizable chip and menu styles (MaterialChipStyle, MaterialPopupMenuStyle)
• Leading avatars on the chip and menu items
• Built on material_ui (no other third-party deps)
• RTL support out of the box

Based on Material Design 3

Getting started

To add the menu_chip to your Flutter application follow the installation instructions on pub.dev

Usage

String? selection;

MaterialMenuChip(
  chipLabel: Text('Sort by'),
  selectedValue: selection,
  onSelectionChanged: (newValue) {
    setState(() => selection = newValue);
  },
  menuItemsList: const [
    MenuChipItem(
      value: 'name',
      label: Text('Name'),
      avatar: Icon(Icons.sort_by_alpha),
    ),
    MenuChipItem(
      value: 'date',
      label: Text('Date'),
      avatar: Icon(Icons.calendar_today),
    ),
    MenuChipItem(
      value: 'size',
      label: Text('Size'),
      avatar: Icon(Icons.straighten),
    ),
  ],
);