How to Create Popup Menu in Flutter

Popup is an amazing widget in Flutter for wider applications. Popup Menu is quite similar to that of Toast in the Flutter. Normally, this dialogue box is suitable for gaining a better focus on the notifications in the system.

It is quite useful when the user prefers to know about any additional information. These are also suitable options for submitting feedback more effectively. It is also quite a convenient option to hire Flutter developers to create the pop-up widget with Flutter.

How to Display a Popup in Flutter?

Popup Menu Example – Anything can be easily displayed in Flutter, and it can be used for various applications. Below are some of the techniques to easily create a pop-up widget with Flutter. These will show better normal and clickable text to improve the stability of displaying the popup. Displaying the Menu when it is pressed by calling the onSelected is a more significant option.

Menu can be easily dismissed if the items are clicked. The value passed in onSelected is quite valuable on selected Menu items. The Pop Up Menu button can be easily seen on all applications. This would be suitable for letting the user easily focus on the application. Below is the Step by Step procedure for implementing the pop-up menu button.

• Create an empty project
• Now add the material package
• import ‘package:flutter/material.dart’
• Call the main method
• run the runApp that will run our application

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

• create a class SimpleAppBarPopupMenuButton()
• Returns the MaterialApp
• Use Scaffold with AppBar and centered Text() widget

	
import 'package:flutter/material.dart';


// main method
void main() {
  // runApp method runs 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!"),
        ),
      ),
    );
  }
}

• use actions widgets in AppBar
• Implement the popup menu button
• import ‘package:flutter/material.dart’;
• Create Stateless widget

	
void main() => runApp(MyApp());

Also Read: Change the Application Launcher icon on Flutter

Types Of Popup Menu

Normally, there are various types of popup menus available which are highlighted. Some of them are listed below.

1. initialValue

The initialValue involves a value set as the initial value in Menu items is highlighted upon opening the popup menu. It is convenient for providing the value inside PopupMenuItem.

2. onSelected

The onSelected involves the function for giving a better index on Popup Menu items. These are selected and executed with a function on selections. For example,

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

3. onCancelled

The onCancelled is one of the important functions executed when it is clicked outside the area of the popup menu. For instance, if you do not prefer to click the items, then you can tap anywhere. It makes the popup menu go away, so the function is executed.

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

4. Offset

The Offset is a value that decides the offset where they show the popup menu. It takes the value as 0 when the value is not provided. These are useful for you to show the specific place on taking value about Offset(dx,dy). Navigator.pushNamed() is useful for navigating between pages. When the user presses popupMenuButton

Example

Create a new Stateless Widget named MyApp

	
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

Create a ElevatedButton Widget

It is meant to easily show the pop-up when it is clicked. This also gives the onPressed Property with the ElevatedButton in a more significant manner. These would be provided with better stability in accessing more features.

Also Read: How to Make Two Floating Action Button in Flutter?

Create Popup in Flutter Popup Menu

Popup menus have been used in the Flutter widgets so that they can be accessed on your computer or smartphone. It is used along with more options for users.

You can see more additional options that include Rename, Delete, Copy and Paste. It is given with the name popup causing it to easily enable a popup on the screen for showing different options. It shows why and what the popup menu is included and how they are used in Flutter app development.

With the click of a button can be easily added to the popup menu items using Flutter. This shows the complete showDialog class with the triggering menu on the _buildPopupDialog widget.

	
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Popup Menu Example'),
        backgroundColor: Colors.black,
      
      body: Center(
        child: ElevatedButton(
          child: Text(
            'Show Pop-up',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
          onPressed: () {
            showDialog(
              context: context,
              builder: (BuildContext context) => Container(),
            );
          },
        ),
      ),
    );
  }
}

Following the above steps lets you easily execute the different functions by pressing the Popup menu. It can also be customized according to the requirements in a unique manner. You can easily switch the codes, so they would only be taking only a few lines to make the popup menu button flutter.

itemBuilder is a required parameter for providing a better Index for keeping track of the buttons. You can easily create the main part of the tutorial for getting a pop-up widget. It can be included with the make _buildPopupDialog Widget in your main.dart file.

In _buildPopupDialog Widget lets the user easily return to AlertDialog. Normally, this contains the Title, Content as well as actions that are used with it. Title property involves the title popping up.

Content property with holding the content based on the Text to be customized. An action is a suitable option for the footer action button, so they enable with FlatButton and dismiss with a popup. Flutter Popup Menu Button Example.

	
PopupMenuButton(
          onSelected: (value) {
            // your logic
          },
          itemBuilder: (BuildContext bc) {
            return const [
              PopupMenuItem(
                child: Text("Hello"),
                value: '/hello',
              ),
              PopupMenuItem(
                child: Text("About"),
                value: '/about',
              ),
              PopupMenuItem(
                child: Text("Contact"),
                value: '/contact',
              )
            ];
          },
        )

Coding uses the PopupMenuButton for easily creating the popup menu, and this gives you better assurance on all aspects. itemBuilder in the program also provides the widget with a showing inside of PopupMenuButton. It is quite a convenient option for returning the PopupMenuItem.

Passing the child widget is easier with PopupMenuItem, and these could be extensively enabled with the icon, text and even a combination of them. The PopupMenuItem is especially enabled with similar parameters known as the ‘value’. These will be passed when selected with onSelected, and you can also write the action using this method.

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

It is one of the simple coding methods on the Popup menu button. These are also enabled with other customization options for gaining better stability. The most common that must have been used for making other things include the color, padding, elevation and more. Create a Popup in Flutter Popup with the color enabled with Menu items. The padding adds to every item, and elevations are useful for actions.

Conclusion

In this, you learn how to develop the popup menu button in Flutter technology with some standard methods and examples. It is also the efficient and correct method that helps you to utilize more aspects of latest mobile app development trends. I hope you like this article and all your confusion.

If you need to build the Flutter app for your enterprise with a popup menu, then consult www.bosctechlabs.com to build your dream Flutter mobile application. Their expert team will be glad to assist you in every manner.

Frequently Asked Questions (FAQs)

1. Which menu is called the popup menu?

A context menu is a menu in the graphical user interface (GUI) that appears upon the user interaction, like the right-click of mouse operation.

2. What is the difference between the menu and the popup menu?

Popup menu refers to a menu that can be displayed anywhere on the page just by right-clicking on the mouse on the page. In contrast, the drop-down menu refers to the menu that usually slows down from a menu bar when clicked, and it will stay open until it is closed by a user.

3. How can I view the popup dialog in Flutter app development?

In the on-pressed property, we use the showDialog widget of Flutter. It will take the context and builder. In the builder, we give the AlertDialog widget title, content, and action, and an alert dialog box is ready to use.

Consult Our Flutter experts