Open In App

Flutter - Pop Up Menu

Last Updated : 18 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

Step-by-Step Implementation 

Step 1: Create a new Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Import dependencies

To use libraries, import all of them in the respective .dart file,

import 'package:flutter/material.dart';


Step 3: Working With main.dart:

Add the boilerplate code below in main.dart to initialize the Firebase in the main function and create a basic structure with an MaterialApp.

main.dart:

Dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AppBar Popup Menu Button',
      home: SimpleAppBarPopupMenuButton(),
    );
  }
}

class SimpleAppBarPopupMenuButton extends StatelessWidget {
  const SimpleAppBarPopupMenuButton({super.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 title text
        appBar: AppBar(
          title: const Text('AppBar Popup Menu Button'),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
      
        ),
        // body with centered text
        body: const Center(
          child: Text("Press the 3 Point Button Up!"),
        ),
      ),
    );
  }
}


Step 4: Create a popup menu button

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

Dart
// in action widget we have PopupMenuButton
actions: [
    PopupMenuButton<int>(
        itemBuilder: (context) => [
        // PopupMenuItem 1
        PopupMenuItem(
            value: 1,
            // row with 2 children
            child: Row(
                children: [
                    const Icon(Icons.star),
                    SizedBox(width: 10,),
                    const Text("Get The App")
                ],
            ),
        ),
        // PopupMenuItem 2
        PopupMenuItem(
            value: 2,
            // row with two children
            child: Row(
                children: [
                    const Icon(Icons.chrome_reader_mode),
                    SizedBox(
                        width: 10,
                    ),
                    const Text("About")
                ],
            ),
        ),
        ],
        offset: const Offset(0, 100),
        color: Colors.green,
        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);
            }
        },
    ),
],


Step 5: Create AlertDialog

It is used to show a pop-up, when the user selects one of the pop-up menu items.

Dart
// definition of the dialog
void _showDialog(BuildContext context) {
showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: const Text("Alert!!"),
      content: const Text("You are awesome!"),
      actions: [
        MaterialButton(
          child: const Text("OK"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);
}


Complete Source Code:

Dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AppBar Popup Menu Button',
      home: SimpleAppBarPopupMenuButton(),
    );
  }
}

class SimpleAppBarPopupMenuButton extends StatelessWidget {
  const SimpleAppBarPopupMenuButton({super.key});

  // definition of the dialog
  void _showDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Alert!!"),
          content: const Text("You are awesome!"),
          actions: [
            MaterialButton(
              child: const 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: const Text('AppBar Popup Menu Button'),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
          // in action widget we have PopupMenuButton
          actions: [
            PopupMenuButton<int>(
              itemBuilder: (context) => [
                // PopupMenuItem 1
                PopupMenuItem(
                  value: 1,
                  // row with 2 children
                  child: Row(
                    children: [
                      const Icon(Icons.star),
                      const SizedBox(
                        width: 10,
                      ),
                      const Text("Get The App")
                    ],
                  ),
                ),
                // PopupMenuItem 2
                PopupMenuItem(
                  value: 2,
                  // row with two children
                  child: Row(
                    children: [
                      const Icon(Icons.chrome_reader_mode),
                      const SizedBox(
                        width: 10,
                      ),
                      const Text("About")
                    ],
                  ),
                ),
              ],
              offset: const Offset(0, 100),
              color: Colors.green,
              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: const 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 A 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.

Next Article
Article Tags :

Similar Reads