3

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>(
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Update details'),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
      content: StatefulBuilder(
        builder: (context, setState) { return Container(
          width: 400,
          child: Form(
            key: _formKey,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                          width: 100.0,
                          height: 100.0,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  fit: BoxFit.cover,
                                  colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.darken),
                                  image: data != null ? MemoryImage(data) : AssetImage("web/icons/contactsDefaultImage.png")
                              )
                          )
                      ),
                      IconButton(icon: Icon(Icons.edit), onPressed: () async {
                         //display option here
                         _showPopupMenu();
                      })
                    ]),
                Container(
                  child: TextFormField(
                    decoration: InputDecoration(
                        labelText: 'name'
                    ),
                  ),
                ),
                TextFormField(
                  decoration: InputDecoration(
                      labelText: 'email'
                  ),
                ),
              ],
            ),
          ),
        );},
      ),
      actions: <Widget>[
        FlatButton(
          child: Text('Cancel'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(child: Text('Save'),
          onPressed: () {
          // save
          },
        )
      ],
    );
  },
);

I tried to user showMenu for that. But as the position has to be hard-coded I don't was to use it. what I tried:

void _showPopupMenu() async {
await showMenu(
  context: context,
  position: RelativeRect.fromLTRB(100, 100, 100, 100),
  items: [
    PopupMenuItem(
      child: Text("add"),
    ),
    PopupMenuItem(
      child: Text("remove"),
    ),
  ],
  elevation: 8.0,
);

}

Now, what i want to know is how can i display it where the icon-button is tapped (without hard-coding the value). And is there another way to do it .i.e without using showMenu.

3
  • could you elaborate more on what is you want? post your try Jul 25, 2020 at 8:23
  • Sorry, I have updated the question Jul 25, 2020 at 9:25
  • Did you find a solution?
    – spamup
    Sep 26, 2020 at 16:26

4 Answers 4

14

You can write a method like this and call it on your icon button's onPressed

showPopupMenu(){
    showMenu<String>(
      context: context,
      position: RelativeRect.fromLTRB(25.0, 25.0, 0.0, 0.0),  //position where you want to show the menu on screen
      items: [
        PopupMenuItem<String>(
            child: const Text('menu option 1'), value: '1'),
        PopupMenuItem<String>(
            child: const Text('menu option 2'), value: '2'),
        PopupMenuItem<String>(
            child: const Text('menu option 3'), value: '3'),
      ],
      elevation: 8.0,
    )
    .then<void>((String itemSelected) {

      if (itemSelected == null) return;

      if(itemSelected == "1"){
        //code here
      }else if(itemSelected == "2"){
        //code here
      }else{
        //code here
      }

    });
}

Edit: (to show menu at the position where user tapped)

We can have a method like so -

void showPopUpMenuAtTap(BuildContext context, TapDownDetails details) {
  showMenu(
    context: context,
    position: RelativeRect.fromLTRB(
      details.globalPosition.dx,
      details.globalPosition.dy,
      details.globalPosition.dx,
      details.globalPosition.dy,
    ),
    // other code as above
  );
}

and use it with GestureDetector like so -

GestureDetector(
  child: const Icon(Icons.menu),
  onTapDown: (details) => showPopUpMenuAtPosition(context, details),
);
7
  • tnks. But please see the question again Jul 25, 2020 at 8:59
  • you need to call the method on onPressed like this.. onPressed: _showPopupMenu Jul 25, 2020 at 9:04
  • I have done that but as the value for position is hardcoded I don'nt want to use it. Jul 25, 2020 at 9:23
  • Also can i display it where i tapped the button without hardcoding the postion Jul 25, 2020 at 9:24
  • are you found any solution about position @RahulSingh Sep 23, 2021 at 11:10
4

Solution if you wish to re-use your button and not a Gesture detector:

Create a key and assign your button the key. Then:

TextButton(
          key: _accKey,
          text: "Account",
          onPressed: () {
            final RenderBox renderBox =
                _accKey.currentContext?.findRenderObject() as RenderBox;
            final Size size = renderBox.size;
            final Offset offset = renderBox.localToGlobal(Offset.zero);

            showMenu(
                context: context,
                position: RelativeRect.fromLTRB(
                    offset.dx,
                    offset.dy + size.height,
                    offset.dx + size.width,
                    offset.dy + size.height),
                items: [
                  PopupMenuItem<String>(
                      child: const Text('menu option 1'), value: '1'),
                  PopupMenuItem<String>(
                      child: const Text('menu option 2'), value: '2'),
                  PopupMenuItem<String>(
                      child: const Text('menu option 3'), value: '3'),
                ]);
          }),
2
  • 2
    You can create key GlobalKey _accKey = GlobalKey(); Apr 27, 2022 at 13:08
  • As for computing Renderbox size using GlobalKey is discouraged, how to achieve with BuildContext. By the way, the solution works correctly. Thanks Feb 13 at 13:45
3

There are a lot of options you can choose:

You can use:

  1. Banner
  2. Card
  3. Dialog
  4. PopupMenuButton
  5. Or even BottomSheet

I hope it will help

1
  • tnks for the suggestion but i have updated my question please review it. Jul 25, 2020 at 8:58
1

what you are looking to is showdialog and alertdialog.

Void<String> testdialog(BuildContext context) {
return showDialog(
    barrierDismissible: false,
    context: context,
    builder: (context) {
      return StatefulBuilder(builder: (context, setState) {
        return AlertDialog(
            title: ....
1
  • tnks for the answer. I have updated my question pls see it again. I can not use alert dialog. Jul 25, 2020 at 8:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.