Popup Menu in Flutter

You are currently viewing Popup Menu in Flutter
Popup Menu

Popup Menu in Flutter

This project was written with pure dart code, which means it supports both iOS and Android.

Screenshot

Popup Menu
Popup Menu
Popup Menu
Popup Menu
Popup Menu
Popup Menu

Todo

  •  show/hide animation

Usage

You can find the demo at the ‘example’ folder.
First, you should set the context at somewhere in you code. Like below:

PopupMenu.context = context;
PopupMenu menu = PopupMenu(
      items: [
        MenuItem(title: 'Copy', image: Image.asset('assets/copy.png')), 
        MenuItem(title: 'Home', image: Icon(Icons.home, color: Colors.white,)), 
        MenuItem(title: 'Mail', image: Icon(Icons.mail, color: Colors.white,)), 
        MenuItem(title: 'Power', image: Icon(Icons.power, color: Colors.white,)),
        MenuItem(title: 'Setting', image: Icon(Icons.settings, color: Colors.white,)), 
        MenuItem(title: 'Traffic', image: Icon(Icons.traffic, color: Colors.white,))], 
      onClickMenu: onClickMenu, 
      stateChanged: stateChanged,
      onDismiss: onDismiss);

menu.show(rect: rect);

void stateChanged(bool isShow) {
  print('menu is ${ isShow ? 'showing': 'closed' }');
}

or

PopupMenu menu = PopupMenu(
        backgroundColor: Colors.teal,
        lineColor: Colors.tealAccent,
        maxColumn: 3,
        items: [
          MenuItem(title: 'Copy', image: Image.asset('assets/copy.png')),
          MenuItem(
              title: 'Home',
              textStyle: TextStyle(fontSize: 10.0, color: Colors.tealAccent),
              image: Icon(
                Icons.home,
                color: Colors.white,
              )),
          MenuItem(
              title: 'Mail',
              image: Icon(
                Icons.mail,
                color: Colors.white,
              )),
          MenuItem(
              title: 'Power',
              image: Icon(
                Icons.power,
                color: Colors.white,
              )),
          MenuItem(
              title: 'Setting',
              image: Icon(
                Icons.settings,
                color: Colors.white,
              )),
          MenuItem(
              title: 'PopupMenu',
              image: Icon(
                Icons.menu,
                color: Colors.white,
              ))
        ],
        onClickMenu: onClickMenu,
        onDismiss: onDismiss);
    menu.show(widgetKey: btnKey2);

Credit

This is developed by chinabrant
Download this project from the below link.
https://github.com/chinabrant/popup_menu/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/chinabrant/popup_menu

Spread the love
See also  Animated Circular Menu in Flutter

Leave a Reply