CODEWITHSUNDEEP
dartflutter
mauriii
mauriii

Reputation: 497

Set height of DropdownButtonFormField list

In Flutter, DropdownButtonFormField's modal list keeps growing to fill some height limit that seems to be ~90% of the screen (or possibly, and more likely, the Container it's in). When it reaches that limit, it becomes scrollable. Is it possible to set that height limit?

Here's the code I'm working with

Scaffold(
  appBar: AppBar(title: Text(widget.title)),
  body: Container(
      padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
      child: Form(
        child: ListView(
          scrollDirection: Axis.vertical,
          children: <Widget>[
            //other widgets here
            DropdownButtonFormField(items: this.dropDownItems),
          ],
        ),
      )),
);

Upvotes: 13

Views: 28435

Answers (6)

Arturo Ruiz
Arturo Ruiz

Reputation: 1

SizedBox( //Or Container
   width: 100,
   height: 35, <----
   child: DropdownButtonFormField(...)
);

The decoration and padding attribute must be considered

Upvotes: 0

Rajasekaran K
Rajasekaran K

Reputation: 51

If you are using DropdownButton2 use dropdownMaxHeight: 300, for item list height

    DropdownButtonHideUnderline(
   child: DropdownButton2(
      isExpanded: true,  // For Expanded view (cover rest of the container width)
      dropdownMaxHeight: 300,  // For List Height
      hint: ......
      items: ......
   )
)

Upvotes: 0

Amfstacks
Amfstacks

Reputation: 191

I spent over 30 minutes searching for answers! I simply used the "menuMaxHeight" property of DropdownButton

It solved the problem

e.g

 child: DropdownButton(
            menuMaxHeight: 300,

This works!

Upvotes: 6

Ashutosh Pareek
Ashutosh Pareek

Reputation: 191

DropdownButtonHideUnderline(
            child: Container(
              height: // some height,
              padding: // add padding 
              decoration: // add decoration
              child: DropdownButtonFormField(
                decoration: InputDecoration.collapsed(hintText: ''),  
                // add some function according to you
              ),
            ),
          )

**This container decoration is responsible for showing decoration in your dropDown button **

Upvotes: 3

alireza daryani
alireza daryani

Reputation: 835

with this lines you can use DropdownButtonFormFieldlike a cheaps:

isDense: false,
itemHeight: 60,//what you need for height

so your code will be this :

Scaffold(
  appBar: AppBar(title: Text(widget.title)),
  body: Container(
      padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
      child: Form(
        child: ListView(
          scrollDirection: Axis.vertical,
          children: <Widget>[
            //other widgets here
            DropdownButtonFormField(items: this.dropDownItems
               isDense: false,
               itemHeight: 60,//what you need for height
           ),
          ],
        ),
      )),
);

Upvotes: 11

diegoveloper
diegoveloper

Reputation: 103561

I was checking the code of DropDown and there is no property to set the height of the Dialog, it just fill almost the screen.

I made a small change to the class and you can include to your project if you want:

https://gist.github.com/tudor07/9f886102f3cb2f69314e159ea10572e1

Usage

1- Add the file into your project.

2- Import the file with an alias to avoid conflicts.

 import 'custom_dropdown.dart' as custom;

3- Use the alias in your Widgets related to the DropDown, and add the height property: 

    Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Container(
          padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
          child: Form(
            child: ListView(
              scrollDirection: Axis.vertical,
              children: <Widget>[
                //other widgets here
                custom.DropdownButtonFormField(
                height: 200.0,
                items: this.dropDownItems),
              ],
            ),
          )),
    );

4- Don't forget to add the alias also in your DropdownMenuItem like this :

 custom.DropdownMenuItem(
                child: Text("Sample Tex"),
                value: "any_value",
              ),

Upvotes: 10

Related Questions