Flutter – Pop Up Menu

Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. If we focus on an Application, We can see in every Application there is a Pop Up Menu button that will do some work. So in this article, we will implement the pop-up menu button. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation 

Step 1: Create an empty project.

Step 2: Now add the material package.

Dart

import 'package:flutter/material.dart';

Step 3: Call the main method, In the main method again run the runApp that will run our application.

Dart

void main() {
  runApp(SimpleAppBarPopupMenuButton());
}

Step 4: Now create a class SimpleAppBarPopupMenuButton(). That returns the MaterialApp and In-home property Use Scaffold with AppBar and centered Text() widget.

Dart

import 'package:flutter/material.dart';

// main method
void main() {
  // runApp method run the our main app
  runApp(SimpleAppBarPopupMenuButton());
}

class SimpleAppBarPopupMenuButton extends StatelessWidget {
  const SimpleAppBarPopupMenuButton({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // MaterialApp with
    // debugShowCheckedModeBanner false and title
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AppBar Popup Menu Button',
      // scaffold with appbar
      home: Scaffold(
        // appbar with text
        appBar: AppBar(
          title: Text('AppBar Popup Menu Button'),
        // body of the scaffold with center text.
        body: Center(
          child: Text("Press the 3 Point Button Up!"),
        ),
      ),
    );
  }
}

Step 5: Now in AppBar we have to use actions widgets where we will implement the popup menu button.

Dart

// popup menu button
actions: [
            PopupMenuButton<int>(
              itemBuilder: (context) => [
                // popupmenu item 1
                PopupMenuItem(
                  value: 1,
                  // row has two child icon and text.
                  child: Row(
                    children: [
                      Icon(Icons.star),
                      SizedBox(
                        // sized box with width 10
                        width: 10,
                      ),
                      Text("Get The App")
                    ],
                  ),
                ),
                // popupmenu item 2
                PopupMenuItem(
                  value: 2,
                  // row has two child icon and text
                  child: Row(
                    children: [
                      Icon(Icons.chrome_reader_mode),
                      SizedBox(
                        // sized box with width 10
                        width: 10,
                      ),
                      Text("About")
                    ],
                  ),
                ),
              ],
              offset: Offset(0, 100),
              color: Colors.grey,
              elevation: 2,
            ),
          ],

Complete Code

Dart

import 'package:flutter/material.dart';

// main method
void main() {
  // runapp method run the our main app
  runApp(SimpleAppBarPopupMenuButton());
}

class SimpleAppBarPopupMenuButton extends StatelessWidget {
  const SimpleAppBarPopupMenuButton({Key? key}) : super(key: key);
  // definition of the dialog
  // box when value is selected
  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Alert!!"),
          content: Text("You are awesome!"),
          actions: [
            MaterialButton(
              child: Text("OK"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    // MaterialApp  with debugShowCheckedModeBanner
    // false and title.
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AppBar Popup Menu Button',
      // scaffold with appbar
      home: Scaffold(
        // appbar with title text
        appBar: AppBar(
          title: Text('AppBar Popup Menu Button'),
          // in action widget we have PopupMenuButton
          actions: [
            PopupMenuButton<int>(
              itemBuilder: (context) => [
                // PopupMenuItem 1
                PopupMenuItem(
                  value: 1,
                  // row with 2 children
                  child: Row(
                    children: [
                      Icon(Icons.star),
                      SizedBox(
                        width: 10,
                      ),
                      Text("Get The App")
                    ],
                  ),
                ),
                // PopupMenuItem 2
                PopupMenuItem(
                  value: 2,
                  // row with two children
                  child: Row(
                    children: [
                      Icon(Icons.chrome_reader_mode),
                      SizedBox(
                        width: 10,
                      ),
                      Text("About")
                    ],
                  ),
                ),
              ],
              offset: Offset(0, 100),
              color: Colors.grey,
              elevation: 2,
              // on selected we show the dialog box
              onSelected: (value) {
                // if value 1 show dialog
                if (value == 1) {
                  _showDialog(context);
                  // if value 2 show dialog
                } else if (value == 2) {
                  _showDialog(context);
                }
              },
            ),
          ],
        ),
        // body with centered text
        body: Center(
          child: Text("Press the 3 Point Button Up!"),
        ),
      ),
    );
  }
}

Output:

Code Explanation 

• Main Is The Principal Method Used To Run SimpleAppBarPopupMenuButton Class When The Page Is Loaded
• Creating Class SimpleAppBarPopupMenuButton, Stateless Due To Just Showing Popup Menu Button (It Will Not Change)
• As Flutter Is Based On Widgets, We Need To Create One
• Creating A Material App That Takes Scaffold Allowing Us To Use AppBar And Body
• As An AppBar It Has An Simple Title
• AppBar Having actions (floating Items To The Right), Taking PopupMenuButton Taking PopupMenuItem You Can Add Much As You Want
• Each PopupMenuItem Has Its Value Used To Do Action In OnSelected Method, And Child Taking Any Widget You Need, Here A Row Having Icon And Text
• OffSet Set The Drop Down Not On Tap Position
• color Set PopupMenu Background Color To Grey
• As An Body, It Takes Centered Text