How to change height of DropdownButton in flutter

Code Spirit picture Code Spirit · Sep 10, 2020 · Viewed 10.5k times · Source

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();
      }
    )
  )
}

Answer

Ayan Das picture Ayan Das · Sep 10, 2020

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,

enter image description here