Flutter – Pop Up Menu
Last Updated :
09 May, 2022
Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. If we focus on an Application, We can see in every Application there is a Pop Up Menu button that will do some work. So in this article, we will implement the pop-up menu button. A sample video is given below to get an idea about what we are going to do in this article.
Step by Step Implementation
Step 1: Create an empty project.
Step 2: Now add the material package.
Dart
import 'package:flutter/material.dart' ;
|
Step 3: Call the main method, In the main method again run the runApp that will run our application.
Dart
void main() {
runApp(SimpleAppBarPopupMenuButton());
}
|
Step 4: Now create a class SimpleAppBarPopupMenuButton(). That returns the MaterialApp and In-home property Use Scaffold with AppBar and centered Text() widget.
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp(SimpleAppBarPopupMenuButton());
}
class SimpleAppBarPopupMenuButton extends StatelessWidget {
const SimpleAppBarPopupMenuButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
title: 'AppBar Popup Menu Button' ,
home: Scaffold(
appBar: AppBar(
title: Text( 'AppBar Popup Menu Button' ),
body: Center(
child: Text( "Press the 3 Point Button Up!" ),
),
),
);
}
}
|
Step 5: Now in AppBar we have to use actions widgets where we will implement the popup menu button.
Dart
actions: [
PopupMenuButton< int >(
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Row(
children: [
Icon(Icons.star),
SizedBox(
width: 10,
),
Text( "Get The App" )
],
),
),
PopupMenuItem(
value: 2,
child: Row(
children: [
Icon(Icons.chrome_reader_mode),
SizedBox(
width: 10,
),
Text( "About" )
],
),
),
],
offset: Offset(0, 100),
color: Colors.grey,
elevation: 2,
),
],
|
Complete Code
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp(SimpleAppBarPopupMenuButton());
}
class SimpleAppBarPopupMenuButton extends StatelessWidget {
const SimpleAppBarPopupMenuButton({Key? key}) : super(key: key);
void _showDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text( "Alert!!" ),
content: Text( "You are awesome!" ),
actions: [
MaterialButton(
child: Text( "OK" ),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
title: 'AppBar Popup Menu Button' ,
home: Scaffold(
appBar: AppBar(
title: Text( 'AppBar Popup Menu Button' ),
actions: [
PopupMenuButton< int >(
itemBuilder: (context) => [
PopupMenuItem(
value: 1,
child: Row(
children: [
Icon(Icons.star),
SizedBox(
width: 10,
),
Text( "Get The App" )
],
),
),
PopupMenuItem(
value: 2,
child: Row(
children: [
Icon(Icons.chrome_reader_mode),
SizedBox(
width: 10,
),
Text( "About" )
],
),
),
],
offset: Offset(0, 100),
color: Colors.grey,
elevation: 2,
onSelected: (value) {
if (value == 1) {
_showDialog(context);
} else if (value == 2) {
_showDialog(context);
}
},
),
],
),
body: Center(
child: Text( "Press the 3 Point Button Up!" ),
),
),
);
}
}
|
Output:
Code Explanation
- Main Is The Principal Method Used To Run SimpleAppBarPopupMenuButton Class When The Page Is Loaded
- Creating Class SimpleAppBarPopupMenuButton, Stateless Due To Just Showing Popup Menu Button (It Will Not Change)
- As Flutter Is Based On Widgets, We Need To Create One
- Creating A Material App That Takes Scaffold Allowing Us To Use AppBar And Body
- As An AppBar It Has An Simple Title
- AppBar Having actions (floating Items To The Right), Taking PopupMenuButton Taking PopupMenuItem You Can Add Much As You Want
- Each PopupMenuItem Has Its Value Used To Do Action In OnSelected Method, And Child Taking Any Widget You Need, Here A Row Having Icon And Text
- OffSet Set The Drop Down Not On Tap Position
- color Set PopupMenu Background Color To Grey
- As An Body, It Takes Centered Text
Share your thoughts in the comments
Please Login to comment...