menu_chip 1.1.0

A customizable Flutter chip widget with an integrated dropdown menu for selection interfaces.

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.

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
• Zero dependencies beyond the Flutter SDK
• 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),
    ),
  ],
);