How to Open PopupMenuButton In Flutter ?

· 4 min read
How to Open PopupMenuButton In Flutter
How to Open PopupMenuButton In Flutter

The PopupMenuButton shows the menu but does not change the current button, you can do more things than the DropdownButton. So in this article, We will go through How to Open PopupMenuButton In Flutter?

What is PopupMenuButton ?

The PopupMenuButton is similar to the DropdownButton but has a bit different from it.

How to Open PopupMenuButton In Flutter?

To Open a PopupMenuButton consider a code snippet like the below:

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _menuKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    final button = new PopupMenuButton(
        key: _menuKey,
        itemBuilder: (_) => <PopupMenuItem<String>>[
              new PopupMenuItem<String>(
                  child: const Text('Doge'), value: 'Doge'),
              new PopupMenuItem<String>(
                  child: const Text('Lion'), value: 'Lion'),
            ],
        onSelected: (_) {});

    final tile =
        new ListTile(title: new Text('Doge or lion?'), trailing: button, onTap: () {
          // This is a hack because _PopupMenuButtonState is private.
          dynamic state = _menuKey.currentState;
          state.showButtonMenu();
        });
    return new Scaffold(
      body: new Center(
        child: tile,
      ),
    );
  }
}

Consider a code snippet like the below:

void _showPopupMenu() async {
  await showMenu(
    context: context,
    position: RelativeRect.fromLTRB(100, 100, 100, 100),
    items: [
      PopupMenuItem<String>(
          child: const Text('Doge'), value: 'Doge'),
      PopupMenuItem<String>(
          child: const Text('Lion'), value: 'Lion'),
    ],
    elevation: 8.0,
  );
}

You can also popup_menu package as a library.

Add popup_menu: ^1.0.5 in your pubspec.yaml dependencies. And import it like a below:

import 'package:popup_menu/popup_menu.dart';

First, you should set the context somewhere in your code. like below:

PopupMenu.context = context;

Then create a ShowPopup Widget and pass the required params:

void showPopup(Offset offset) {
    PopupMenu menu = PopupMenu(
        // backgroundColor: Colors.teal,
        // lineColor: Colors.tealAccent,
        maxColumn: 3,
        items: [
          MenuItem(title: 'Copy', image: Image.asset('assets/copy.png')),
          MenuItem(title: 'Mail', image: Icon(Icons.mail, color: Colors.white)),
          MenuItem(title: 'Power',image: Icon(Icons.power, color: Colors.white,)),
        ],
        onClickMenu: onClickMenu,
        stateChanged: stateChanged,
        onDismiss: onDismiss);
    menu.show(rect: Rect.fromPoints(offset, offset));
  }

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

  void onClickMenu(MenuItemProvider item) {
    print('Click menu -> ${item.menuTitle}');
  }

  void onDismiss() {
    print('Menu is dismiss');
  }

Open Popup like a below:

@override
 Widget build(BuildContext context) {

 PopupMenu.context = context;  // This is the set context

   return Scaffold(
     appBar: AppBar(
       title: Text('Show Popup')),
     body: Stack(
       children: <Widget>[
         ListView.builder(
           itemCount: list.length,
           itemBuilder: (context, index) {
            return MaterialButton(
               child: GestureDetector(
                 onTapUp: (TapUpDetails details) {
                   showPopup(details.globalPosition);
                 },
                 child: ListTile(
                   leading: IconButton(
                     icon: Icon(Icons.restaurant_menu),
                   ),
                   title: Text("Select your categories"),
                   subtitle: Text("Sub Title"),
                   // onTap: showPopup,
                 ),
               ),

             );
           },
         ),
       ],
     ),
   );
 }

We will get output like the below:

Open a Popup Menu in a Flutter
Open a Popup Menu in a Flutter

Conclusion:

In this article, we have been through How to Open PopupMenuButton In Flutter?

Hope you like our article !!! Drop us your valuable feedback to serve you much better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply