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.

Pub Version License: MIT GitHub open issues Flutter

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
Menu Chip Demo

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),
    ),
  ],
);

Libraries