How to use onTap or onPressed in PopupMenuItem

Question

How can we implement use of onTap or onPressed in PopupMenuItem

Here is my code:

actions: <Widget>[
  PopupMenuButton(
    icon: Icon(Icons.settings),
    itemBuilder: (context) => [
      PopupMenuItem(
        child: Text("Settings"),
      ),
      PopupMenuItem(
        child: Text("Flutter.io"),
      ),
      PopupMenuItem(
        child: Text("Google.com"),
      ),
    ],
  ),
]

I want to navigate to SettingPage() on tapping or clicking Settings PopupMenuItem.
I am getting this error even after following a solution mentioned below and even after importing dart:js

Error: Not found: 'dart:js'
import 'dart:js';

Here are my dependencies:

import 'package:bfdi_app/Profile/editProfile.dart';
import 'package:bfdi_app/models/user.dart';
import 'package:bfdi_app/services/collection.dart';
import 'package:bfdi_app/settings.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'dart:js';

Thank you, but I want to navigate to SettingPage() on tapping or clicking Settings PopupMenuItem. — Himanshu Sharma, Dec 25 '19 at 14:01

score 43 · Accepted Answer · answered Dec 25 '19 at 14:28

43

Just add this to your PopupMenuButton:

onSelected: (result) {
    if (result == 0) {
        Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SettingPage()),
        );
    }
},

And change your setting button to:

PopupMenuItem(
    child: Text("Settings"),
    value: 0,
),

answered Dec 25 '19 at 14:28

no_fate

1,625
14
22

I have done it but it is showing: Error: Not found: 'dart:js'. I have already imported dart:js – Himanshu Sharma Dec 25 '19 at 15:12
so put this: `import 'dart:js';` on the top of your file – no_fate Dec 25 '19 at 15:14
I have already done it. I have updated the question, please look into it. – Himanshu Sharma Dec 25 '19 at 15:24
Add this line above your other imports. On the first line – no_fate Dec 25 '19 at 15:26
In what platform do you build flutter? – no_fate Dec 25 '19 at 15:30
Visual Studio Code – Himanshu Sharma Dec 25 '19 at 15:31
I mean web or mobile platform? – no_fate Dec 25 '19 at 15:32
It is a mobile platform with AVM – Himanshu Sharma Dec 25 '19 at 15:33
Could you create another question with a detail description of your new issue? – no_fate Dec 25 '19 at 15:34
Here is the link: https://stackoverflow.com/questions/59479813/error-not-found-dartjs-import-dartjs – Himanshu Sharma Dec 25 '19 at 15:41

score 10 · Answer 2 · answered Dec 25 '19 at 12:40

There is a property called onSelected, you should use it, it handles onTap event.

PopupMenuButton(
  icon: Icon(Icons.settings),
  onSelected: (newValue) { // add this property
    setState(() {
      _value = newValue; // it gives the value which is selected
    });
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      child: Text("Settings"),
      value: 0,
    ),
    PopupMenuItem(
      child: Text("Flutter.io"),
      value: 1,
    ),
    PopupMenuItem(
      child: Text("Google.com"),
      value: 2,
    ),
  ],
)

Hello, I want to navigate to SettingPage() on tapping or clicking Settings PopupMenuItem. — Himanshu Sharma, Dec 25 '19 at 14:01

score 7 · Answer 3 · edited Feb 12 '22 at 12:18

7

I faced similar issues while navigating the screen using pop up menu button and I solve the issues by putting this method inside the onTap callback of PopupMenuItem:

    onTap: (){
WidgetsBinding.instance!.addPostFrameCallback((_) {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) {
                            return ScreenName();
                          },
                        ),
                      );
                    });
}

edited Feb 12 '22 at 12:18

Dharman

30,962
25
85
135

answered Feb 12 '22 at 12:12

Prakash Basnet

121
2
2

Worked, thx! Strange though – Touwer Jul 22 '22 at 08:16
It worked for me too! Still in confusion about the fact that it's normally working for everyone else without this extra piece of code, but not for me, why? – Tariqul Islam Jan 15 '23 at 11:04

score 2 · Answer 4 · answered Nov 01 '21 at 12:54

2

There is now an onTap() for PopupMenuItem.

      PopupMenuButton(
        itemBuilder: (context) => [
          PopupMenuItem(
            child: Text("tap me"),
            onTap: () => print("TAP"),
          )
        ],
      ),

answered Nov 01 '21 at 12:54

falconforce

140
1
5

Mohamed Gaber · Answer 5 · 2019-12-25T14:29:28.473

-Edited based on comment-

That's it :

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var items = [{'name':'Settings','value':0}, {'name':'Flutter.io','value':1}, {'name':'Google.com',,'value':2}];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: PopupMenuButton(
              onSelected: (x) {
           if(x==0){
                Navigator.push(
                     context,
                     MaterialPageRoute(builder: (context) => SettingPage()), );}
              },
              icon: Icon(Icons.settings),
              itemBuilder: (context) => items
                  .map<PopupMenuItem>((element) => PopupMenuItem(
                        child: Text(element['name]),
                        value: element['value'],
                      ))
                  .toList()),


    ));
  }
}

Hello, I want to navigate to SettingPage() on tapping or clicking Settings PopupMenuItem. — Himanshu Sharma, Dec 25 '19 at 14:02
I have done it but it is showing: Error: Not found: 'dart:js'. I have already imported dart:js — Himanshu Sharma, Dec 25 '19 at 15:13

score 1 · Answer 6 · answered Nov 13 '20 at 12:48

1

Callable value.

PopupMenuButton(
  icon: Icon(Icons.settings),
  onSelected: (value) {
    value();
  },
  itemBuilder: (context) => [
    PopupMenuItem(
      child: Text('Settings'),
      value: () {
        debugPrint('open Settings');
      },
    ),
    PopupMenuItem(
      child: Text('Flutter.io'),
      value: () {
        debugPrint('goto Flutter.io');
      },
    ),
  ],
)

answered Nov 13 '20 at 12:48

ytyng

575
6
8

This is a very clever solution. It avoids having to create a separate switch-case handler function to execute an action after a value was selected – Mohamad Abdel Rida Nov 17 '22 at 22:27

score 0 · Answer 7 · answered Mar 30 '21 at 14:55

Use inheritance when showing popup with showMenu(...)

class PopupItem<T> extends PopupMenuItem<T> {

  final Function() onTap;

  PopupItem({this.onTap, Widget child, Key key})
      : super(child: child, key: key);

  @override
  _PopupItemState<T> createState() => _PopupItemState<T>();
}

class _PopupItemState<T> extends PopupMenuItemState<T, PopupItem<T>> {
  @override
  void handleTap() {
    widget.onTap?.call();
    super.handleTap();
  }
}

Usage:

  Widget _itemDelete() => PopupItem(
        onTap: () {
          // Handle tap here
        },
        child: Text(...)
      );

score 0 · Answer 8 · edited Aug 10 '22 at 06:10

0

onTap: (){

                  WidgetsBinding.instance!.addPostFrameCallback((_) {

                      Navigator.push(

                        context,
                        MaterialPageRoute(

                          builder: (context)=>Page())): 

                          },
                        ),
                      );
                    });
}

edited Aug 10 '22 at 06:10

vimuth

5,064
33
79
116

answered Aug 05 '22 at 16:34

Ofsam

1
1

Diwakar kumar tiwari · Answer 9 · 2022-11-08T11:06:49.170

PopupMenuButton ( padding: EdgeInsets.zero, icon:const Icon(Icons.keyboard_arrow_down_outlined,color: Color.fromRGBO(34, 178, 232, 1)), shape: RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(15.0)) ),

                  onSelected: (x){
                    if (x=="Edit User") {
                      Get.to(EditUserPage());
                    }
                    else if(x=="Login History"){
                      Get.to(EditUserPage());
                    }
                    else if(x=="Change Password"){
                      Get.to(EditUserPage());
                    }
                    else if(x=="Deactivate User"){
                      Get.to(EditUserPage());
                    }
                  },
                  itemBuilder: (BuildContext context) => <PopupMenuEntry >[
                    PopupMenuItem (
                      onTap: (){},
                      value:"Edit User",
                      child:  Row(
                        children: [
                          svgWedget(url:"assets/svg/edit.svg"),
                          SizedBox(width: 10,),
                          Text("Edit User"),
                        ],
                      ),
                    ),
                    PopupMenuItem (
                      onTap: ( )async{},
                      value:"Login History",
                      child:  Row(
                        children: [
                          svgWedget(url:"assets/svg/calendar.svg"),
                          SizedBox(width: 10,),
                          Text("Login History"),
                        ],
                      ),
                    ),
                    PopupMenuItem (
                      onTap: ()async{},
                      value:"Change Password",
                      child:  Row(
                        children: [
                          SvgPicture.asset("assets/svg/lock.svg",color: Color.fromRGBO(195, 172, 255, 1),),
                          SizedBox(width: 10,),
                          Text("Change Password"),
                        ],
                      ),
                    ),
                    PopupMenuItem (
                      onTap: ()async{},
                      value:"Deactivate User",
                      child:  Row(
                        children: [
                          svgWedget(url:"assets/svg/trash.svg"),
                          SizedBox(width: 10,),
                          Text("Deactivate User"),
                        ],
                      ),
                    ),
                  ]
              ),

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Nov 09 '22 at 04:11

How to use onTap or onPressed in PopupMenuItem

9 Answers9

Linked