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

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.

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