change popupmenubutton size(width and height)-CodePudding

could you plz tell me how to change the size of popupMenu, like to make it wider and bigger, here is my code, thank you a lot. I didnt find some useful info from stack overflow or google...

Widget _threeItemPopup() => PopupMenuButton(
    icon: Icon(
      Icons.more_horiz,
      size: 24,
      color: Colors.white,
    ),
    onSelected: (value) {
      value();
    },
    itemBuilder: (context) => [
      PopupMenuItem(
        child: Container(
            width: 100.0,
            child: Text('Settings')),
        value: () {
          debugPrint('open Settings');
        },
      ),
      PopupMenuItem(
        child: Container(
            width: 100.0,
            child: Text('Flutter.io')),
        value: () {
          debugPrint('goto Flutter.io');
        },
      ),
    ],
  );

CodePudding user response：

You can play with fontSize & padding (top/bottom) to make it bigger.

  Widget _threeItemPopup() => PopupMenuButton(
        padding: const EdgeInsets.only(
            top: 100, bottom: 100), // option 1 : padding on PopupMenuButton
        icon: const Icon(
          Icons.more_horiz,
          size: 24,
          color: Colors.black,
        ),
        onSelected: (value) {
          value();
        },
        itemBuilder: (context) => [
          PopupMenuItem(
            padding: const EdgeInsets.only(
                top: 20, bottom: 20), // option 2 : padding on PopupMenuItem
            child: const SizedBox(
                child: Padding(
              padding: EdgeInsets.only(
                  top: 20, bottom: 20), // option 3 : padding on Text
              child: Text(
                'Settings',
                style: TextStyle(fontSize: 50), // option 4 : play with fontSize
              ),
            )),
            value: () {
              debugPrint('open Settings');
            },
          ),
          PopupMenuItem(
            padding: const EdgeInsets.only(top: 20, bottom: 20),
            child: const SizedBox(
                child: Padding(
              padding: EdgeInsets.only(top: 20, bottom: 20),
              child: Text(
                'Flutter.io',
                style: TextStyle(fontSize: 50),
              ),
            )),
            value: () {
              debugPrint('goto Flutter.io');
            },
          ),
        ],
      );

CodePudding user response：

On PopupMenuButton's child, you can use SizedBox to provide the size you want. Also in your case you can just increase the icon size. Same goes for PopupMenuItem

PopupMenuButton(
        child: const SizedBox(
          height: 100,
          width: 100,
          child:...,
        ),
        itemBuilder: (context) => [
          PopupMenuItem(
            child:
                Container(width: 100.0, height: 200,....),