A lightweight and customizable Flutter package that combines a filter chip with a dropdown menu. Perfect for creating selection interfaces where users need to choose from multiple options in a compact, intuitive UI component.

Pub Version License: MIT GitHub open issues Flutter

Features

  • Filter chip with integrated dropdown menu
  • Customizable appearance (colors, icons, text)
  • Lightweight with minimal dependencies
  • Easy integration with existing Flutter projects
  • Follows Material Design 3 guidelines by default
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.flutter-io.cn

Usage

Example:

import 'package:menu_chip/menu_chip.dart';

// Place it as higher in your active widget tree as possible
final _key = GlobalKey<PopupMenuButtonState>();

String? _chipValue;

MaterialMenuChip(
    menuKey: _key,
    menuItemsList: [
        MenuChipItem(
            value: 'option1',
            label: Text('Option 1'),
            avatar: Icon(Icons.star),
         ),
        MenuChipItem(
            value: 'option2', 
            label: Text('Option 2'),
            avatar: Icon(Icons.favorite),
        ),
    ],
    selectedValue: _chipValue,
    onSelectionChanged: (value) {
        print('Selected: $value');
    },
    chipLabel: Text('Filter'),
);

Libraries