Custom PopupMenu in Flutter

INSPIRATION

I was given a task where I was provided with a Figma UI, and I had to make a flutter app with that UI. It required me to make a Popup menu that would be used to filter the Expenses results. The above image was what I was asked to make.

So, I searched on Google to get some idea how to implement a custom PopupMenu in flutter and I got this:

PopupMenuButton: Displays a menu when pressed and calls `onSelected` when the menu is dismissed because an item was selected.

But this was not what I wanted to implement, this usually takes only List.

IMPLEMENTATION

General implementation of PopupMenuButton:

PopupMenuButton(
  itemBuilder: (BuildContext context) {
    return [
      PopupMenuItem(
        child: Text('Preview'),
      ),
      PopupMenuItem(
        child: Text('Share'),
      ),
      PopupMenuItem(
        child: Text('Get Link'),
      ),
      PopupMenuItem(
        child: Text('Remove'),
      ), 
    ];
  },
)

This gave me a list of content inside the Popup Menu, but I wanted to have a TextField, an ElevatedButton, some Icons, etc. in my Popup Menu.

So, I used only one PopupMenuItem and disabled it so that it doesn’t give any hover effect and added a Column, inside which I added the rest of the code.

Here’s how I implemented Custom PopupMenuButton:

PopupMenuButton(
    offset: Offset(0, 45), // SET THE (X,Y) POSITION
    iconSize: 30,
    icon: Icon(
      Icons.filter_alt_rounded, // CHOOSE YOUR CUSTOM ICON
      color: Colors.white,
    ),
    itemBuilder: (context) {
      return [
        PopupMenuItem(
          enabled: false, // DISABLED THIS ITEM
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // WRITE YOUR CODE HERE
            ],
          ),
        ),
      ];
    },
  );
}

I hope this article helped you in making your own Custom Popup Menu, if yes, then do give this article claps👏.

Find me on Linkedin, Github & Stack Overflow:

Hardik Kumar - Campus Ambassador - Def Hacks | LinkedIn

Hardikkr - Overview

User Hardik Kumar