Flutter UI Create menu with function after click icon more

Question

Halo,

First, I wanna show you my current UI :

And here's the code for red circle function :

InkWell(
  onTap: null,
  child: Icon(Icons.more_horiz,
    size: 18,
    color: Color.fromRGBO(0, 0, 0, 0.25),
  ),
),

What action I needed is to show pop-up menu like this after click the icon, for example :

I need that to create edit and delete with function to navigate to another page, and need to know how to control menu position.

I already check on pub.dev, but it didn't resolve my problem. Can anyone give me an advice?

You want to second image like alert? – Ravindra S. Patil Jan 11 '23 at 10:07 — Ravindra S. Patil, Jan 11 '23 at 10:07

score 2 · Accepted Answer · answered Jan 11 '23 at 10:14

Try this code : the package is here : https://pub.dev/packages/pull_down_button

PullDownButton(
  itemBuilder: (context) => [
    PullDownMenuItem(
      title: 'Menu item',
      onTap: () => action(),
    ),
    const PullDownMenuDivider(),
    PullDownMenuItem(
      title: 'Menu item 2',
      onTap: () => action2(),
    ),
  ],
  position: PullDownMenuPosition.under,
  buttonBuilder: (context, showMenu) => CupertinoButton(
    onPressed: showMenu,
    padding: EdgeInsets.zero,
    child: const Icon(CupertinoIcons.ellipsis_circle),
  ),
);

result :

can I ask you, how to made this icon before text. This widget is hard to customize — Dimas Satrya, Jan 12 '23 at 08:32

score 1 · Answer 2 · answered Jan 11 '23 at 10:27

1

You can try using PopupMenuButton you can find here an example

answered Jan 11 '23 at 10:27

Halim

54
1
7

score 1 · Answer 3 · answered Jan 11 '23 at 10:37

Try below code hope its help to you. and used PopupMenuButton

Declare Key Variable:

  final GlobalKey menuKey = GlobalKey();

Widget:

InkWell(
  onTap: () {
    dynamic state = menuKey.currentState;
    state.showButtonMenu();
  },
  child: PopupMenuButton(
    key: menuKey,
    itemBuilder: (_) => const <PopupMenuItem<String>>[
      PopupMenuItem<String>(
        child: Text('Show Test'),
        value: 'Test',
      ),
      PopupMenuItem<String>(
        child: Text('Edit Test Solution'),
        value: 'Edit',
      ),
    ],
    onSelected: (_) {},
  ),
),

Result->

Flutter UI Create menu with function after click icon more

3 Answers3