Flutter PopupMenu | RRTutors

Flutter Popup Menu

Why use this PopupMenu? Because most message interfaces have a setting option in the upper right corner, and this option is most commonly implemented through PopupMenu. 


Look at the effect map

Popup Menu


class PopupWidget extends StatefulWidget{


 State<StatefulWidget> createState() {

   // TODO: implement createState

   return PopupWidgetState();





class PopupWidgetState extends State<PopupWidget>


 int _value=1;



 Widget build(BuildContext context) {

   // TODO: implement build

   return Scaffold(

     appBar: AppBar(title: Text("Popup Window"),backgroundColor: Colors.pink,


     actions: <Widget>[



     body: Container(

       child: Center(

         child: Container(

             decoration:ShapeDecoration(shape: OutlineInputBorder(



             width: 200,

             height: 40,

           child: Center(child: Text("Value selected $_value",style: TextStyle(color: Colors.pink,fontSize: 20),)),






 Widget _NomalPopMenu() {

   return new PopupMenuButton<int>(

       itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[

         new PopupMenuItem<int>(

             value: 1, child: new Text('Item One')),

         new PopupMenuItem<int>(

             value: 2, child: new Text('Item Two')),

         new PopupMenuItem<int>(

             value: 3, child: new Text('Item Three')),

         new PopupMenuItem<int>(

             value: 4, child: new Text('I am Item Four'))


       onSelected: (int value) {

         setState(() { _value = value; });