PopupMenuButton in Flutter

Today we will take a look at one of the most used widgets when making apps, the- popup menu button widget in Flutter.

So, What are pop up menu’s and what do they look like?

Popup menus are one of the most used widgets whether they be in a phone or a computer, they are used to show some additional options to the user, the most common example of an popup menu would be when you right-click with your mouse and see some additional options of rename, delete, copy, paste.

They were given the name popup cause of how they popup on our screen to show us various options.

Now that we know what and why of popup menu’s lets move on to how they are used in flutter . In flutter, on click of a button you can see some popup menu items, it looks like this

You can execute a different function on the press of a popup menu item as well, and they come with great customizations.

Now moving onto code,

It barely takes a few lines to make a popup menu button in flutter, with the required parameter being itemBuilder which provides us with an index to keep track of our buttons.

PopupMenuButton(
  child: Center(child: Text('click here')),
  itemBuilder: (context) {
    return List.generate(5, (index) {
      return PopupMenuItem(
        child: Text('button no $index'),
      );
    });
  },
),

This is the simplest code for a popup menu button.

Now lets take a look at what other customization options are there for us, Some of the most common ones that you must have used before when making other things are :

: color — usually there to add color to menu items

: padding — adds some padding for each item

: elevation — used to show elevation

: shape — used to modify how it looks like to give borderRadius and borderSide

: enabled — can set to true or false

These are just the common ones, now lets take a deeper down into some that you might have never used before

1. initialValue — when you open popup menu, the value you have set as the initial value in the menu items gets highlighted. Be sure to provide value inside the PopupMenuItem to use it.

Example –

PopupMenuButton(
  initialValue: 2,
  child: Center(
  child: Text('click here')),
  itemBuilder: (context) {
    return List.generate(5, (index) {
      return PopupMenuItem(
        value: index,
        child: Text('button no $index'),
      );
    });
  },
),

2. onSelected — a function that gives us with the index of the popup menu item we selected and then executes a function on selection.

Example –

onSelected: (int index) {
  print('index is $index');
},

3. onCancelled — the function that will be executed when you click outside the area of popup menu items, so suppose you didn’t want to select an item and you tapped somewhere else so that popup menu goes away, this function is executed then.

Example –

onCanceled: () {
  print('cancelled!');
},

4. Offset — one of the interesting ones, it basically decides offset where it will show us popup menu, if you don’t provide it any value then it by default takes offset.zero, it is useful when you want it show it to specific place, it takes the value of an Offset(dx,dy)

Example –

offset: Offset(0, 400),

So these were some of the most common used ones in PopupMenuButton widget.

You can now go ahead and try them all out, or even treat this blog as your cheat sheet for popup menu buttons.

Thanks for reading, I’ll see you in my next blog

Be sure to hit me up if you need any help implementing it.

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.