×
×

Spread the love

In flutter, popup menu button widget is nothing but a popup / overflow menu in android and ios. It is similar to flutter dropdownButton but has additional features. In this example tutorial, we will learn how to use a popup menu button widget in flutter and its properties in detail.

Flutter Popup Menu Button Widget

In flutter, popup menu button widget displays an overflow menu when pressed. When we select an item the onSelected callback will be invoked and the menu is dismissed. The value of the menu item selected by the user will be passed to onSelected callback. We will save the value to a global variable & use the value wherever we want.

The itemBuilder property is required which means without using it will throw an error. We have to use the Stateful widget as popup menu button will have a change in the state based on the user selection.

Constructor:

PopupMenuButton(
{Key key, 
@required PopupMenuItemBuilder<T> itemBuilder, 
T initialValue, 
PopupMenuItemSelected<T> onSelected, 
PopupMenuCanceled onCanceled, 
String tooltip, 
double elevation, 
EdgeInsetsGeometry padding: const EdgeInsets.all(8.0), 
Widget child, 
Widget icon, 
Offset offset: Offset.zero, 
bool enabled: true, 
ShapeBorder shape, 
Color color, 
bool captureInheritedThemes: true}
) 

Flutter Popup Menu Button Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}
class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Popup Menu Button"),
          actions: [
            PopupMenuButton(
                itemBuilder: (context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: 1,
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: 2,
                  )
                ]
            )
          ],
        ),      
      )
    );
  }
}

Output:

flutter popup menu button

Flutter Popup Menu Button Properties

It has a lot of properties but I’m going to discuss the most used ones. Try the rest for yourself.

  • child
  • icon
  • itemBuilder
  • color
  • elevation
  • shape
  • enabled
  • onSelected
  • onCancelled

Flutter Popup Menu Button child

The child property can be any widget, but generally, we use the Text widget to display a text for the popup menu as there is an icon property to display icon instead of text.

Note: We should use either child or icon property but not both as it will throw an error.

PopupMenuButton(
                child: Padding(
                  padding: EdgeInsets.symmetric(
                    horizontal: 10, 
                    vertical: 20
                  ),
                  child:Text("Menu"),
                ),
                itemBuilder: (context) => [
                  
                ]
            )

Output:

flutter popup menu button child

Flutter Popup Menu Button icon

The icon property is used to change the icon of the popup menu. By default, the popup menu displays an overflow menu(three dots) icon even if we don’t use the icon property.

PopupMenuButton(
                icon: Icon(Icons.more_horiz),
                itemBuilder: (context) => [
                  
                ]
            )

Output:

flutter popup menu button icon

The default icon will look like below

flutter popup menu button default icon

Flutter Popup Menu itemBuilder

We will use the itemBuilder property to add items to Popup Menu Button. It accepts a list of PopupMenuItems.

PopupMenuButton(
                itemBuilder:(context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: 1,
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: 2,
                  )
                ]
            )

Output:

flutter popup menu button item builder

Flutter Popup Menu color

We will use the color property to change the backgroundColor of the popup menu.

PopupMenuButton(
                color: Colors.yellowAccent,
                itemBuilder:(context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: 1,
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: 2,
                  ),

                ]
            )

Output:

flutter popup menu button background color

Flutter Popup Menu elevation

We will use the elevation property to apply elevation to the popup menu. Elevation makes the popup menu look as it is lifted upward from the background.

PopupMenuButton(
                color: Colors.yellowAccent,
                elevation: 40,
                itemBuilder:(context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: 1,
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: 2,
                  ),
                ]
            )

Output:

flutter popup menu button elevation

Flutter Popup Menu shape

We will use the shape property to change the shape of the popup menu. We can apply different shapes like CircleBorder, OutlineInputBorder, etc.

I’m explaining two shapes as we can’t discuss all the concepts in one article. So try the rest for yourself. To know more about different shapes refer shaping RaisedButton section of flutter RaisedButton widget Example.

OutlineInputBorder()

PopupMenuButton(
                color: Colors.yellowAccent,
                elevation: 20,
                shape: OutlineInputBorder(
                    borderSide: BorderSide(
                        color: Colors.grey,
                        width: 2
                    )
                ),
                itemBuilder:(context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: 1,
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: 2,
                  ),
                ]
            )

Output:

flutter popup menu button shape outlineinputborder

CircleBorder()

PopupMenuButton(
                color: Colors.yellowAccent,
                elevation: 20,
                shape: CircleBorder(),
                itemBuilder:(context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: 1,
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: 2,
                  ),
                ]
            )

Output:

flutter popup menu button shape circleborder

Flutter Popup Menu Button enabled

The enabled property takes a boolean value which is used to enable/disable the button. Setting enabled to true will make the button enable and false will disable the button.

PopupMenuButton(
                color: Colors.yellowAccent,
                elevation: 20,
                enabled: false,
                itemBuilder:(context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: 1,
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: 2,
                  ),
                ]
            )

Output:

flutter popup menu button enabled

Popup Menu onSelected

The onSelected property is used to invoke the onSelected callback when the user selects an item from the popup menu. The popup menu will be dismissed when the user selects an item.

In the below code snippet we have taken a text widget in the center. We are setting text to the text widget based on the user selection.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}
class _MyState extends State<MyApp>
{
  String _value = "";
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Popup Menu Button"),
          actions: [
            PopupMenuButton(
                color: Colors.yellowAccent,
                elevation: 20,
                enabled: true,
                onSelected: (value) {
                  setState(() {
                     _value = value;
                  });
                },
                itemBuilder:(context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: "first",
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: "Second",
                  ),
                ]
            )
          ],
        ),
        body: Center(
          child: Text(_value),
        ),
      )
    );
  }
}

Output:

flutter popup menu button onselected

Popup Menu button onCancelled

We will use this property to do something when the user cancels the menu without selecting it. Generally, we don’t want to do anything if the user cancels the selection. If you still want to perform some action when the user cancels you can do it using the onCancelled property.

PopupMenuButton(
                color: Colors.yellowAccent,
                elevation: 20,
                enabled: true,
                onCanceled: () {
                  //do something
                },
                itemBuilder:(context) => [
                  PopupMenuItem(
                    child: Text("First"),
                    value: "first",
                  ),
                  PopupMenuItem(
                    child: Text("Second"),
                    value: "Second",
                  ),
                ]
            )

Getting Popup Menu Items From a List In Flutter

We have seen how to add Popup menu items to the Popup menu button manually. Now let’s see how to get popup menu items from a list to a popup menu button. In the below example we have defined a list of type int and added three values. Now we will create the popup menu from the list items.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}
class _MyState extends State<MyApp>
{
  String _value = "";
  List<int> _list = [1,2,3];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Popup Menu Button"),
          actions: [
            PopupMenuButton(
                color: Colors.yellowAccent,
                elevation: 20,
                enabled: true,
                onSelected: (value) {
                  setState(() {
                     _value = value;
                  });
                },
                itemBuilder:(context) {
                  return _list.map((int choice) {
                    return PopupMenuItem(
                      value: choice,
                      child: Text("$choice"),
                    );
                  }).toList();
                }
            )
          ],
        ),
        body: Center(
          child: Text(_value),
        ),
      )
    );
  }
}

Output:

flutter popup menu items from list

Let’s create a custom popup menu in the below example. For this, we will create a podo class PopupItem which will hold the data of the popup menu items. We will also create a List _list for holding the objects of the podo class.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}
class PopupItem{
  int value;
  String name;
  PopupItem(this.value, this.name);
}

class _MyState extends State<MyApp>
{
  String _value = "";
  List<PopupItem> _list = [
    PopupItem(1, "First Value"),
    PopupItem(2, "Second Item"),
    PopupItem(3, "Third Item"),
    PopupItem(4, "Fourth Item")
  ];
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Popup Menu Button"),
          actions: [
            PopupMenuButton(
                color: Colors.yellowAccent,
                elevation: 20,
                enabled: true,
                onSelected: (value) {
                  setState(() {
                     _value = value;
                  });
                },
                itemBuilder:(context) {
                  return _list.map((PopupItem choice) {
                    return PopupMenuItem(
                      value: choice,
                      child: Text(choice.name),
                    );
                  }).toList();
                }
            )
          ],
        ),
        body: Center(
          child: Text(_value),
        ),
      )
    );
  }
}

Output:

flutter popup menu items fromcustom list

That’s all about the flutter popup menu button example with its properties in detail. Let’s catch up with some other cool flutter tutorials in the next posts. Have a great day!!

Do share, subscribe, and like my Facebook page if you find this post helpful. Thank you!!

Reference: Flutter Official Documentation.


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.