Can popupmenubutton return Dialog?

Question

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')),
                      ],);}

}

john · Accepted Answer · 2022-10-16T16:29:47.727

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)
                                })
                              ),
                            ];
                          },
                        ),

I completely forgot to do this, damn, I will do this and let you know how it went — alphacruze, Oct 16 '22 at 16:36
@alphacruze happy to help. consider upvoting if you think it helped you. and can hit the checkmark to marked it as answered. — john, Oct 16 '22 at 17:14

Can popupmenubutton return Dialog?

1 Answers1