How to show pop up menu where icon button widget is clicked

Question

I have made an alert dialog where user can update their profile details. In that with image container there is icon button widget. What I want is that when user clicks icon button, pop up menu will display with add/remove image option. Here is my code for alert dialog:

showDialog<void>(
context: context,
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
  return AlertDialog(
      title: Text('Edit detail'),
      content: StatefulBuilder(
        builder: (context, setState) {
          return Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                        //image container
                      ),
                      GestureDetector(
                        // the pop up menu displays away from alert dialog
                        onTapDown: (TapDownDetails details) {
                          if (imageData != null) {
                            _showPopupMenu(details.globalPosition);
                            print('choose image/remove image');
                          } else {}
                        },
                        child: IconButton(icon: Icon(Icons.edit),
                            onPressed: () async {}),
                      )
                    ]),
              ],
            ),
          );
        },
      ),
      actions: <Widget>[
    //action button
  )],
  );
},);

Here is the code for popup menu.

void _showPopupMenu(Offset offset) async {
double left = offset.dx;
double top = offset.dy;
await showMenu<String>(
  context: context,
  position: RelativeRect.fromLTRB(left, top, 0.0, 0.0),      //position where want to show the menu on screen
  items: [
    PopupMenuItem<String>(
        child: const Text('Add image'), value: '1'),
    PopupMenuItem<String>(
        child: const Text('Delete image'), value: '2'),
  ],
  elevation: 8.0,
)
    .then<void>((String itemSelected) {

  if (itemSelected == null) return;

  if(itemSelected == "1"){
  } else {
  }

});}

The menu displays outside the alert dialog. I have seen similar post with gesture detector but I can't seem to understand my mistake. Please help me and any improvements are welcome. Thanks in advance.

Answer 1

If you'r using GestureDetector, there's a easy way i just did, Just put a GestureDetector inside another one, then set the onTap action if that's your case on both GestureDetector's, with the diference that in one you are gonna put an action, an in the other one you can just leave it empty, just like this.

GestureDetector(
    onTap: () { //The Gesture you dont want to afect the rest
      Navigator.pop(context);
    },
    child: Container(
      color: Colors.transparent,
      child:GestureDetector(
            onTap: () {}, //This way is not going to afect the inside widget
            child: Container() //your widget
            )
          )
        )

Answer 2

You can do it using the keys of AlertDialog and IconButton as the following

 GlobalKey cKey = new GlobalKey();
 GlobalKey pKey = new GlobalKey();

  void _showPopupMenu() async {
    await showMenu<String>(
      context: context,
      position: RelativeRect.fromRect(_getWidgetGlobalRect(pKey),_getWidgetGlobalRect(cKey)),
      items: [
        PopupMenuItem<String>(child: const Text('Add image'), value: '1'),
        PopupMenuItem<String>(child: const Text('Delete image'), value: '2'),
      ],
      elevation: 8.0,
    ).then<void>((String itemSelected) {
      if (itemSelected == null) return;

      if (itemSelected == "1") {
      } else {}
    });
  }

  Rect _getWidgetGlobalRect(GlobalKey key) {
    RenderBox renderBox = key.currentContext.findRenderObject();
    var offset = renderBox.localToGlobal(Offset.zero);
    return Rect.fromLTWH(
        offset.dx, offset.dy, renderBox.size.width, renderBox.size.height);
  }

  void showDialig() {
    showDialog<void>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return AlertDialog(
          key: cKey,
          title: Text('Edit detail'),
          content: StatefulBuilder(
            builder: (context, setState) {
              return Container(
                child: Column(

                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Stack(alignment: Alignment.topRight, children: [

                      Container(
                          //image container
                          ),
                      GestureDetector(
                        // the pop up menu displays away from alert dialog
                        onTapDown: (TapDownDetails details) {
                          _showPopupMenu();
                        },
                        child: IconButton(
                            key: pKey,
                            icon: Icon(Icons.edit),
                            onPressed: () async {}),
                      )
                    ]),
                  ],
                ),
              );
            },
          ),
          actions: <Widget>[
            //action button
          ],
        );
      },
    );
  }