flutterdartdart-ui

Flutter UI Create menu with function after click icon more


Halo,

First, I wanna show you my current UI :

enter image description here

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 :

enter image description here

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?


Solution

  • 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 : enter image description here