'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),
],
),
)),
);
Solution 1:[1]
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",
),
Solution 2:[2]
with this lines you can use DropdownButtonFormField
like 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
),
],
),
)),
);
Solution 3:[3]
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!
Solution 4:[4]
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 **
Solution 5:[5]
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: ......
)
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | tudorprodan |
Solution 2 | alireza daryani |
Solution 3 | Jigar Fumakiya |
Solution 4 | Ashutosh Pareek |
Solution 5 | Ravindra S. Patil |