Animated Menu

Use AnimatedMenu to create a menu with/without animation. You can use FadeIn or SlideIn animation to show the menu, You can use any Widget inside AnimatedMenu as a menu item.

Installation

Add animated_menu: ^1.0.0 in your project’s pubspec.yaml:

dependencies:
  animated_menu: ^1.0.0

Usage

Import animated_menu in your dart file:

import 'package:animated_menu/animated_menu.dart';

Then use showAnimatedMenu in your function:

onTapDown: (details) {
  showAnimatedMenu(
    context: context,
    preferredAnchorPoint: Offset(
      details.globalPosition.dx,
      details.globalPosition.dy,
    ),
    isDismissable: true,
    useRootNavigator: true,
    menu: AnimatedMenu(
      items: [
        FadeIn(
          child: Material(
            borderRadius: BorderRadius.circular(10),
            child: Container(
              height: 170,
              width: 200,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
              child: Column(
                children: const [
                  SizedBox(height: 10),
                  Text('Item 1'),
                  Divider(),
                  Text('Item 2'),
                  Divider(),
                  Text('Item 3'),
                  Divider(),
                  Text('Item 4'),
                  Divider(),
                  Text('Item 5'),
                  SizedBox(height: 10),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  );
},

GitHub

View Github