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

menuMaxHeight: 300 this solves it

Afolayan Ademola
– Afolayan Ademola

2022-07-29 01:48:14 +00:00
Commented Jul 29, 2022 at 1:48 — Afolayan Ademola
– Afolayan Ademola, Commented Jul 29, 2022 at 1:48

Ayan Das · Accepted Answer · 2020-09-10 15:50:42Z

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,

Dharman · Accepted Answer · 2020-09-10 15:51:29Z

13

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

edited Sep 10, 2020 at 15:51

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Sep 10, 2020 at 15:46

London Tran

2722 silver badges8 bronze badges

Comments

BOM Nguyen · Accepted Answer · 2021-08-22 03:13:58Z

9

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.

answered Aug 22, 2021 at 3:13

BOM Nguyen

1512 silver badges3 bronze badges

Comments

Bholendra Singh · Accepted Answer · 2021-03-03 10:21:34Z

6

Use SizedBox Widget

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

answered Mar 3, 2021 at 10:21

Bholendra Singh

1,1948 silver badges16 bronze badges

Comments

Ravindra S. Patil · Accepted Answer · 2024-02-23 07:02:55Z

4

You need to use menuMaxHeight property of DropdownButton Widget.

child: DropdownButton(
 menuMaxHeight: 500.0,
 value: '1',
 items: setTotalPages(),
 onChanged: (String? newValue) {
 setState(() {
 dropdownvalue = newValue!;
 });
},
)

edited Feb 23, 2024 at 7:02

Ravindra S. Patil

15.3k5 gold badges22 silver badges60 bronze badges

answered Jun 23, 2022 at 13:32

Yunus Yerli

1241 silver badge7 bronze badges

1 Comment

bqubique Over a year ago

The question was not the about the expanded menu height.

Afolayan Ademola · Accepted Answer · 2022-07-29 01:49:37Z

1

Add this property menuMaxHeight: 200, to DropdownButton

answered Jul 29, 2022 at 1:49

Afolayan Ademola

1591 silver badge6 bronze badges

1 Comment

bqubique Over a year ago

The question was not the about the expanded menu height. This changes the height of the expanded dropdown menu.

Trung Nguyen · Accepted Answer · 2023-11-14 12:13:19Z

I used InputDecorationTheme to meet the need.

  List<int> weekList = List.generate(52, (index) => index + 1);
  int? selectedWeek;

DropdownMenu<int>(
                      inputDecorationTheme: const InputDecorationTheme(
                        contentPadding: EdgeInsets.all(10),
                        constraints: BoxConstraints.expand(height: 40),
                        enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.all(
                            Radius.circular(10),
                          ),
                          borderSide: BorderSide(
                            width: 1.2,
                            color: Colors.blue,
                          ),
                        ),
                      ),
                      initialSelection: weekList.first,
                      controller: colorController,
                      menuHeight: 200,
                      label: const Text('Select week'),
                      dropdownMenuEntries: weekList
                          .map(
                            (int item) => DropdownMenuEntry<int>(
                              value: item,
                              label: item.toString(),
                              style: const ButtonStyle(
                                backgroundColor:
                                    MaterialStatePropertyAll(Colors.red),
                              ),
                            ),
                          )
                          .toList(),
                      onSelected: (int? color) {
                        setState(
                          () {
                            selectedWeek = color;
                          },
                        );
                      },
                    ),

Cezar · Accepted Answer · 2024-07-03 12:38:17Z

1

This works for me on my side. You need to implement constraints and set MaxHeight for the Dropdown button.

inputDecorationTheme: InputDecorationTheme(
 constraints: BoxConstraints(maxHeight: 52.h),
 fillColor: Color(0xffffffff),
 filled: true,
 border: InputBorder.none,
),

Please check this screenshot

edited Jul 3, 2024 at 12:38

answered Jul 3, 2024 at 12:33

Cezar

112 bronze badges

2 Comments

flzzz Over a year ago

Adding the BoxConstraint and additionally isDense = true worked for me! Thanks

Cezar Over a year ago

I am very glade to hear about that from you

krishnaacharyaa · Accepted Answer · 2022-05-12 03:13:58Z

The easiest of all methods is using DropDownButton2 which is built over DropDownButton

And just change the buttonHeight attribute

Not just buttonHeight , you can even change itemHeight , buttonwidth and many more customize

String? selectedValue;
List<String> items = [
  'Item1',
  'Item2',
  'Item3',
  'Item4',
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: DropdownButtonHideUnderline(
        child: DropdownButton2(,
          items: items
                  .map((item) =>
                  DropdownMenuItem<String>(
                    value: item,
                    child: Text(
                      item,
                     ),
                  ))
                  .toList(),
          value: selectedValue,
          onChanged: (value) {
            setState(() {
            });
          },
          buttonHeight: 40,
          buttonWidth: 140,
          itemHeight: 40,
        ),
      ),
    ),
  );
}

checkout : DropDownButton2 for more examples.

Hope it helps !!

user7341527 · Accepted Answer · 2024-07-01 06:10:14Z

0

about the position,you can use Container(alignment:Alignment.center) instead of SizedBox. for DropdownButton height, set isDense:true can make it smaller.

answered Jul 1, 2024 at 6:10

user7341527

1

Collectives™ on Stack Overflow

How to change height of DropdownButton in flutter

10 Answers 10

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

Comments

Comments

Comments

1 Comment

1 Comment

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related