CODEWITHSUNDEEP
flutterdropdownbutton
Code Spirit
Code Spirit

Reputation: 5029

How to change height of DropdownButton in flutter

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

Upvotes: 15

Views: 58994

Answers (10)

Cezar
Cezar

Reputation: 11

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

Upvotes: 1

user7341527
user7341527

Reputation: 1

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

Upvotes: 0

Yunus Yerli
Yunus Yerli

Reputation: 124

You need to use menuMaxHeight property of DropdownButton Widget.

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

Upvotes: 4

Trung Nguyen
Trung Nguyen

Reputation: 117

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

Upvotes: 1

Afolayan Ademola
Afolayan Ademola

Reputation: 159

Add this property menuMaxHeight: 200, to DropdownButton

Upvotes: 1

krishnaacharyaa
krishnaacharyaa

Reputation: 24912

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 !!

Upvotes: 0

BOM Nguyen
BOM Nguyen

Reputation: 121

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.

Upvotes: 8

Bholendra Singh
Bholendra Singh

Reputation: 1156

Use SizedBox Widget

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

Upvotes: 5

London Tran
London Tran

Reputation: 272

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

Upvotes: 13

Ayan Das
Ayan Das

Reputation: 278

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

Upvotes: 16

Related Questions