Popping Button Class in Flutter Material Library with Example

A popping menu button is a widely used category of widgets that displays additional features to the user. They are generally used in the AppBar of the application for a quick menu option. The user is allowed to select from the provided options or navigate to a different screen based on his choice. To trigger the popup menu, a user has to press the three dots provided in the corner of the screen, and an onselect call back is invoked. They were given the name popup because of the popping functionality provided in Flutter. To use a popup menu button you need to import the material component package for flutter i.e. “package:flutter/material.dart”. 

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}
) 

Parameter

itembuilder:  Popup menu comes with the main parameter. It is called when the button is pressed and creates items to be shown in the menu. 

PopupMenuButton(
                itemBuilder: (context) => [
                    PopupMenuItem(
                        //...
                    ),
                  ],
                ),

child: This is the button’s label

PopupMenuButton(
                child: CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: Text(
                      'Tap',
                    ),
                  ),
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      //...
                    ),
                  ],
                ),

Properties

• color: the background color used for the menu.
• constraints : Optional size constraints for the menu.
• elevation : The z-coordinate at which to place the menu when open. 
• enabled: Whether this popup menu button is interactive. 
• enableFeedback : Whether detected gestures should provide acoustic and/or haptic feedback. 
• hashCode: The hash code for this object. 
• icon: If provided, the icon is used for this button and the button will behave like an IconButton.
• iconSize : If provided, the size of the Icon. 
• initialValue : The value of the menu item that should be highlighted when the menu opens.
• itemBuilder : Called when the button is pressed to create the items to show in the menu.
• key : Controls how one widget replaces another widget in the tree. 
• offset : The offset is applied relative to the initial position set by the position. 
• onCanceled : Called when the user dismisses the popup menu without selecting an item. 
• onSelected : Called when the user selects a value from the popup menu created by this button. 
• padding : defines the distance between the border and text columns.
• position :Whether the popup menu is positioned over or under the popup menu button.
• runtimeType : A representation of the runtime type of the object.
• shape: If provided, the shape used for the menu.
• splashRadius :The splash radius.
• tooltip: Text that describes the action that will occur when the button is pressed.

Methods

• createElement(): Create a StatefulElement to manage the button’s location in the widget tree.
• createState(): Creates the mutable state for this widget at a given location in the tree.
• build(BuildContext context): Describes the part of the user interface
• createElement(): Creates a StatelessElement to manage this widget’s location in the tree.
• debugDescribeChildren(): Returns a list of DiagnosticsNode objects describing this node’s children
• debugFillProperties(): Add additional properties associated with the node
• noSuchMethod(): Invoked when a non-existent method or property is accessed
• toDiagnosticsNode(): Returns a debug representation of the object that is used by debugging tools 
• toString(): A string representation of this object
• toStringDeep(): Returns a string representation of this node and its descendants.
• toStringShallow(): Returns a one-line detailed description of the object
• toStringShort(): A short, textual description of this widget.

Adding Child to the Button

PopupMenuButton(
                child: CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: Text(
                      'Tap',
                    ),
                  ),
                   ),

Output:

Adding Menu Button Icon

PopupMenuButton(
                child: CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: Text(
                      'Tap',
                    ),
                  ),
                itemBuilder: (context) => 
                  
                ]
            )

Output:

Adding Menu to the Button

 PopupMenuButton(
                  child: CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: Text(
                      'Tap',
                    ),
                  ),
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Text("Profile"), // menu setting
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Account"),
                      value: 2,
                    ),
                    PopupMenuItem(
                      child: Text("Settings"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("About GFG"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Go Premium"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Logout"),
                      value: 1,
                    ),
                  ],
                ),

Output:

Adjusting the Color for the Menu 

PopupMenuButton(
                  child: CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: Text(
                      'Tap',
                    ),
                  ),
                  
                  color: Colors.lightGreen, // color setting
                  
                  

                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Text("Profile"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Account"),
                      value: 2,
                    ),
                    PopupMenuItem(
                      child: Text("Settings"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("About GFG"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Go Premium"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Logout"),
                      value: 1,
                    ),
                  ],
                ),

Output:

Changing the Shape of the Menu 

 PopupMenuButton(
                  shape: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.black, width: 5)),
                  child: CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: Text(
                      'Tap',
                    ),
                  ),
                  color: Colors.lightGreen,
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Text("Profile"),
                      value: 1,
                    ),
                    PopupMenuItem( //...
                       ),
                    PopupMenuItem(//...
                     ),
                    PopupMenuItem(//...
                     ),
                    PopupMenuItem(//...
                    ),
                    PopupMenuItem(//...
                     ),
                  ],
                ),

Output:

Changing elevation 

 PopupMenuButton(
                   elevation: 50
                  shape: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.black, width: 5)),
                  child: CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: Text(
                      'Tap',
                    ),
                  ),
                  color: Colors.lightGreen,
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Text("Profile"),
                      value: 1,
                    ),
                    PopupMenuItem( //...
                       ),
                    PopupMenuItem(//...
                     ),
                    PopupMenuItem(//...
                     ),
                    PopupMenuItem(//...
                    ),
                    PopupMenuItem(//...
                     ),
                  ],
                ),

Output:

Let’s understand the above properties with the help of an example

Example

Dart

import 'package:flutter/material.dart';

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

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

  @override
  State<HomeApp> createState() => _HomeAppState();
}

class _HomeAppState extends State<HomeApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.green,
              title: const Text('GeeksforGeeks'),
              actions: [
                PopupMenuButton(
                  elevation: 50,
                  shape: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.black, width: 5)),
                  child: CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: Text(
                      'Tap',
                    ),
                  ),
                  color: Colors.lightGreen,
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Text("Profile"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Account"),
                      value: 2,
                    ),
                    PopupMenuItem(
                      child: Text("Settings"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("About GFG"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Go Premium"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Logout"),
                      value: 1,
                    ),
                  ],
                ),
              ],
            ),
            body: const FirstScreen()));
  }
}

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Center(
      child: RaisedButton(
        color: Colors.green,
        onPressed: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (context) => const NewScreen())),
        child: Text("GFG\'s PopUp Menu Tutorial"),
      ),
    ));
  }
}

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

  @override
  State<NewScreen> createState() => _NewScreenState();
}

class _NewScreenState extends State<NewScreen> {
  TextEditingController textEditingController = TextEditingController();

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('New Screen'),
      ),
      body: Center(child: Text('This is your new screen')),
    );
  }
}

Output: