Question 252452 in Flutter Question posted in
The official Flutter documentation can be found here.

Make Flutter DropdownMenu Smaller

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?

DropdownManu Height change attempt

I was expecting to make the Dropdown manu smaller

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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),
                  ),
                ),
              ),
            ],
          ),
        )
    Login or Signup to reply.
  3. 0

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

                      ),
                    ),
                  ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search