How to change background color of PopupMenuItem in Flutter

Question

How to change the background color of PopupMenuItem in flutter?

Right now I just change the color of the child of PopupMenuItem, and the result is this:

Here is the code:

PopupMenuButton<int>(
        onSelected: (value) {
          // TODO: Implement onSelect
        },
        offset: Offset(50, 50),
        itemBuilder: (context) => [
          PopupMenuItem(
            value: 1,
            child: Container(
              height: double.infinity,
              width: double.infinity,
              color: Colors.greenAccent,  // i use this to change the bgColor color right now
              child: Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  Icon(Icons.check),
                  SizedBox(width: 10.0),
                  Text("Konfirmasi Update"),
                  SizedBox(width: 10.0),
                ],
              ),
            ),
          ),

What I want is to change the background color of the "Konfirmasi Update" option, as you can see on the picture above the color is leaving white area outside the option.

How to fully change the PopupMenuItem background color, without leaving the white area on the outside of the PopupMenuItem?

Answer 1

There is no way using PopupMenuButton and PopupMenuItem widget out of the box, because if you check the source code, there are hardcode values for vertical and horizontal padding.

I modified the code of the popup_menu.dart file, specifically these values:

const double _kMenuVerticalPadding = 0.0;//8.0;
const double _kMenuHorizontalPadding = 0.0;//16.0;

If you want to make it work, download this file to your project: https://gist.github.com/diegoveloper/995f1e03ef225edc64e06525dc024b01

import that file in your project and add an alias :

import 'your_project/my_popup_menu.dart' as mypopup;

Usage:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: mypopup.PopupMenuButton<int>(
          elevation: 20,
          onSelected: (value) {
            // TODO: Implement onSelect
          },
          offset: Offset(50, 50),
          itemBuilder: (context) => [
            mypopup.PopupMenuItem(
              value: 1,
              child: Container(
                height: double.infinity,
                width: double.infinity,
                color: Colors
                    .greenAccent, // i use this to change the bgColor color right now
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Icon(Icons.check),
                    SizedBox(width: 10.0),
                    Text("Konfirmasi Update"),
                    SizedBox(width: 10.0),
                  ],
                ),
              ),
            ),
            mypopup.PopupMenuItem(
              value: 1,
              child: Container(
                height: double.infinity,
                width: double.infinity,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    Icon(Icons.check),
                    SizedBox(width: 10.0),
                    Text("Revisi Update"),
                    SizedBox(width: 10.0),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

Result