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:
Recommended Articles