CODEWITHSUNDEEP
flutterflutter-layout
Martin Yu
Martin Yu

Reputation: 311

How to change the background color of Popup MenuButton bullet window?

I want to change the background color of Popup Menu Button window. What should I do? I hope I can get your help. Thank you.When I change the color of container, some corners cannot change the color.

 new IconButton(
            icon: new Icon(
              Icons.search,
              color: Colors.white,
            ),
            onPressed: () {},
          ),
          new PopupMenuButton(
            offset: const Offset(0.0, 60.0),
            icon: new Icon(Icons.add, color: Colors.white),
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
                  new PopupMenuItem<String>(
                      value: '选项一的值',
                      child: new Container(
                          color: Colors.red,
                          child: new Column(
                            children: <Widget>[
                              new Row(
                                children: <Widget>[
                                  new Image.asset(defaultAvatar,
                                      width: 30.0, height: 30.0),
                                  new Text('发起群聊')
                                ],
                              ),
                            ],
                          ))),
                  new PopupMenuItem<String>(
                      value: '选项一的值',
                      child: new Container(
                          child: new Column(
                        children: <Widget>[
                          new Row(
                            children: <Widget>[
                              new Image.asset(defaultAvatar,
                                  width: 30.0, height: 30.0),
                              new Text('添加朋友')
                            ],
                          ),
                        ],
                      ))),

enter image description here

Upvotes: 11

Views: 21087

Answers (8)

amr samy
amr samy

Reputation: 101

For Theming and over all app change :

ThemeData(
//....
popupMenuTheme: PopupMenuThemeData(
            color: ColorManager.lightDark
        ),

)

Upvotes: 0

Khoi Diep
Khoi Diep

Reputation: 11

{Color? color}
Type: Color?

If provided, the background color used for the menu.

If this property is null, then [PopupMenuThemeData.color] is used. If [PopupMenuThemeData.color] is also null, then Theme.of(context).cardColor is used.

PopupMenuButton(
  color: Colors.red,
  child: ...
),

Upvotes: 1

Shubham Bansal
Shubham Bansal

Reputation: 69

By default PopupMenuButton has a tint color.

surfaceTintColor = popupMenuTheme.shadowColor

so we also need to set its color, to make it work.

PopupMenuButton(
  color: Colors.red,
  surfaceTintColor: Colors.red,
  child: ...
),

Upvotes: 6

Mohamed Assaker
Mohamed Assaker

Reputation: 53

Starting from Flutter 3.10, it works like this:

PopupMenuButton(
      color: Colors.red,
      child: ...
),

Upvotes: 1

vitralyoz
vitralyoz

Reputation: 618

Center(
      child: Theme(
        data: Theme.of(context).copyWith(
          cardColor: Colors.red,
        ),
        child: PopupMenuButton(
          child: Text("Show Popup Menu"),
          itemBuilder: (context) => [
                PopupMenuItem(
                  child: Text("InduceSmile.com"),
                ),
                PopupMenuItem(
                  child: Text("Flutter.io"),
                ),
                PopupMenuItem(
                  child: Text("Google.com"),
                ),
              ],
        ),
      ),

This is working fine.

Upvotes: 1

Yabsra A
Yabsra A

Reputation: 29

You can just change the background color using PopupMenuButton( color: Colors.red, ...) without having to wrap it in a new theme.

Upvotes: 2

jujka
jujka

Reputation: 1217

It's kinda ugly, but hey:

PopupMenuButton<String>(
   onSelected: (selected) {},
   icon: Icon(Icons.more_vert, color: Colors.white,),
   itemBuilder: (BuildContext context) {
      ...
   },
),

Upvotes: 8

diegoveloper
diegoveloper

Reputation: 103541

That background color is based on the Theme , so you can change the color wrapping your PopMenuButton inside Theme and change the cardColor.

          Theme(
                data: Theme.of(context).copyWith(
                  cardColor: Colors.red,
                ),
                child: new PopupMenuButton(
                       ...

Upvotes: 15

Related Questions