flutter - How to use PopupMenuItem onTap

Flutter - PopupMenuItem onTap

The PopupMenuButton class allows us to display 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. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to use the PopupMenuItem widget’s tap callback. Here we used the PopupMenuItem class’s onTap property to set the PupupMenuButton widget’s item tap callback.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget. But the flutter developers can build more complex items such as they can show both an icon and text inside an item.

The PopupMenuItem class onTap property value type is VoidCallback which is called when the menu item is tapped. The VoidCallback is a signature of callbacks that have no arguments and return no data.

So when the PopupMenuButton widget’s menu item is tapped then the flutter developers can get the tapped item details by using its onTap callback. Here we show a message on the app SnackBar when an item is tapped from the PopupMenuButton widget.

So finally, the flutter app developers can display a message to the app user when they tap an item from the PopupMenuButton widget. Or they can perform some other task when the user taps an item from the PopupMenuButton widget. But to do that they have to set an onTap callback for each PopupMenuItem instance.

main.dart

import 'package:flutter/material.dart';

void main() {runApp(const MyApp());}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.pink),
        home: const MyHomePage()
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Text("PopupMenuButton onTap"),
          actions: [
            PopupMenuButton(
                offset: const Offset(0,56),
                itemBuilder: (context)=>[
                  PopupMenuItem(
                    child: const Text("Share Location"),
                    onTap: (){
                      SnackBar snackBar = const SnackBar(
                          content: Text("Location Tapped")
                      );
                      ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    },
                  ),
                  PopupMenuItem(
                    child: const Text("File Upload"),
                    onTap: (){
                      SnackBar snackBar = const SnackBar(
                          content: Text("Upload Tapped")
                      );
                      ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    },
                  ),
                  PopupMenuItem(
                    child: const Text("Send Email"),
                    onTap: (){
                      SnackBar snackBar = const SnackBar(
                          content: Text("Contact Tapped")
                      );
                      ScaffoldMessenger.of(context).showSnackBar(snackBar);
                    },
                  )
                ]
            )
          ]
      ),
    );
  }
}