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

Question

In Flutter, I can build a Dropdown with DropdownMenuItems, like this:

The DropdownMenuItems I add are always wider than the dropdown itself:

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

Mary · Accepted Answer · 2018-03-08 00:13:07Z

118

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

edited Mar 8, 2018 at 0:13

answered Feb 28, 2018 at 22:18

Mary

20.7k24 gold badges65 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shangari C Over a year ago

Is it possible to set height of DropDown Button.

Tony Over a year ago

@ShangariC yes, I think you can use padding.

shababhsiddique Over a year ago

now the opened dropdown menu matches the button, in total size, but the text itself don't align, it seem to be the padding in each item that causing problem. how do I remove the padding on individual choices? if I add it to the item directly it also add padding to selected (button item)

mister_cool_beans Over a year ago

this proposed solution creates a new problem where the dropdown label text is no longer aligned as it is now indented

Ali Bayram · Accepted Answer · 2019-11-07 13:16:12Z

40

I solved this problem with changing isExpanded to true;

return Container(
    width: 300.0,
    child: DropdownButtonHideUnderline(
      child: DropdownButton(
        isExpanded: true,
        value: name,
        items: listOfDropdownMenuItems,
        onChanged: onChanged,
        style: Theme.of(context).textTheme.title,
      ),
    ),
);

answered Nov 7, 2019 at 13:16

Ali Bayram

7,9912 gold badges24 silver badges29 bronze badges

4 Comments

atereshkov Over a year ago

Didn't help me.

user321553125 Over a year ago

What about padding?

Kamlesh Over a year ago

showing error in console - Unfortunately, this object's geometry is not known at this time, probably because it has never been laid out. This means it cannot be accurately hit-tested. E/flutter (22476): If you are trying to perform a hit test during the layout phase itself, make sure you only hit test nodes that have completed layout (e.g. the node's children, after their layout() method has been called).

Ahmad Khan Over a year ago

Actually, this takes a little more than the button width

Abdullah Khan · Accepted Answer · 2020-12-24 17:53:00Z

isExpanded: true will stretch the width to full screen. But if you want a customise drop-down. Here is my customdropdown.dart

import 'package:flutter/material.dart';
class CustomDropDown extends StatelessWidget {
  final value;
  final List<String> itemsList;
  final Color dropdownColor;
  final Function(dynamic value) onChanged;
  const CustomDropDown({
    @required this.value,
    @required this.itemsList,
    this.dropdownColor,
    @required this.onChanged,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(left: 20, top: 3, bottom: 3, right: 20),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          color: Colors.white,
        ),
        child: DropdownButtonHideUnderline(
          child: Padding(
            padding: const EdgeInsets.only(left: 14.0, right: 14),
            child: DropdownButton(
              isExpanded: true,
              dropdownColor: dropdownColor,
              value: value,
              items: itemsList
                  .map((String item) => DropdownMenuItem<String>(
                        value: item,
                        child: Text(item),
                      ))
                  .toList(),
              onChanged: (value) => onChanged(value),
            ),
          ),
        ),
      ),
    );
  }
}

Now you can call it like this.

CustomDropDown(
   value: selectedValue,
   itemsList: ['Music', 'Photographer'],
   onChanged: (value) {
        setState(() {
            selectedValue = value;
        });
    },
),

Muhaiminur Rahman · Accepted Answer · 2022-12-05 12:59:18Z

In my case this is working.

                  Container(
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: ContactColors.hint2, width: 2)),
                    width: double.infinity,
                    margin: const EdgeInsets.all(5),
                    child: DropdownButtonHideUnderline(
                        child: DropdownButton<String>(
                      hint: new Text("Select City"),
                      isExpanded: true,
                      alignment: Alignment.center,
                      value: dropdownValue,
                      icon: const Icon(Icons.arrow_downward),
                      elevation: 16,
                      style: const TextStyle(color: ContactColors.white),
                      onChanged: (String? value) {
                        // This is called when the user selects an item.
                        setState(() {
                          dropdownValue = value!;
                        });
                      },
                      items: list
                          .map<DropdownMenuItem<String>>((String value) {
                        return DropdownMenuItem<String>(
                          value: value,
                          child: Container(
                            margin: const EdgeInsets.all(10),
                            child: Text(value,
                                style: const TextStyle(
                                    color: ContactColors.primaryColor)),
                          ),
                        );
                      }).toList(),
                    )),
                  ),

ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ · Accepted Answer · 2022-10-02 14:09:17Z

I solved it by adding isExpanded: true then wraping dropdown to a container then again wraping to padding widget this worked for me

code : -

Container(
                        height: 60,
                        width: double.infinity,
                         decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10),
                    border: Border.all(color: borderContainerColor, width: 3)),
                        child: Padding(
                          padding: const EdgeInsets.all(8.0), //here include this to get padding
                          child: DropdownButton(

                            isExpanded: true,
                            underline: Container(),

                            alignment: Alignment.bottomCenter,


                            elevation: 0,
                            borderRadius: BorderRadius.circular(5 ),
                            value: dropdownvalue,
                            icon: const Icon(Icons.keyboard_arrow_down),

                            items: items.map((String items) {
                              return DropdownMenuItem(
                                value: items,
                                child: Text(items),
                              );
                            }).toList(),
                            onChanged: (String? newValue) {
                              setState(() {
                                dropdownvalue = newValue!;
                              });
                            },
                          ),
                        ),
                      ),

Damini Suthar · Accepted Answer · 2022-03-21 01:53:01Z

1

Try with this parameter isDense it will shrink the widget and extra padding will be removed just like this

DropdownButton(
          isDense: true,
          value : lname_listValue,
          items: casteEDList.map((String items)
                   {
                       return DropdownMenuItem(
                              value: items,
                              child: Text(items),);
                   }).toList(),
                   onChanged: (String? newValue) {
                              setState(() {
                              lname_listValue = newValue!;
                              },);
                   },
  ),

edited Mar 21, 2022 at 1:53

Damini Suthar

1,4902 gold badges18 silver badges45 bronze badges

answered Mar 11, 2022 at 10:17

Vismay Viradiya

1095 bronze badges

1 Comment

JAgüero Over a year ago

Didn't do anything

sajid · Accepted Answer · 2024-09-30 06:14:16Z

you can change DropdownMenu width using width property in side DropdownMenu. following example may be solve your proble.

in build method find out screen width double width = MediaQuery.sizeOf(context).width;

double width = MediaQuery.sizeOf(context).width;

double halfScreenWidth = width / 2;

List genderList = ['Male', 'Female', 'Other'];
String genderValue = "";

DropdownMenu<String>(
                  initialSelection: genderList.first,
                  width: halfScreenWidth, // Add this line you also add direct width 200
                  label: Text("Gender"),
                  onSelected: (value) {
                    setState(() {
                      genderValue = value.toString();
                    });
                  },
                  dropdownMenuEntries: genderList.map<DropdownMenuEntry<String>>((String value) {
                    return DropdownMenuEntry<String>(
                        value: value, label: value);
                  }).toList(),
                ),

Collectives™ on Stack Overflow

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

7 Answers 7

4 Comments

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

4 Comments

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related