appbar popupmenubutton

Quick Tip – AppBar with PopupMenuButton in Flutter

What is the Flutter AppBar

In Flutter, the AppBar is a widget that is used to display important information, such as the app’s title and action items, at the top of the app’s screen. It is usually placed at the top of the app’s Scaffold, and typically includes a leading widget (such as a menu button), a title widget, and one or more actions widgets (such as icons for sharing or searching). The AppBar can also include a bottom widget, which is usually used to display a tab bar.

Here is an example of how you can use an AppBar with only the title parameter:

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  // Other app content goes here...
)

This will create an AppBar with only a title, and no other buttons or icons. You can then add other things to the AppBar, such as a menu button or search button, by using the leading, actions, and bottom parameters.

What is the Flutter PopupMenuButton

In Flutter, a PopupMenuButton is a button that shows a menu when pressed. The menu is usually made up of a list of options that the user can choose from. When the user selects an option, the PopupMenuButton widget will call a callback function that you provide.

Here’s an example of how to use PopupMenuButton in a Flutter app:

String _selectedValue = 'item1';

PopupMenuButton<String>(
  onSelected: (String value) {
    setState(() {
      _selectedValue = value;
    });
  },
  itemBuilder: (BuildContext context) => [
    PopupMenuItem(
      value: 'item1',
      child: Text('Item 1'),
    ),
    PopupMenuItem(
      value: 'item2',
      child: Text('Item 2'),
    ),
  ],
)

This will create a button with an Icons.more_vert icon that, when clicked, shows a popup menu with two items: “Item 1” and “Item 2”. When the user selects one of the items, the onSelected callback will be called with the corresponding value.

Here is an example of how you might use a PopupMenuButton in a Flutter app:

PopupMenuButton<String>(
  onSelected: (value) {
    // Do something with the selected value
  },
  itemBuilder: (BuildContext context) {
    return ['Option 1', 'Option 2', 'Option 3'].map((String choice) {
      return PopupMenuItem<String>(
        value: choice,
        child: Text(choice),
      );
    }).toList();
  },
)

This will create a button with an Icons.more_vert icon. When the button is pressed, it will show a menu with three options: “Option 1”, “Option 2”, and “Option 3”. When the user selects an option, the onSelected callback will be called with the value of the selected option.

Icons.more_vert

Where to use Flutter PopupMenuButton

In a Flutter app, a PopupMenuButton can be used anywhere you would like to display a button that shows a menu when pressed. Some common places to use a PopupMenuButton include:

  • In the AppBar, as an action item
  • In a ListTile, as a secondary action
  • In a Card, as a way to show additional options
  • In any other custom widget, as a way to provide a menu of options to the user

Here is an example of a PopupMenuButton used in a ListTile:

ListTile(
  title: Text('Item'),
  trailing: PopupMenuButton<String>(
    offset: Offset(0, 50),
    onSelected: (value) {
      // Do something with the selected value
    },
    itemBuilder: (BuildContext context) {
      return ['Option 1', 'Option 2', 'Option 3'].map((String choice) {
        return PopupMenuItem<String>(
          value: choice,
          child: Text(choice),
        );
      }).toList();
    },
  ),
)
flutter popupmenubutton listtile

This will create a ListTile with a title and a button with a downward-facing arrow icon. When the button is pressed, it will show a menu with three options: “Option 1”, “Option 2”, and “Option 3”. When the user selects an option, the onSelected callback will be called with the value of the selected option.

Flutter AppBar with PopupMenuButton

In Flutter, the AppBar is a top app bar that is usually used as a top-level header in a Scaffold widget. It can display the app’s title, icon, and actions, as well as display a leading widget, such as a NavigationDrawer hamburger menu.

AppBar(
          title: Text('My App'),
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              // open the navigation drawer
            },
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                // open the search screen
              },
            ),
          ],
        ),

To create an AppBar with a PopupMenuButton in Flutter, you can use the actions property of the AppBar widget to define a list of widgets, and include a PopupMenuButton widget in that list.

Here’s an example of how you can do this:

String _selectedValue = 'item1';

AppBar(
        title: Text('My App'),
        actions: [
          PopupMenuButton(
            onSelected: (value) {
              // Handle the selected value
            },
            itemBuilder: (context) => [
              PopupMenuItem(
                value: 'item1',
                child: Text('Item 1'),
              ),
              PopupMenuItem(
                value: 'item2',
                child: Text('Item 2'),
              ),
            ],
          ),
        ],
      ),
flutter popupmenubutton example1

This will create an AppBar with a PopupMenuButton in the top right corner. When the button is tapped, it will display a list of menu items that the user can choose from.

You can customize the PopupMenuButton by providing your own list of PopupMenuItem widgets and handling the selected value in the onSelected callback.

appBar: AppBar(
        centerTitle: true,
        title: Text("App Dropdown Menu"),
        actions: [
          //list if widget in appbar actions
          PopupMenuButton(
            icon: Icon(Icons.menu),  //don't specify icon if you want 3 dot menu
            color: Colors.blue,
            itemBuilder: (context) => [
              PopupMenuItem<int>(
                value: 0,
                child: Text("Setting",style: TextStyle(color: Colors.white),),
              ),
              PopupMenuItem<int>(
                  value: 1, child: Text("Privacy Policy"),
              ),
              PopupMenuItem<int>(
                  value: 2,
                  child: Row(
                    children: [
                      Icon(
                        Icons.logout,
                        color: Colors.yellow,
                      ),
                      const SizedBox(
                        width: 7,
                      ),
                      Text("Logout")
                    ],
                  )),
            ],
            onSelected: (item) => {print(item)},
          ),
        ],
      ),



//outside of build

void SelectedItem(BuildContext context, item) {
    switch (item) {
      case 0:
        print("Settings");
        // Navigator.of(context)
        //     .push(MaterialPageRoute(builder: (context) => SettingPage()));
        break;
      case 1:
        print("Privacy Clicked");
        break;
      case 2:
        print("User Logged out");
        // Navigator.of(context).pushAndRemoveUntil(
        //     MaterialPageRoute(builder: (context) => LoginPage()),
        //         (route) => false);
        break;
    }
  }
appbar popupmenubutton

Flutter PopupMenuButton Properties

Here is a list of the properties that you can use to customize the appearance and behavior of a PopupMenuButton in Flutter:

  • icon: The icon to display for the button.
  • offset: The offset to apply to the PopupMenuButton‘s position.
  • padding: The padding to apply to the PopupMenuButton.
  • itemBuilder: A callback that builds the list of items to show in the menu.
  • initialValue: The value of the initially selected item.
  • onSelected: A callback that is called when the user selects an item from the menu.
  • onCanceled: A callback that is called when the menu is dismissed.
  • tooltip: A string to show in a tooltip when the button is long-pressed.
  • elevation: The z-coordinate at which to place the menu when open.
  • shape: The shape of the menu.
  • color: The background color of the menu.
  • enabled: Whether the button is enabled.

For example:

PopupMenuButton<int>(
icon: Icon(Icons.more_vert),
offset: Offset(0, 50),
padding: EdgeInsets.zero,
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Text('Option 1'),
),
PopupMenuItem(
value: 2,
child: Text('Option 2'),
),
],
initialValue: 1,
onSelected: (value) {
// Handle the selection
},
onCanceled: () {
// Handle the cancellation
},
tooltip: 'Show menu',
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
color: Colors.grey[200],
enabled: true,
)
flutter popupmenubutton customized

Change Flutter PopupMenuButton Icon

To change the icon for the PopupMenuButton in Flutter, you can use the icon property of the PopupMenuButton widget.

Here is an example of how you can use the icon property to change the icon for a PopupMenuButton:

PopupMenuButton<String>(
  offset: Offset(20, 50),
  icon: Icon(Icons.arrow_circle_down_outlined, size: 50,), // change the icon for the PopupMenuButton
  onSelected: (value) {
    // handle value selection
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      value: 'item1',
      child: Text('Item 1'),
    ),
    PopupMenuItem(
      value: 'item2',
      child: Text('Item 2'),
    ),
  ],
)
flutter popupmenubutton custom icon

This will create a PopupMenuButton with the specified icon. You can use any icon from Flutter’s built-in Icons collection or you can use a custom icon by creating an ImageIcon widget.

Add divider to PopupMenuButton in Flutter

In Flutter, the PopupMenuDivider widget is used to add dividers between items in a PopupMenuButton. To add a divider between items in a PopupMenuButton, you can include a PopupMenuDivider widget as an item in the list of options passed to the PopupMenuButton.

Here is an example of how you can use PopupMenuDivider to add dividers between items in a PopupMenuButton:

PopupMenuButton<String>(
  offset: Offset(20, 50),
  onSelected: (value) {
    // handle value selection
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      value: 'item1',
      child: Text('Item 1'),
    ),
    PopupMenuItem(
      value: 'item2',
      child: Text('Item 2'),
    ),
    PopupMenuDivider(), // add a divider between items
    PopupMenuItem(
      value: 'item3',
      child: Text('Item 3'),
    ),
  ],
)
flutter popupmenubutton divider

This will create a PopupMenuButton with three items, with a divider between the first two items.

Add icons to the PopupMenuButton items in Flutter

To add icons to the items in a PopupMenuButton in Flutter, you can use add the Row widget the PopupMenuItem widget.

Here is an example of how you can use the leading and trailing properties to add icons to the items in a PopupMenuButton:

PopupMenuButton<String>(
  offset: Offset(20, 50),
  onSelected: (value) {
    // handle value selection
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      value: 'item1',
      child: Row(
        children: [
          Icon(Icons.favorite), // add an icon to the left of the item
          SizedBox(width: 8), // add some spacing between the icon and the text
          Text('Item 1'),
        ],
      ),
    ),
    PopupMenuItem(
      value: 'item2',
      child: Row(
        children: [
          Text('Item 2'),
          SizedBox(width: 8), // add some spacing between the text and the icon
          Icon(Icons.share), // add an icon to the right of the item
        ],
      ),
    ),
  ],
)
flutter popupmenubutton text icon

This will create a PopupMenuButton with two items, each of which has an icon next to the text. The first item has the icon on the left, while the second item has the icon on the right.

Nested PopupMenuButton in Flutter

To create a PopupMenuButton that displays a nested hierarchy of options in Flutter, you can use the PopupMenuButton widget in combination with the PopupMenuItem widget.

Here is an example of how you can create a PopupMenuButton with a nested hierarchy of options:

PopupMenuButton<String>(
  offset: Offset(20, 50),
  onSelected: (value) {
    // handle value selection
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      value: 'item1',
      child: Text('Item 1'),
    ),
    PopupMenuItem(
      value: 'item2',
      child: Text('Item 2'),
    ),
    PopupMenuItem(
      value: 'submenu',
      child: PopupMenuButton<String>(
        offset: Offset(20, 50),
        onSelected: (value) {
          // handle value selection
        },
        itemBuilder: (context) => [
          PopupMenuItem(
            value: 'subitem1',
            child: Text('Subitem 1'),
          ),
          PopupMenuItem(
            value: 'subitem2',
            child: Text('Subitem 2'),
          ),
        ],
      ),
    ),
  ],
)
flutter popupmenubutton nested

This will create a PopupMenuButton with three items: “Item 1”, “Item 2”, and “Submenu”. The “Submenu” item is itself a PopupMenuButton, which will display a nested list of options when selected.

Flutter PopupMenuButton with Share, Save and Favourite actions

To add icons to the items in the PopupMenuButton in the above example, you can add the Row widget the PopupMenuItem widget.

Here is an updated version of the example that includes icons for each of the items:

PopupMenuButton<String>(
  icon: Icon(Icons.more_vert),
  offset: Offset(20, 50),
  onSelected: (value) {
    // handle value selection
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      value: 'share',
      child: Row(
        children: [
          Icon(Icons.share), // add an icon to the left of the item
          SizedBox(width: 8), // add some spacing between the icon and the text
          Text('Share'),
        ],
      ),
    ),
    PopupMenuItem(
      value: 'save',
      child: Row(
        children: [
          Icon(Icons.save), // add an icon to the left of the item
          SizedBox(width: 8), // add some spacing between the icon and the text
          Text('Save'),
        ],
      ),
    ),
    PopupMenuItem(
      value: 'favorite',
      child: Row(
        children: [
          Icon(Icons.favorite), // add an icon to the left of the item
          SizedBox(width: 8), // add some spacing between the icon and the text
          Text('Favorite'),
        ],
      ),
    ),
  ],
)
flutter popupmenubutton share save favorite

This will create a PopupMenuButton with three items, each of which has an icon next to the text. The icons will be displayed to the left of the text for each item.

You can read more about AppBar in this post: Flutter Basics – How to Customize AppBar in Flutter