Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set height of DropdownButtonFormField list

Tags:

flutter

dart

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),
          ],
        ),
      )),
);
like image 464
mauriii Avatar asked Dec 31 '18 05:12

mauriii


People also ask

How do you set the DropDown height on a flutter?

You just need to leave the itemHeight with the null value. It will make the height of the DropdownButton with the menu item's intrinsic height. Save this answer.

How do you set the height and width of a DropdownButton in flutter?

Dropdown menu always open below the button and you can edit its position by using the offset parameter. You can make the menu open above the button by setting showAboveButton to true. You can edit (button, menu and menu items) height, width and decoration as you want. You can align hint or value and customize them.

How do you open DropDown dialog below DropdownButton like spinner in flutter?

Option 1: Set DropDown. dart selectedItemOffset to -40 in then DropDownItems will always opens below the DropdownButton .


3 Answers

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!

like image 73
Amfstacks Avatar answered Oct 23 '22 20:10

Amfstacks


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",
              ),
like image 24
diegoveloper Avatar answered Oct 23 '22 19:10

diegoveloper


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
           ),
          ],
        ),
      )),
);
like image 7
alireza daryani Avatar answered Oct 23 '22 20:10

alireza daryani