How to implement PopUpMenuButton in Flutter

In this guide, we will discuss how to implement a PopUpMenuButton in a flutter. First off, what is PopUpMenuButton in flutter? Popup menus are used to show some additional options to the user, the most common example of a popup menu would be when you right-click with your mouse and see some additional options of rename, delete, copy, and paste.

It is a button that displays the menu when it is pressed and then calls the onSelected method the menu is dismissed. It is because the item from the multiple options is selected. This button contains text and an image. It will mainly use with the Settings menu to list all options. It helps in making a great user experience.

Properties of PopUpMenuButton

key	identifies specific widgets within the collection.
itemBuilder	creates the item to show in the menu
initialValue	item is highlighted when you open the menu.
onSelected	Called when the user selects a value from the popup menu button.
onCanceled	Called when the user dismisses the popup menu without selecting the item.
tooltip	Text that describes the action that will occur when the menu item is long pressed.
elevation	Controls the size of the shadow behind the menu
padding	Sets the padding of the menu item. Useful to be able to set the padding to zero.
child	If provided, the child is the widget used for this button and the button will utilize an Inkwell for taps.
offset	display a menu at a particular position.
color	Provides the background color for the Popup Menu.
shape	Used to provide specific shapes to our popup menu.

Let’s take an example of how we can implement the PopUpMenu Button in our flutter application.

We will create a new model name MenuItem that includes the String of text and IconData for displaying the icon as well as for displaying the remaining space for color and storing it into a new file inside the lib folder name menu_item.dart.

import 'package:flutter/cupertino.dart';

class MenuItem {
  final String text;
  final IconData icon;
  final Color menuColors;

  const MenuItem(
      {required this.text,
       required this.icon,
       required this.menuColors,});
}

Now we will again create a new file name as menu_item_data.dart that includes the dummy data.

import 'package:flutter/material.dart';
import 'package:vlogpost/model/menu_item.dart';

class MenuItems {
  static const List<MenuItem> itemMenu = [
    menuSettings,
    menuCheck,
    menuRate,
  ];
  static const menuSettings = MenuItem(
    text: 'Settings',
    icon: Icons.settings,
    menuColors: Colors.amber,
  );
  static const menuRate = MenuItem(
    text: 'Rate',
    icon: Icons.star,
    menuColors: Colors.blueAccent,
  );
  static const menuCheck = MenuItem(
    text: 'Check Out',
    icon: Icons.shopping_basket,
    menuColors: Colors.green,
  );
}

Now let’s implement the code in the Flutter application. The final code looks like this:

import 'package:flutter/material.dart';
import 'package:vlogpost/data/menu_item_data.dart';
import 'package:vlogpost/model/menu_item.dart';
import 'package:vlogpost/screen/popupmenu/settings.dart';
import 'package:vlogpost/screen/popupmenu/share.dart';
import 'package:vlogpost/screen/popupmenu/shopping.dart';

class PopMenuButtonScreen extends StatefulWidget {
  const PopMenuButtonScreen({Key? key}) : super(key: key);

  @override
  State<PopMenuButtonScreen> createState() => _PopMenuButtonScreenState();
}

class _PopMenuButtonScreenState extends State<PopMenuButtonScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PopupMenuButton in flutter'),
        centerTitle: true,
        actions: [
          PopupMenuButton<MenuItem>(
              onSelected: ((item) => onSelected(context, item)),
              itemBuilder: ((context) {
                return MenuItems.itemMenu.map((e) {
                  return PopupMenuItem<MenuItem>(
                    value: e,
                    child: Row(
                      children: [
                        Icon(
                          e.icon,
                          color: Colors.black,
                          size: 20,
                        ),
                        const SizedBox(
                          width: 10,
                        ),
                        Text(e.text),
                      ],
                    ),
                  );
                }).toList();
              }))
        ],
      ),
    );
  }

  void onSelected(BuildContext context, MenuItem item) {
    switch (item) {
      case MenuItems.menuSettings:
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => SettingScreen(
                      menuItem: item,
                    )));
        break;
      case MenuItems.menuCheck:
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => ShoppingScreen(
                      menuItem: item,
                    )));
        break;
      case MenuItems.menuRate:
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => ShareScreen(
                      menuItem: item,
                    )));
        break;
    }
  }
}

On Navigating to its details screen the code is shown below

import 'package:flutter/material.dart';
import 'package:vlogpost/model/menu_item.dart';

class SettingScreen extends StatelessWidget {
  const SettingScreen({Key? key, required this.menuItem}) : super(key: key);
  final MenuItem menuItem;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${menuItem.text} Screen'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: menuItem.menuColors,
            ),
          )
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:vlogpost/model/menu_item.dart';

class ShareScreen extends StatelessWidget {
  const ShareScreen({Key? key, required this.menuItem}) : super(key: key);
  final MenuItem menuItem;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${menuItem.text} Screen'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: menuItem.menuColors,
            ),
          )
        ],
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:vlogpost/model/menu_item.dart';

class ShoppingScreen extends StatelessWidget {
  const ShoppingScreen({
    Key? key,
    required this.menuItem,
  }) : super(key: key);
  final MenuItem menuItem;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('${menuItem.text} Screen'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: Container(
              color: menuItem.menuColors,
            ),
          )
        ],
      ),
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

Thanks for reading this article on implementing PopUpMenuButton In Flutter. Also Read: How To Implement DropDownButton In Flutter