flutterdartpadding

How do I remove the margin at the topmost of showMenu?


I'm trying to make a topbar using showMenu. I tried to style the first PopupMenuItem in showMenu to look like one. I tried to change the color for that single Item, only to find out there are some padding around, leaving white area all around my topbar.

So, I tried EdgeInsets.zero, and all the paddings disappeared except for the padding on the topside. I couldn't find out (or google / chatGPT the answer) how to remove this padding. I actually don't even understand where this padding came from.

This is part of my current code and how it looks like when I run it.

showMenu(
      context: context,
      position: position,
      items: [
        PopupMenuItem(
          padding: EdgeInsets.zero, // remove paddings
          child: Container(
            decoration: BoxDecoration(
              color: Colors.blueGrey, // Topbar color
              borderRadius:
                  BorderRadius.vertical(top: Radius.circular(8)), // Topbar edge
            ),
            child: Padding(
              padding: const EdgeInsets.all(12), // Inner paddings for design
              child: Row(
                children: [
                  Expanded(
                    flex: 4,
                    child: Text(
                      weekdayDate + ' Schedule',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: IconButton(
                      icon: Icon(Icons.add_outlined, color: Colors.white),
                      onPressed: () {
                        //
                      },
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),

enter image description here

(They are not letting me post direct images because I don't have "10 reputation".) The red box is the padding that I can't get rid of.

I understand that I may have to make a custom widget, but I've never done that before so I don't feel very comfortable about doing that.

English is my second language and this is my first time writing on StackOverflow. I'm sorry if my post is something out of the rule.


Solution

  • You have to remove padding from showMenu() using the menuPadding property, instead of it's child widget!

    showMenu(
          context: context,
          position: position,
    
          menuPadding: EdgeInsets.zero // <--- this
          // ... other properties
    )