Flutter - DropdownButton overflow
I managed to solve the issue by wrapping the child of DropdownMenuItem in a SizedBox and by giving sizedBox a fixed width which will not overflow the UI and still look good.
eg.
new DropdownMenuItem<String>(
value: value,
child: new SizedBox(
width: 200.0,
child: new Text('Long text with ${value} ')
),
)
The easiest solution is to add the isExpanded
property to true
in DropdownButton
For example:
new DropdownButton(
isExpanded: true, //Adding this property, does the magic
items: [
new DropdownMenuItem(
child: Text("Some large text that needs to be wrapped or ellipsized",
overflow: TextOverflow.ellipsis),
),
new DropdownMenuItem(
child: Text("This is another large text that needs to be wrapped or ellipsized",
overflow: TextOverflow.ellipsis),
),
new DropdownMenuItem(
child: Text("And one more large text that needs to be wrapped or ellipsized",
overflow: TextOverflow.ellipsis),
)
],
onChanged: (val) {
//print(val);
}),