Flutter - Navigate in PopupMenuButton onTap does not work

Question

I used to use IconButton's onpressed to navigate to the settings page from my AppBar which worked. Now I am trying to trigger the navigation from a PopupMenuItem's onTap but the page does not navigate. Both widgets are in the same hierarchy and I can't find out the reason for the different behavior. No error is thrown.

Here is the code of my appBar which contains the actions:

  Widget build(BuildContext ctx) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: const Text('MyApp'),
          actions: [
            PopupMenuButton(
              itemBuilder: (context) => [
// THE NAVIGATION IN onTap DOES NOT WORK
                PopupMenuItem(
                  child: Text(AppLocalizations.of(context).settings),
                  onTap: () => _openSettings(ctx),
                ),
              ],
              icon: Icon(
                Icons.settings,
              ),
            ),
// THIS WORKS
            IconButton(onPressed: () => _openSettings(ctx), 
                            icon: Icon(Icons.settings))
          ],
        ),
        body: Text("")  
      ),
    );
  }

And here the function whose navigation call only works inside IconButton's onpressed. I could confirm that the function was triggered in both cases though:

  Future<void> _openSettings(BuildContext ctx) async {
    print('settings');
    await  Navigator.push(
        ctx, MaterialPageRoute(builder: (ctx) => SettingsPage()));
    print('settings completed');
  }

I'd appreciate any help!

Workaround: I have not found out what the issue with onTap navigation is but now I am just using onSelected which results in the same UX and works:

Widget build(BuildContext ctx) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: const Text('MyApp'),
          actions: [
            PopupMenuButton(
              onSelected: (result){
                switch(result){
                  case 0: _openSettings(); break;
                  case 1: _signOut(); break;
                }
              },
              itemBuilder: (context) => [
                PopupMenuItem(
                  child: Text(AppLocalizations.of(context).settings),
                value: 0
                ),
                PopupMenuItem(
                  child: Text(AppLocalizations.of(context).logout),
                  value: 1
                )
              ],
              icon: Icon(
                Icons.settings,
              ),
            )
          ],
        )
      )
    );
 }

Can you try passing the `context` from the `itemBuilder` into `_openSettings()`? So you can pass the correct `context` to the Navigator — TheMisplacedMechEngineer, Oct 21 '21 at 19:54

score 6 · Answer 1 · answered Jul 05 '22 at 23:20

I also faced this problem and solved it as follows:

First you must remove onTap or make its value null.
Second, give a value to the value parameter in PopupMenuItem. You can give any type like int or String or whatever you want since value is dynamic.
then, pass a function to the onSelected parameter in the PopupMenuButton.
Inside the onSelected function you can choose what you want to do when any of the menu items is pressed.

In your case, your code should be like this

  PopupMenuButton(
    itemBuilder: (context) => [
      PopupMenuItem(
        child: Text(...),
        value: 'settings',
      ),
    ],
    onSelected: (value){
      if(value == 'settings'){
        _openSettings(ctx);
      }
    },
  ),

score 2 · Answer 2 · answered Dec 16 '21 at 22:02

2

I had the same issue (except: I am using GetX for Navigation.

I think this happens because flutter is closing the PopupMenuButton automatically and because navigation happens to fast, it closes the new route instead of the menuButton.

I solved it like this in the navigating method:

void edit() async {
  await Future.delayed(const Duration(milliseconds: 10));
  Get.toNamed('/new/route'); // same like Navigator.of(context).pushNamed()
}

It's not beautiful... i know. But it works XD

answered Dec 16 '21 at 22:02

Kay

21
2

I just figured out that its already enough to await 1 millisecond – Kay Dec 16 '21 at 22:05
This one worked for me. I am calling the navigation in the `onTap:` function and of course, I am only delaying for 1 millisecond. – Senthur Kumaran Nov 09 '22 at 23:57

Hooshyar · Answer 3 · 2021-10-21T20:47:20.300

you need to invoke the future function using ()=>, and pass Build Context for the function to know which context to navigate from.

so your button will change like this:

   IconButton(onPressed:()=> _openSettings(context), icon: Icon(Icons.settings))

and your function should be like this:

Future<void> _openSettings(BuildContext ctx) async {
    print('settings');
    await Navigator.push(
        ctx, MaterialPageRoute(builder: (context) => SettingPage()));
    print('settings completed');
  }

here is the entire code that I've tested the issue on:

class PlayGround extends StatefulWidget {
  const PlayGround({Key? key}) : super(key: key);

  @override
  _PlayGroundState createState() => _PlayGroundState();
}

class _PlayGroundState extends State<PlayGround> {
  final _title =
      TextEditingController.fromValue(TextEditingValue(text: 'initialTitle'));

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('MyApp'),
          actions: [
            PopupMenuButton<int>(
              itemBuilder: (context) => [
                PopupMenuItem(
                  child: Text(AppLocalizations.of(context).settings),
                  onTap: () {},
                ),
                PopupMenuItem(
                  child: Text(AppLocalizations.of(context).logout),
                  onTap: () {},
                )
              ],
              icon: Icon(
                Icons.settings,
              ),
            ),
            IconButton(
                onPressed: () => _openSettings(context),
                icon: Icon(Icons.settings))
          ],
        ),
        body: Container());
  }

  Future<void> _openSettings(BuildContext ctx) async {
    print('settings');
    await Navigator.push(
        ctx, MaterialPageRoute(builder: (context) => SettingPage()));
    print('settings completed');
  }
}

class SettingPage extends StatelessWidget {
  const SettingPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

The call from onPressed worked before already. I applied the changes you proposed to the call in PopupMenuItem but the navigation after the onTap call still does not work unfortunately. — finisinfinitatis, Oct 21 '21 at 20:35
Thanks, this works for me as well. The problem is when I add the _openSettings call to the PopupMenuItem (like here: PopupMenuItem( child: Text(AppLocalizations.of(context).settings), onTap: ()=>_openSettings(ctx), )) is does not work anymore. — finisinfinitatis, Oct 21 '21 at 20:58

Sir Kev · Answer 4 · 2023-08-13T11:19:13.280

0

This worked for me

SchedularBinding.instance!.addPostFrameCallback((_){

//your code here,
//this is executed after the first frame is rendered
});

        

PopupMenuItem(
onTap: (){
    SchedulerBinding.instance!.addPostFrameCallback((_) {
         Get.to(() => Settings());
});

hope it helps:)

edited Aug 13 '23 at 11:19

answered Aug 13 '23 at 11:15

Sir Kev

1
2

Please avoid code only answer and provide an explanation. You also could have a look at [how to answer](https://stackoverflow.com/help/how-to-answer). – doneforaiur Aug 19 '23 at 04:21

Flutter - Navigate in PopupMenuButton onTap does not work

4 Answers4