flutter

change popupmenubutton size(width and height)


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');
        },
      ),
    ],
  );

Solution

  • 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');
                },
              ),
            ],
          );