How to show pop-up menu when an IconButton is clicked Flutter

Question

I am trying to show a pop-up menu appear when an IconButton() is clicked I added a PopupMenuButton() to the on pressed method of the IconButton as you can see below:

but it does not show any pop-up menu when clicked. If there's anything I'm doing wrong I hope some one can point it out for me. Here is the code:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

String _selectedMenu = '';

enum Menu { itemOne, itemTwo, itemThree, itemFour }

class ListTileWithIcon extends StatefulWidget {
  const ListTileWithIcon({super.key});

  @override
  State<ListTileWithIcon> createState() => _ListTileWithIconState();
}

class _ListTileWithIconState extends State<ListTileWithIcon> {
  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: const Icon(Icons.person),
      title: const Text("The ListTile"),
      trailing: IconButton(
        // key: _icnBtnKey,
        splashRadius: 20,
        icon: const Icon(
          Icons.more_vert_rounded,
          size: 20.0,
          color: Color.fromARGB(255, 135, 0, 212),
        ),
        onPressed: () {
          // showPopUpMenuAtTap();
          if (kDebugMode) {
            print("Inside icon button's clickt");
          }

          PopupMenuButton<Menu>(
            // Callback that sets the selected popup menu item.
            onSelected: (Menu item) {
              setState(() {
                _selectedMenu = item.name;
              });
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<Menu>>[
              const PopupMenuItem<Menu>(
                value: Menu.itemOne,
                child: Text('Item 1'),
              ),
              const PopupMenuItem<Menu>(
                value: Menu.itemTwo,
                child: Text('Item 2'),
              ),
              const PopupMenuItem<Menu>(
                value: Menu.itemThree,
                child: Text('Item 3'),
              ),
              const PopupMenuItem<Menu>(
                value: Menu.itemFour,
                child: Text('Item 4'),
              ),
            ],
          );
        },
      ),
      onTap: () {},
    );
  }
}

Thanks in advance.

Answer 1

You might be looking for showMenu

onTap: () {
    // popUpKey.currentState?.showButtonMenu();
    showMenu(
        context: context,
        position: RelativeRect.fromLTRB(100, 100, 100, 00),
        items: [

---

You can use a GlobalKey to open popUp menu from others button pressed

  final GlobalKey<PopupMenuButtonState> popUpKey = GlobalKey();

 PopupMenuButton<Menu>(
          key: popUpKey,

And call

onTap: () {
  popUpKey.currentState?.showButtonMenu();
},

---

Test snippet

class ListTileWithIcon extends StatefulWidget {
  const ListTileWithIcon({super.key});

  @override
  State<ListTileWithIcon> createState() => _ListTileWithIconState();
}

enum Menu { itemOne, itemTwo, itemThree, itemFour }

class _ListTileWithIconState extends State<ListTileWithIcon> {
  String _selectedMenu = '';

  final GlobalKey<PopupMenuButtonState> popUpKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        InkWell(
          child: Text("Click to open PopUp"),
          onTap: () {
            popUpKey.currentState?.showButtonMenu();
          },
        ),
        SizedBox(
          height: 200,
        ),
        PopupMenuButton<Menu>(
          key: popUpKey,
          onSelected: (Menu item) {
            setState(() {
              _selectedMenu = item.name;
            });
          },
          itemBuilder: (BuildContext context) => <PopupMenuEntry<Menu>>[
            const PopupMenuItem<Menu>(
              value: Menu.itemOne,
              child: Text('Item 1'),
            ),
            const PopupMenuItem<Menu>(
              value: Menu.itemTwo,
              child: Text('Item 2'),
            ),
            const PopupMenuItem<Menu>(
              value: Menu.itemThree,
              child: Text('Item 3'),
            ),
            const PopupMenuItem<Menu>(
              value: Menu.itemFour,
              child: Text('Item 4'),
            ),
          ],
        )
      ],
    );
  }
}

Answer 2

you should use the PopUpMenuButton atribute 'icon' instead of using the icon button.

PopupMenuButton<Menu>(
    icon: const Icon(
      Icons.settings,
      size: 50,
      color: Colors.red,
    ), //use this icon
    onSelected: (Menu item) {
      setState(() {
        _selectedMenu = item.name;
      });
    },
    itemBuilder: (BuildContext context) => <PopupMenuEntry<Menu>>[
      const PopupMenuItem<Menu>(
        value: Menu.itemOne,
        child: Text('Item 1'),
      ),
      const PopupMenuItem<Menu>(
        value: Menu.itemTwo,
        child: Text('Item 2'),
      ),
      const PopupMenuItem<Menu>(
        value: Menu.itemThree,
        child: Text('Item 3'),
      ),
      const PopupMenuItem<Menu>(
        value: Menu.itemFour,
        child: Text('Item 4'),
      ),
    ],
  )