flutter - How to change PopupMenuButton width

Flutter - PopupMenuButton Width

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to set or change the PopupMenuButton widget width. But there is no direct property or method to set or change the width of a PopupMenuButton widget. So we have to take help from another property of PopupMenuButton class. Here we used the PopupMenuButton class’s itemBuilder property to specify the width of PopupMenuButton items, this will finally change the width of the PopupMenuButton widget itself.

The PopupMenuButton class’s itemBuilder property value is a PopupMenuItemBuilder instance. The PopupMenuItemBuilder is called when the button is pressed to create the items to show in the menu. The PopupMenuItemBuilder is used by PopupMenuButton to lazily construct the items shown when the button is pressed.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget. We can put this Text widget inside a SizedBox to set the width of the Text widget. As a result the width of the popup menu item change and finally the entire PopupMenuButton widget’s width change as specified in the SizedBox width property value.

So finally, the flutter app developers can set or change the entire PopupMenuButton widget’s width by taking advantage of the SizedBox widget while generating its menu items.

main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.pink),
      home: Scaffold(
        appBar: AppBar(
          title: const Text("PopupMenuButton Width"),
          actions: [
            PopupMenuButton(
                itemBuilder: (context) => [
                  const PopupMenuItem(
                      child: SizedBox(
                          width: 175,
                          child: Text("First Item")
                      )
                  ),
                  const PopupMenuItem(child: Text("Second Item")),
                  const PopupMenuItem(child: Text("Third Item"))
                ],
                color: Colors.pink.shade200,
                offset: const Offset(0, 56)
            )
          ],
        ),
      ),
    ),
  );
}