Flutter – Pop Up Menu
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' ; // main method void main() { // runApp method run the our main app runApp(SimpleAppBarPopupMenuButton()); } class SimpleAppBarPopupMenuButton extends StatelessWidget { const SimpleAppBarPopupMenuButton({Key? key}) : super(key: key); @override Widget build(BuildContext context) { // MaterialApp with // debugShowCheckedModeBanner false and title return MaterialApp( debugShowCheckedModeBanner: false , title: 'AppBar Popup Menu Button' , // scaffold with appbar home: Scaffold( // appbar with text appBar: AppBar( title: Text( 'AppBar Popup Menu Button' ), // body of the scaffold with center text. 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
// popup menu button actions: [ PopupMenuButton< int >( itemBuilder: (context) => [ // popupmenu item 1 PopupMenuItem( value: 1, // row has two child icon and text. child: Row( children: [ Icon(Icons.star), SizedBox( // sized box with width 10 width: 10, ), Text( "Get The App" ) ], ), ), // popupmenu item 2 PopupMenuItem( value: 2, // row has two child icon and text child: Row( children: [ Icon(Icons.chrome_reader_mode), SizedBox( // sized box with width 10 width: 10, ), Text( "About" ) ], ), ), ], offset: Offset(0, 100), color: Colors.grey, elevation: 2, ), ], |
Complete Code
Dart
import 'package:flutter/material.dart' ; // main method void main() { // runapp method run the our main app runApp(SimpleAppBarPopupMenuButton()); } class SimpleAppBarPopupMenuButton extends StatelessWidget { const SimpleAppBarPopupMenuButton({Key? key}) : super(key: key); // definition of the dialog // box when value is selected 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) { // MaterialApp with debugShowCheckedModeBanner // false and title. return MaterialApp( debugShowCheckedModeBanner: false , title: 'AppBar Popup Menu Button' , // scaffold with appbar home: Scaffold( // appbar with title text appBar: AppBar( title: Text( 'AppBar Popup Menu Button' ), // in action widget we have PopupMenuButton actions: [ PopupMenuButton< int >( itemBuilder: (context) => [ // PopupMenuItem 1 PopupMenuItem( value: 1, // row with 2 children child: Row( children: [ Icon(Icons.star), SizedBox( width: 10, ), Text( "Get The App" ) ], ), ), // PopupMenuItem 2 PopupMenuItem( value: 2, // row with two children child: Row( children: [ Icon(Icons.chrome_reader_mode), SizedBox( width: 10, ), Text( "About" ) ], ), ), ], offset: Offset(0, 100), color: Colors.grey, elevation: 2, // on selected we show the dialog box onSelected: (value) { // if value 1 show dialog if (value == 1) { _showDialog(context); // if value 2 show dialog } else if (value == 2) { _showDialog(context); } }, ), ], ), // body with centered text 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
Contact Us