Make Flutter DropdownMenu Smaller

Question

I'm attempting to reduce the height of a Dropdown menu, I have tried in this way:

SizedBox(
  height: 30,
  child: Container(
    decoration: BoxDecoration(color: Colors.white),
    child: DropdownMenu<String>(
      // inputDecorationTheme: InputDecorationTheme(alignLabelWithHint: ),
      textStyle: TextStyle(fontSize: 10),
      inputDecorationTheme: InputDecorationTheme(
          isCollapsed: true
      ),
      dropdownMenuEntries: [
        DropdownMenuEntry(value: "Name - First", label: "Name - First",
            style: ButtonStyle(textStyle: MaterialStateTextStyle.resolveWith(
              (states) => TextStyle(fontSize: 10) 
            ))
        ),
      ],
    ),
  ),
),

To reduce its height but the result is the following. How can I easily make the dropdown menu smaller?

DropdownMenu height change attempt

I was expecting to make the Dropdown menu smaller

Rambert

Answer 1

You can control the height of dropdown menu using the constraints property in the InputDecorationTheme.

DropdownMenu<String>(
          dropdownMenuEntries: const [
            DropdownMenuEntry<String>(
              label: 'One',
              value: 'one',
            ),
            DropdownMenuEntry<String>(
              label: 'Two',
              value: 'two',
            ),
          ],
          hintText: 'Select',
          inputDecorationTheme: InputDecorationTheme(
            isDense: true,
            contentPadding: const EdgeInsets.symmetric(horizontal: 16),
            constraints: BoxConstraints.tight(const 
             Size.fromHeight(40)),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        )

Make sure to adjust the content padding accordingly.

Pizza

This approach is the one that is actually working, imageupload.io/hjNnxlQeD9tHrdL the only problem is that the icon on the right is now moving toward the bottom, how can I move it in the middle again? – Rambert

It works but I find setting isDense makes no difference. – Jocko

@MarcoManzi You can use Transform.translate to fix the icon position, see my addon answer: https://mcmap.net/q/1599093/-make-flutter-dropdownmenu-smaller – Equipage

Answer 2

In addition to the answer provided by Narendra Bhatt, you can fix the placement of the drop down arrow icon with Transform.translate:

trailingIcon: Transform.translate(
  offset: Offset(3, -5),
  child: Icon(Icons.arrow_drop_down),
),

Equipage

Answer 3

I See you are wrapping the container with sizedBox to reduce its size, that is not a good way, you can provide height or width directly to the container if you want to reduce its size.

Now talking about your question, if you just want to reduce you select menu height you can define menuHeight inside of the DropdownMenu and it will give you your desired results.

Here's your code

Container(
          height: 30.0,
          decoration: BoxDecoration(color: Colors.white),
          child: DropdownMenu<String>(
            textStyle: TextStyle(fontSize: 10),
            inputDecorationTheme: InputDecorationTheme(isCollapsed: true),
            // Here update this
            menuHeight: 50, 
            dropdownMenuEntries: [
              DropdownMenuEntry(
                value: "Name - First",
                label: "Name - First",
                style: ButtonStyle(
                  textStyle: MaterialStateTextStyle.resolveWith(
                    (states) => TextStyle(fontSize: 10),
                  ),
                ),
              ),
              DropdownMenuEntry(
                value: "Name - Second",
                label: "Name - Second",
                style: ButtonStyle(
                  textStyle: MaterialStateTextStyle.resolveWith(
                    (states) => TextStyle(fontSize: 10),
                  ),
                ),
              ),
            ],
          ),
        )

Unflinching

Answer 4

wrap it in container instead of sizedbox

container(
                    width: x,
                    height: y ,
                    child: Container(
                      decoration: BoxDecoration(color: Colors.white),
                      child: DropdownMenu<String>(
                        // inputDecorationTheme: InputDecorationTheme(alignLabelWithHint: ),
                        
                        textStyle: TextStyle(fontSize: 10),
                        inputDecorationTheme: InputDecorationTheme(
                            isCollapsed: true
                        ),
                        dropdownMenuEntries: [
                          DropdownMenuEntry(value: "Name - First", label: "Name - First",
                              style: ButtonStyle(textStyle: MaterialStateTextStyle.resolveWith((states) => TextStyle(fontSize: 10) ))),
                        ],

                      ),
                    ),
                  ),

Phia