Pop Up Menu එබූ විට මෙනුවක් පෙන්වන අතර අයිතමයක් තෝරාගෙන ඇති නිසා මෙනුව ඉවත දැමූ විට onSelected අමතන්න. onSelected වෙත ලබා දුන් අගය තෝරාගත් මෙනු අයිතමයේ අගයයි. අපි Application එකකට අවධානය යොමු කළොත්, අපිට හැම Application එකකම Pop Up Menu බොත්තමක් තිබෙන බව පෙනෙනවා එය යම් කාර්යයක් ඉටු කරයි.
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!"),
),
),
);
}
}
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
We are developing Mobile application and Web application for more details visit our web site www.appslanka.lk
kiruba11@gmail.com Reply
Thanks you.