paddingdropdownflutter

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


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,
      ),
    ),
);

Solution

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