Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use onTap or onPressed in PopupMenuItem

Tags:

flutter

dart

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';

like image 961
Himanshu Sharma Avatar asked Dec 25 '19 12:12

Himanshu Sharma


People also ask

How do you use PopupMenuItem in flutter?

To show a popup menu, use the showMenu function. To create a button that shows a popup menu, consider using PopupMenuButton. To show a checkmark next to a popup menu item, consider using CheckedPopupMenuItem. Typically the child of a PopupMenuItem is a Text widget.

How do you use Popmenubutton in flutter?

Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. If we focus on an Application, We can see in every Application there is a Pop Up Menu button that will do some work.

How to add onpressed and ONTAP events to a widget?

Normally we cannot add events like onPressed, onTap on normal widgets. But there are some options to add interaction to any type of widgets. As the name indicates, the GestureDetector detects interaction to any widgets like Action listener in Java. If we want add any type of event, then include that widget as the child of GestureDetector.

How to show popupmenuitem using appbar actions?

A Appbar actions properties is a array that accept list of widget, In our case we are using PopupMenuButton to show PopupMenuItem. Video Player is loading. This is a modal window. Beginning of dialog window. Escape will cancel and close the window. End of dialog window.

How to add 3 dot popup menu in flutter?

The simplistic way to add 3 dot popup menu is by using flutter Appbar actions: [] properties. A Appbar actions properties is a array that accept list of widget, In our case we are using PopupMenuButton to show PopupMenuItem. Video Player is loading. This is a modal window. Beginning of dialog window. Escape will cancel and close the window.

What is ONTAP event in gesture detector?

Gesture Detector supports onTap event; which is similar to onPressed, that is you can manage tap events by this feature. Here, a Text (Gesture) included as a child of the GestureDetector widget.


5 Answers

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,
),
like image 50
no_fate Avatar answered Oct 23 '22 18:10

no_fate


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,
    ),
  ],
)
like image 36
CopsOnRoad Avatar answered Oct 23 '22 20:10

CopsOnRoad


There is now an onTap() for PopupMenuItem.

      PopupMenuButton(
        itemBuilder: (context) => [
          PopupMenuItem(
            child: Text("tap me"),
            onTap: () => print("TAP"),
          )
        ],
      ),
like image 39
falconforce Avatar answered Oct 23 '22 20:10

falconforce


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();
                          },
                        ),
                      );
                    });
}
like image 34
Prakash Basnet Avatar answered Oct 23 '22 20:10

Prakash Basnet


-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()),


    ));
  }
}

like image 25
Mohamed Gaber Avatar answered Oct 23 '22 20:10

Mohamed Gaber