flutterdialogpopupmenu

Can popupmenubutton return Dialog?


I have been trying to make a dialog popup when pressing a popupmenubutton, however it does not seem to work, I run the app in debug mode through chrome as my Laptop is unable to run in debug mode through androud studio emulator.

 child: Scaffold(
    resizeToAvoidBottomInset: true,
    backgroundColor: Color.fromRGBO(31, 31, 47, 1),
    appBar: AppBar(
        actions: [
          PopupMenuButton<String>(
            padding: EdgeInsets.all(0),
            onSelected: (value) {
              print(value);
            },
            itemBuilder: (BuildContext context) {
              return [
                PopupMenuItem(
                  child: Text('Cancel'),
                  onTap: () {BackdropFilter(
                 filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
                child: Dialog(
                 shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
                 backgroundColor: Color(Color.getAlphaFromOpacity(0.5)),
                  child: _dialogContent(),
                  )
               );
                  },
                ),
                ];
            },
          ),
        ], ),


  Widget _dialogContent() {return SimpleDialog(
title: Text('Enter Cancel Code'),
                     children: <Widget>[
                    //  TextFormField()
                    ElevatedButton(
              onPressed: () => Navigator.pop(context, false),
              child: Text('Okay')),
                      ],);}

}


Solution

  • the reason why I doesn't work is because you didn't specify a value to your popupMenuItem thats why your onSelected property dont know what to do when you tapped on an item, so to make it work you need to do like so

          PopupMenuButton<int>(
                      padding: const EdgeInsets.all(0),
                      onSelected: (value) {
                        if (value == 0) {
                          showDialog(context: context, builder: (context) => _dialogContent,);
                        }
                      },
                      itemBuilder: (BuildContext context) {
                        return [
                          const PopupMenuItem<int>(
                            value: 0,
                            child: Text('Show dialog'),
                          ),
                        ];
                      },
                    ),

    :

    if you want to use the onTap property of the PopupMenuItem, you need to delay your showDialog because when you call the onTap, it is triggering the Navigator.of(context).pop(). So it looks like nothing is happening when you try to show dialog because its being popped immediately. So to make it work, you need to do it like so:

                PopupMenuButton<int>(
                              padding: const EdgeInsets.all(0),
                              itemBuilder: (BuildContext context) {
                                return [
                                  const PopupMenuItem<int>(
                                    value: 0,
                                    child: Text('Show dialog'),
                                    onTap: ()=> Future.delayed(Duration(milliseconds:1),(){
                                    showDialog(context:context, builder: (context)=> _dialogContent)
                                    })
                                  ),
                                ];
                              },
                            ),