Flutter AppBar with PopupMenuButton
In Flutter, the AppBar is a fundamental widget for creating a top app bar that contains elements such as the application title, action buttons, and more. One of the most useful elements that can be added to the AppBar is the PopupMenuButton. This widget lets us display a pop-up menu when pressed, offering users options. In this Answer, we will explore how to add a PopupMenuButton in the AppBar.
Constructor and parameters
The PopupMenuButton widget provides a constructor with various parameters to customize its behavior and layout.
const PopupMenuButton<T>({
Key? key,
required PopupMenuItemBuilder<T> itemBuilder,
T? initialValue,
VoidCallback? onOpened,
PopupMenuItemSelected<T>? onSelected,
PopupMenuCanceled? onCanceled,
String? tooltip,
double? elevation,
Color? shadowColor,
Color? surfaceTintColor,
EdgeInsetsGeometry padding = const
EdgeInsets.all(8.0),
Widget? child,
double? splashRadius,
Widget? icon,
double? iconSize,
Offset offset = Offset.zero,
bool enabled = true,
ShapeBorder? shape,
Color? color,
bool? enableFeedback,
BoxConstraints? constraints,
PopupMenuPosition? position,
Clip clipBehavior = Clip.none
})
Let's take a closer look at each parameter and its purpose:
key: A unique identifier for the widget.itemBuilder: A required function that builds the menu items for the popup menu.initialValue: The initial value of the menu.onOpened: A callback function is called when the menu is opened.onSelected: A callback function is called when a menu item is selected.onCanceled: A callback function is called when the menu is dismissed without selecting an item.tooltip: A tooltip message for the button.elevation: The elevation of the menu.shadowColor: The color of the menu's shadow.surfaceTintColor: The color of the menu's surface.padding: The padding around the button.child: The child widget is displayed as the button.splashRadius: The splash radius of the button's ink effect.icon: An optional icon is displayed within the button.iconSize: The size of the icon.offset: The offset of the menu from the button.enabled: Whether the button is enabled or disabled.shape: The shape of the button.color: The color of the button.constraints: The constraints applied to the button.position: The preferred position of the menu.clipBehavior: How the popup menu should be clipped.
The itemBuilder argument must not be null.
Creating an AppBar
Before adding the PopupMenuButton, let's start by creating a simple AppBar with a sample title.
Scaffold(appBar: AppBar(title: Text('Example AppBar'),// Other app content goes here...),
After running the above code, we will be able to see the following output:
Adding a PopupMenuButton
We will add a PopupMenuButton to our AppBar to show additional options when pressed.
String _selectedValue = '1';PopupMenuButton<String>(onSelected: (String value) {setState(() {_selectedValue = value;});},itemBuilder: (BuildContext context) => [PopupMenuItem(value: '1',child: Text('Profile'),),PopupMenuItem(value: '2',child: Text('Setting'),),PopupMenuItem(value: '3',child: Text('Logout'),),],)
Code explanation
Line 1: Declares a variable the
_selectedValueof type String and initializes it with the value'1'which represents the values of thePopupMenuItem.Lines 5–7: The
onSelectedcallback function that is called when a menu item is selected. When an item is selected, the_selectedValueis updated with the selected value using thesetState, triggering a rebuild of the widget.Lines 9–22: The
itemBuilderfunction that defines the content of the popup menu. It returns a list ofPopupMenuItemwidgets, each representing an item in the menu.Lines 10–13: Defines the first menu item with a value of
'1'and a child widget containing the text "Profile".Lines 14–17: Defines the second menu item with a value of
'2'and a child widget containing the text "Setting".Lines 18–21: Defines the third menu item with a value of
'3'and a child widget containing the text "Logout".
After running the above code, we will be able to see the following output:
Code example
We get the following output by putting together the code explained above.
import 'package:flutter/material.dart';
void main() => runApp(AlertDialogExampleApp());
class AlertDialogExampleApp extends StatefulWidget {
@override
_AlertDialogExampleAppState createState() => _AlertDialogExampleAppState();
}
class _AlertDialogExampleAppState extends State<AlertDialogExampleApp> {
String _selectedValue = '1';
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Educative Answer'),
actions: [
PopupMenuButton<String>(
onSelected: (String value) {
setState(() {
_selectedValue = value;
});
},
itemBuilder: (BuildContext context) => [
PopupMenuItem(
value: '1',
child: Text('Profile'),
),
PopupMenuItem(
value: '2',
child: Text('Setting'),
),
PopupMenuItem(
value: '3',
child: Text('Logout'),
),
],
)
],
),
),
);
}
}
Conclusion
The Answer demonstrates how to add a PopupMenuButton to a Flutter AppBar. The AppBar is a crucial widget for creating a top app bar that contains elements like the application title and action buttons. The PopupMenuButton allows us to display a popup menu when pressed, providing users with additional options. By defining the itemBuilder function, we can customize the content of the popup menu with various menu items. When the user selects an option, the _selectedValue variable is updated using the setState, triggering a rebuild of the widget. This simple implementation allows for a versatile and user-friendly AppBar with a PopupMenuButton in Flutter applications.
