Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - popup menu isn't closed after selecting an item

Tags:

flutter

I am experimenting with Flutter and having a problem with PopupMenuButton. After selecting an item in the menu I show a new screen without the menu, and after I navigate back the popup menu is still open - as shown in the following screenshots:

Popup menu Edit profile

After navigating back from the edit profile screen (2nd screenshot) to the account screen (1st screenshot) the pop up menu is still open. I would like it to be closed. The relevant code where I create the popup menu inside an appbar:

      actions: <Widget>[
    new PopupMenuButton(
      itemBuilder: (BuildContext context) {
        return <PopupMenuEntry>[
          new AppBarMenuItem("Edit profile", () => Navigator.pushNamed(context, Routes.editProfile)).build(context),
          new AppBarMenuItem("Option 1", () => {}).build(context),
          new AppBarMenuItem("Option 2", () => {}).build(context),
          new AppBarMenuItem("Option 3", () => {}).build(context),
          new AppBarMenuItem("Option 4", () => {}).build(context),
        ];
      },
    ),
  ],

And the AppBarMenuItem:

new PopupMenuItem(
  child: new InkWell(
    child: new Text(_label),
    onTap: _onTap,
)

How can I make sure that the popup menu gets closed after selecting an item? It looks like if I just use PopupMenuItem in my PopupMenuButton and navigate to the new screen in the onSelected function the menu closes properly. But when I use the onTap function of InkWell it doesn't close anymore.

like image 879
Egemen Avatar asked Jul 16 '18 12:07

Egemen


3 Answers

Just use pop inside your onTap function Navigator.pop(context, "$popupValue");

PopupMenuItem<String>(
    value: "Replay Game",
    child: ListTile(
        leading: Icon(Icons.replay,
            color: theme.actionButtonColor),
        title: Text("Replay Game"),
        onTap: () {
            Navigator.pop(context, "Replay Game");
            showDialog(
                context: context,
                builder: (context) {
                    return AlertDialog(
                        content: Text("Clear input and replay game?"),
                        actions: <Widget>[
                            FlatButton(
                                onPressed: () => Navigator.pop(context),
                                child: Text("No"),
                                textColor: theme.alterDialogActionColor,
                            ),
                            FlatButton(
                                onPressed: () {
                                    store.dispatch(ReplayAction(timerBloc, varBloc.fireAnalytics));
                                    Navigator.pop(context);
                                },
                                child: Text("Yes"),
                                textColor: theme.alterDialogActionColor,
                            ),
                        ],
                    );
                });
        },
    ),
)
like image 103
Color Avatar answered Sep 25 '22 02:09

Color


as stated in the documentation the popup menu should automatically close when user selects an option from the popup menu item. Using InkWell onTap wont automatically close the popup menu rather directly use the popup menu item to automatically close the popup menu when an item is selected from the popupMenuList Make sure that the value property of the PopupMenuItem is not null otherwise the onSelected function will not be called when the PopupMenuItem is selected

like image 29
Aman Malhotra Avatar answered Sep 26 '22 02:09

Aman Malhotra


I had this same issue and here is my solution. Your PopUpMenuButton() is not utilizing the onSelected property. The onSelected property will properly close your PopUpMenuButton. It currently is not because the onTap property of your AppBarMenuItem is taking over that job.
Also, I created a list of PopUpMenuItem, instead of PopUpMenuEntry, not sure if that makes a difference. But for each of my PopUpMenuItem, I also assigned the value property to each, so that the onSelected would communicate to the PopUpMenuButton() which item was tapped.

Something like this:

PopupMenuButton(
                onSelected: (selection) {
                  switch (selection) {
                    case 1:
                      ... do stuff...
                      break;
                    case 2:
                      ... break stuff...
                      );
                      break;
                  }
                },

Where case 1, case 2, etc refer to the value property I assigned to the PopUpMenuItem().

like image 41
Codered Avatar answered Sep 24 '22 02:09

Codered