Is it possible to change size of DropdownMenuItem in Flutter?

Question

I have a DropdownButton that when it's open looks like this.

Is it possible to make it narrower to adjust to the text?

This is my DropdownButton:

      DropdownButton<dynamic>(
        value: state.locale.languageCode,
        items: [
          DropdownMenuItem(
            value: 'EN',
            child: SizedBox(
              child: Text(
                'EN',
              ),
            ),
          ),
          DropdownMenuItem(
            value: 'DE',
            child: SizedBox(
              child: Text(
                'DE',
              ),
            ),
          ),
        ],
        onChanged: (newValue) {
          dropdownCallback(newValue, state);
        },
        underline: DropdownButtonHideUnderline(child: Container()),
      ),

I have tried to wrap it in sized boxes, both the Button and Menu items, and it doesn't work. I can't find any parameters in the documentation to help me with it. Any ideas?

Answer 1

use menuWidth to give dropdown manu width

DropdownButtonHideUnderline(
    child: DropdownButton<Name>(
       menuWidth: 200,
       hint: Obx(() => 
         Padding(padding: constEdgeInsets.all(8.0),
            child: Container(
               margin: const EdgeInsets.only(left: 2),
               child: Text(
                 conterirPhoneCode.value ?? "+91",
                 style: TextStyle(
                          fontSize: 14,
                           color: Colors.black.withOpacity(0.8),
                 ),
               ),
              ),
            )),
         onChanged: (Name? newValue) {
           if (newValue != null) {
                 conterirPhoneCode.value"+${newValue.phoneCode}";
             }
         },
         items: countrieResult.value.map<DropdownMenuItem<Name>> 
             ((Name country) {
                 return DropdownMenuItem<Name>(
                      value: country,
                      child: Row(
                         children: [
                            Text(country.name ?? '',
                               style: TextStyle(
                                       fontSize: 14,
                                       color: Colors.black.withOpacity(0.8),
                                            ),
                                          ),
                                          Container(
                                            margin: const EdgeInsets.only(left: 2),
                                            child: Text(
                                              " (+${country.phoneCode})",
                                              style: TextStyle(
                                                fontSize: 14,
                                                color: Colors.black.withOpacity(0.8),
                                              ),
                                            ),
                                          ),
                                        ],
                                      ),
                                    );
                                  }).toList(),
                                  selectedItemBuilder: (BuildContext context) {
                                    return countrieResult.value.map<Widget>((Name value) {
                                      return Container(
                                        margin: const EdgeInsets.only(left: 2),
                                        child: Center(
                                          child: Text("+${value.phoneCode}",
                                            style: TextStyle(
                                              fontSize: 14,
                                              color: Colors.black.withOpacity(0.8),
                                            ),
                                          ),
                                        ),
                                      );
                                    }).toList();
                                  },
                                ),
                              ),

Answer 2

To change the height of each menu item exclusively and not the button, simply pass itemHeight: null as a parameter to DropdownButton, and within the child of each DropdownMenuItem, wrap it with a SizedBox/Container and specify the desired height.

If you want to change the width of the menu, you can use the menuWidth parameter available in DropdownButton.

Answer 3

You can Do like below.

 Container(
            width: 45,
            child:   DropdownButton<dynamic>(
              value: "EN",
              itemHeight: 50.0,
              isExpanded: true,
              items: [
                DropdownMenuItem(
                  value: 'EN',
                  child: SizedBox(
                    child: Text(
                      'EN',
                    ),
                  ),
                ),
                DropdownMenuItem(
                  value: 'DE',
                  child: SizedBox(
                    child: Text(
                      'DE',
                    ),
                  ),
                ),
              ],
              onChanged: (newValue) {
                // dropdownCallback(newValue, state);
              },
              underline: DropdownButtonHideUnderline(child: Container()),
              // },
            ) ,
          )

Answer 4

Try to wrap your Dropdown with Container and Set width it hope its help to you

Container(
      width: 25,
      child: DropdownButton<dynamic>(
        isExpanded: true,
        items: [
          DropdownMenuItem(
            value: 'EN',
            child: Text(
              'EN',
            ),
          ),
          DropdownMenuItem(
            value: 'DE',
            child: Text(
              'DE',
            ),
          ),
        ],
        onChanged: (newValue) {},
        underline: DropdownButtonHideUnderline(child: Container()),
      ),
    ),

Result->