How can we change the width/padding of a Flutter DropdownMenuItem in a Dropdown?

Mary picture Mary · Feb 20, 2018 · Viewed 32.3k times · Source

In Flutter, I can build a Dropdown with DropdownMenuItems, like this: enter image description here

The DropdownMenuItems I add are always wider than the dropdown itself:

enter image description here

How do you adjust the width of the DropdownMenuItem, or remove the extra horizontal padding?

My DropdownMenuItem widget looks like this:

DropdownMenuItem(
    value: unit.name,
    child: Text('hey'),
);

while my Dropdown widget looks like this:

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

Answer

Mary picture Mary · Feb 28, 2018

This feature has been added. See https://github.com/flutter/flutter/pull/14849

You can now wrap it 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,
         ),
      ),
    ),
);