Animated Menu #

A professional Flutter package for creating beautiful, animated popup menus with smooth corners, backdrop blur, and customizable animations. Zero external dependencies - everything is built-in.

Features #

• Smooth Corners: iOS/macOS-style continuous corners (squircle)
• Backdrop Blur: Beautiful blur effect behind the menu
• Built-in Animations: Multiple animation presets (fade, scale, bounce, elastic, slide, etc.)
• Theme Support: Dark/light presets and full customization
• Rich Menu Items: Icons, keyboard shortcuts, destructive actions
• Multiple APIs: Function-based, widget-based, and extension methods
• Zero Dependencies: No external packages required

Installation #

Add animated_menu to your pubspec.yaml:

dependencies:
  animated_menu: ^1.0.3

Quick Start #

import 'package:animated_menu/animated_menu.dart';

// Show menu on tap
GestureDetector(
  onTapDown: (details) {
    showAnimatedMenu(
      context: context,
      position: details.globalPosition,
      menu: AnimatedMenu(
        items: [
          AnimatedMenuButtonItem(
            icon: Icons.copy,
            child: Text('Copy'),
            onSelected: () => print('Copy!'),
          ),
          AnimatedMenuDivider(),
          AnimatedMenuButtonItem(
            icon: Icons.delete,
            child: Text('Delete'),
            isDestructive: true,
            onSelected: () => print('Delete!'),
          ),
        ],
      ),
    );
  },
  child: YourWidget(),
)

Usage Examples #

Basic Menu #

showAnimatedMenu(
  context: context,
  position: tapPosition,
  menu: AnimatedMenu(
    items: [
      AnimatedMenuButtonItem(
        icon: Icons.edit,
        child: Text('Edit'),
        onSelected: () => handleEdit(),
      ),
      AnimatedMenuButtonItem(
        icon: Icons.share,
        child: Text('Share'),
        onSelected: () => handleShare(),
      ),
    ],
  ),
);

With Animation Presets #

showAnimatedMenu(
  context: context,
  position: position,
  animationConfig: MenuAnimationConfig.bounceIn, // or .elasticIn, .scale, .fadeIn
  menu: AnimatedMenu(
    items: [...],
  ),
);

With Theme #

AnimatedMenu(
  theme: AnimatedMenuTheme.dark, // or .light
  items: [...],
)

Custom Theme #

AnimatedMenu(
  theme: AnimatedMenuTheme(
    backgroundColor: Colors.grey[900],
    hoverColor: Colors.grey[800],
    textStyle: TextStyle(color: Colors.white),
    iconColor: Colors.white70,
  ),
  items: [...],
)

With Section Headers #

AnimatedMenu(
  items: [
    AnimatedMenuHeader(title: 'Actions'),
    AnimatedMenuButtonItem(
      icon: Icons.copy,
      child: Text('Copy'),
      trailing: Text('⌘C'),
      onSelected: () {},
    ),
    AnimatedMenuButtonItem(
      icon: Icons.paste,
      child: Text('Paste'),
      trailing: Text('⌘V'),
      onSelected: () {},
    ),
    AnimatedMenuDivider(),
    AnimatedMenuHeader(title: 'Danger Zone'),
    AnimatedMenuButtonItem(
      icon: Icons.delete,
      child: Text('Delete'),
      isDestructive: true,
      onSelected: () {},
    ),
  ],
)

Using AnimatedMenuAnchor Widget #

AnimatedMenuAnchor(
  menuBuilder: (context) => AnimatedMenu(
    items: [
      AnimatedMenuButtonItem(
        child: Text('Option 1'),
        onSelected: () {},
      ),
    ],
  ),
  child: ElevatedButton(
    onPressed: null,
    child: Text('Show Menu'),
  ),
)

Using AnimatedMenuButton (for App Bars) #

AppBar(
  actions: [
    AnimatedMenuButton(
      icon: Icons.more_vert,
      menuBuilder: (context) => AnimatedMenu(
        theme: AnimatedMenuTheme.dark,
        items: [
          AnimatedMenuButtonItem(
            icon: Icons.settings,
            child: Text('Settings'),
            onSelected: () {},
          ),
        ],
      ),
    ),
  ],
)

Using Extension Method #

MyWidget().withAnimatedMenu(
  menuBuilder: (context) => AnimatedMenu(
    items: [...],
  ),
)

Using AnimatedMenuController #

final menuController = AnimatedMenuController();

// Show menu
menuController.show(
  context: context,
  position: tapPosition,
  menu: AnimatedMenu(items: [...]),
);

// Dismiss programmatically
menuController.dismiss();

Animation Presets #

Custom Animation #

MenuAnimationConfig(
  animation: MenuAnimation.fadeScale,
  duration: Duration(milliseconds: 250),
  curve: Curves.easeOutBack,
  initialScale: 0.8,
)

Menu Item Types #

AnimatedMenu Parameters #

AnimatedMenuButtonItem Parameters #

Migration from 1.0.2 #

The animate_do package is no longer required. Replace:

// Old (1.0.2)
FadeIn(
  child: AnimatedMenuButtonItem(...),
)

// New (1.0.3)
AnimatedMenu(
  animationConfig: MenuAnimationConfig.fadeIn,
  items: [
    AnimatedMenuButtonItem(...),
  ],
)

The preferredAnchorPoint parameter is now position (old name still works).

License #

MIT License - see LICENSE for details.