'How can we reduce the height of dropdown list in flutter
How can I reduce the dropdownlist height in flutter. Now it is covering full screen.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _MyAppState();
}
}
class _MyAppState extends State<MyApp> {
List<DropdownMenuItem<String>> _dropdownMenuItemsyears;
String _selectedyear;
onChangeDropdownItemyear(String selectedYear) {
setState(() {
_selectedyear = selectedYear;
});
}
List<String> getYears() {
List<String> years = new List<String>();
var date = new DateTime(1900).year;
var now = new DateTime.now().year;
int dateFrom = date;
int dateTo = now;
for (int i = dateFrom; i <= dateTo; i++) {
years.add(i.toString());
}
years.add("Select");
return years.reversed.toList();
}
List<String> _yearvalue = new List<String>();
List<DropdownMenuItem<String>> buildDropdownMenuItemsyears(List Years) {
List<DropdownMenuItem<String>> itemsyears = List();
for (String Year in Years) {
itemsyears.add(
DropdownMenuItem(
value: Year,
child: Text(
Year,
overflow: TextOverflow.ellipsis,
style: new TextStyle(
fontFamily: 'Muli',
color: Colors.black,
fontSize: 16,
decoration: TextDecoration.none),
),
),
);
}
return itemsyears;
}
@override
void initState() {
// TODO: implement initState
super.initState();
_yearvalue = getYears();
_dropdownMenuItemsyears = buildDropdownMenuItemsyears(_yearvalue);
_selectedyear = _dropdownMenuItemsyears[0].value;
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('First app')),
body: Column(children: [
Container(
child: new Container(
width: 150,
transform: Matrix4.translationValues(-6, -12, 0),
child: new Container(
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: _selectedyear,
items: _dropdownMenuItemsyears,
//Text widgets that have more text and are larger than the hint
onChanged: onChangeDropdownItemyear,
),
),
),
),
)),
]),
),
);
}
}
Solution 1:[1]
By going through the properties that are available in the DropDownButton class mentioned in the link below it isn't possible.
Solution 2:[2]
You can use menuMaxHeight property. Try just like below:
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('First app')),
body: Column(children: [
Container(
child: new Container(
width: 150,
transform: Matrix4.translationValues(-6, -12, 0),
child: new Container(
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
menuMaxHeight: 500.0,
value: _selectedyear,
items: _dropdownMenuItemsyears,
//Text widgets that have more text and are larger than the hint
onChanged: onChangeDropdownItemyear,
),
),
),
),
)),
]),
),
);
}
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 | Zain Zafar |
| Solution 2 | Aaydin |

