2 ways to change the width and padding of DropdownMenuItem in Flutter

In Flutter, the width of a DropdownMenuItem is determined by the widest child within the dropdown menu. However, there might be cases where you want to change the width of the dropdown menu items for design or layout purposes. In Flutter, the width of a DropdownMenuItem is determined by the widest child within the dropdown menu. However, there might be cases where you want to change the width of the dropdown menu items for design or layout purposes. Today we will learn the 2 ways of changing width and padding of DropdownMenuItem in Flutter Dropdown.

Method 1

Wrap DropdownMenuButton in a ButtonTheme and set alignedDropdown to true.

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: ButtonTheme(
        alignedDropdown: true,
          child: DropdownButton(
            value: name,
            items: listOfDropdownMenuItems,
            onChanged: onChanged,
            style: Theme.of(context).textTheme.title,
         ),
      ),
    ),
);

Method 2

In Flutter, Dropdown Button contains isExpanded parameter. It determines whether the dropdown menu’s height should be allowed to expand to fit its contents. When isExpanded is set to true, the dropdown menu will take up the full available vertical space. Regardless of the number of items it contains.

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: DropdownButton(
        isExpanded: true,
        value: name,
        items: listOfDropdownMenuItems,
        onChanged: onChanged,
        style: Theme.of(context).textTheme.title,
      ),
    ),
);

Further you can read How to solve ‘There should be exactly one item with DropdownButton ’