How to change height of DropdownButton in flutter

Question

How can I change the height of a DropdownButton in flutter. I have tried to use Padding and SizedBox but none is realy working.

SizedBox just increases the container size while the DropdownButton is clamped to top left and therefore is not centered anymore. Padding is ignored or moves the content outside of the button.

I do not want to change the size of the dropdown overlay but the button itself.

build(BuildContext context) {
  return ThemeData(
    data: ThemeData(canvasColor: Colors.white),
    child: DropdownButton(
      items: _items.map((item) => DropdownMenuItem(child: Text(item), value: item)).toList(),
      isExpanded: true,
      selectedItemBuilder: (_) {
        return _items.map<Widget>((String lang) {
          return Center(
            widthFactor: 1,
            child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text(lang, style: TextStyle(color: Colors.black))
            ),
          );
        }).toList();
      }
    )
  )
}

Solution 1

Wrap it in a Container, give a height, width as per your need and set isExpanded true in DropDownButton. Also change dropdownbutton text font size as per your need.

Container(
  height: 50.0,
  width: 200.0,
  child: DropdownButton(
           value: dropdownValue,
           icon: Icon(Icons.arrow_downward),
           iconSize: 24,
           elevation: 16,
           isExpanded: true,
           style: TextStyle(color: Colors.deepPurple, fontSize: 20.0),
           underline: Container(
             height: 2,
             color: Colors.deepPurpleAccent,
           ),
           onChanged: (String newValue) {
             setState(() {
               dropdownValue = newValue;
             });
           },
           items: <String>['One', 'Two', 'Free', 'Four']
               .map<DropdownMenuItem<String>>((String value) {
             return DropdownMenuItem<String>(
               value: value,
               child: Text(value),
             );
           }).toList(),
         )
)

End product should look something like this,

Solution 2

Looks like the 'itemHeight' property for the DropdownButton class should do the trick. I tried it and it increased the height of my DropdownButton.

Here is some sample code I have from a previous project using the itemHeight:

DropdownButton<String>(
      itemHeight: 100.0,
      value: selectedCurrency,
      items: dropdownItems,
      onChanged: (value) {
        setState(() {
          selectedCurrency = value;
          getData();
        });
      },
    );

Note: Just make sure the value you provide isn't less than 48.0, since it will give an error.

Docs: itemHeight property: https://api.flutter.dev/flutter/material/DropdownButton/itemHeight.html

Minimum itemHeight defined by 'kMinInteractiveDimension': https://api.flutter.dev/flutter/material/kMinInteractiveDimension-constant.html

Solution 3

itemHeight: null,

You just need to leave the itemHeight with the null value.

It will make the height of the DropdownButton with the menu item's intrinsic height.

Solution 4

Use SizedBox Widget

SizedBox(
      height: 30,
      child:DropdownButton<String>(
      value: selectedCurrency,
      items: dropdownItems,
      onChanged: (value) {},
    ))

View more solutions