PopUp Menu Button widget in Flutter

Vandana Sharma

27 April 2023

In this Blog, we will implement PopUp Menu Button Widget in Flutter.

We all know that we have so many interactive widgets in Flutter which are very useful in making our Applications attractive.

When user can interact by many ways with our application, it seems very interactive.It will give interest to user for using our app.

Without wasting time Let’s implement the Pop Up Menu Button Widget in Flutter.

Check our Flutter app development services page.

#create demo

Initially, create a demo flutter project.Basic counter code is written on the project.
remove all the code.

We will write our own code.Add the below shown code snippet in your Flutter project.

Here we have added a Appbar.And using the actions property of Appbar.

MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: Text("PupUp Menu Demo",
        ),
        actions: [
         
        ],),
      ),
    );

MaterialApp(

debugShowCheckedModeBanner: false,

home: Scaffold(

appBar: AppBar(title: Text("PupUp Menu Demo",

actions: [

],),

);

#create widget

In this step we will add the widget in the actions of appbar. we have added in the above code.

     PopupMenuButton(
            icon: Icon(Icons.more_vert,color: Colors.grey,),
            itemBuilder: (context) {
              return [
                PopupMenuItem(
                    value: 'share',
                    child: InkWell(
                        onTap: () async {

                        },
                        child: const Text("Add to Cart"))
                ),

                PopupMenuItem(
                    value: 'wishList',
                    child: InkWell(
                        onTap: () {

                        },
                        child: Text(
                            "Delete"

                        ))
                ),
                PopupMenuItem(
                    value: 'delete',
                    child: InkWell(
                        onTap: () {

                        },
                        child: Text(
                            "Add to Wishlist"
                        ))
                )
              ];
            },
            onSelected: (String value) {
              print('You Click on po up menu item');
            },
          ),

PopupMenuButton(

icon: Icon(Icons.more_vert,color: Colors.grey,),

itemBuilder: (context) {

return [

PopupMenuItem(

value: 'share',

child: InkWell(

onTap: () async {

child: const Text("Add to Cart"))

PopupMenuItem(

value: 'wishList',

child: InkWell(

onTap: () {

child: Text(

"Delete"

))

PopupMenuItem(

value: 'delete',

child: InkWell(

onTap: () {

child: Text(

"Add to Wishlist"

))

)

];

onSelected: (String value) {

print('You Click on po up menu item');

All you need to do just add the above code in the action of Appbar. So just copy and paste the above code in your flutter project.

As you can see that we have added code for Pop Up Menu Button Widget in Flutter.In PopupMenuButton widget , we can add number of buttons of our own choice as items of Pop up menu button widget.

#output

As you can see in the below attached images that in centre of screen we have added Pop Up Menu Button Widget.

On tap of widget, we are showing the pop with three buttons.You can modify this according your needs.Also add your operations on tap of pop up buttons.

#Conclusion

Congratulations!!!! you have learned how to implement PopUp Menu Button Widget in Flutter.

Using this widget we can add multiple features on popup menu buttons click.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helped you with a better understanding of the implementation of PopUp Menu Button Widget in Flutter.

Thanks for reading.😇

References

https://api.flutter.dev/flutter/material/PopupMenuButton-class.html