How can I change the height of a DropdownButton in flutter.
I have tried to use Padding and SizedBox but none is realy working.
SizedBox just increases the container size while the DropdownButton is clamped to top left and therefore is not centered anymore.
Padding is ignored or moves the content outside of the button.
I do not want to change the size of the dropdown overlay but the button itself.
build(BuildContext context) {
return ThemeData(
data: ThemeData(canvasColor: Colors.white),
child: DropdownButton(
items: _items.map((item) => DropdownMenuItem(child: Text(item), value: item)).toList(),
isExpanded: true,
selectedItemBuilder: (_) {
return _items.map<Widget>((String lang) {
return Center(
widthFactor: 1,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12),
child: Text(lang, style: TextStyle(color: Colors.black))
),
);
}).toList();
}
)
)
}
Wrap it in a Container, give a height, width as per your need and set isExpanded true in DropDownButton. Also change dropdownbutton text font size as per your need.
Container(
height: 50.0,
width: 200.0,
child: DropdownButton(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
elevation: 16,
isExpanded: true,
style: TextStyle(color: Colors.deepPurple, fontSize: 20.0),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['One', 'Two', 'Free', 'Four']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
)
End product should look something like this,
Looks like the 'itemHeight' property for the DropdownButton class should do the trick. I tried it and it increased the height of my DropdownButton.
Here is some sample code I have from a previous project using the itemHeight:
DropdownButton<String>(
itemHeight: 100.0,
value: selectedCurrency,
items: dropdownItems,
onChanged: (value) {
setState(() {
selectedCurrency = value;
getData();
});
},
);
Note: Just make sure the value you provide isn't less than 48.0, since it will give an error.
Docs:
itemHeight property: https://api.flutter.dev/flutter/material/DropdownButton/itemHeight.html
Minimum itemHeight defined by 'kMinInteractiveDimension':
https://api.flutter.dev/flutter/material/kMinInteractiveDimension-constant.html
itemHeight: null,
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.
Use SizedBox Widget
SizedBox(
height: 30,
child:DropdownButton<String>(
value: selectedCurrency,
items: dropdownItems,
onChanged: (value) {},
))
The easiest of all methods is using DropDownButton2 which is built over DropDownButton
And just change the buttonHeight attribute
Not just buttonHeight , you can even change itemHeight , buttonwidth and many more customize
String? selectedValue;
List<String> items = [
'Item1',
'Item2',
'Item3',
'Item4',
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton2(,
items: items
.map((item) =>
DropdownMenuItem<String>(
value: item,
child: Text(
item,
),
))
.toList(),
value: selectedValue,
onChanged: (value) {
setState(() {
});
},
buttonHeight: 40,
buttonWidth: 140,
itemHeight: 40,
),
),
),
);
}
checkout : DropDownButton2 for more examples.
Hope it helps !!
You need to use menuMaxHeight property of DropdownButton Widget.
child: DropdownButton(
menuMaxHeight: 500.0,
value: '1',
items: setTotalPages(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
)
Add this property menuMaxHeight: 200, to DropdownButton
Related
enter image description here
I want to do this but I can't
enter image description here
I hope you teach me
You can achieve this by using DropdownButton widget
Here is a code example for using it:
#override
Widget build(BuildContext context) {
return DropdownButton<int>(
value: dropdownValue,
icon: const Icon(Icons.arrow_downward),
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
onChanged: (int? value) {
// This is called when the user selects an item.
setState(() {
dropdownValue = value!;
});
},
items: list.map<DropdownMenuItem<int>>((int value) {
return DropdownMenuItem<int>(
value: value,
child: Text("$value"),
);
}).toList(),
);
}
However, I recommend you using DatePicker see the documentation here since it will be easier to deal with dates in flutter using this widget.
I'm new to flutter and currently I'm trying to create a reusable dropdown button. The problem now is I wanted to have 15 item in my dropdown item list and it's taking all my screen space. I wanted to limit them so at first it will only show around 5-6 item and the user can scroll down the dropdown List and show the rest of the item list.
How can I achieve this ?
Here's my current code for reusable dropdown Button:
Widget build(BuildContext context) {
return Container(
decoration: widget.boxDecor,
padding: widget.padding,
margin: widget.margin,
width: widget.width,
height: widget.height,
child: Center(
child: DropdownButton<String>(
value: widget.initialValue ?? dropdownValue,
icon: widget.iconDropdown,
isExpanded: true,
elevation: 16,
style: primaryColor400Style.copyWith(
fontSize: fontSize10,
),
underline: Container(
height: 2,
decoration: BoxDecoration(
color: Colors.transparent,
),
),
onChanged: (String? newValue) {
if (newValue != 'Personal') {
Provider.of<SelectedTeamProvider>(context, listen: false)
.setSelectedTeamNameForTicket(newValue!);
} else {
Provider.of<SelectedTeamProvider>(context, listen: false)
.setSelectedTeamNameForTicket('');
}
if (widget.onChanged != null) {
widget.onChanged!(newValue!);
}
setState(() {
dropdownValue = newValue!;
});
},
items: itemLists.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value.tr()),
);
}).toList(),
),
),
);
}
You can use menuMaxHeight to control the size of the menu.
child: DropdownButton<int>(
menuMaxHeight: 300, // <-- Adjust this value to get the right number of items
...
),
I want to dropdownlist but i'm not able to do following things.
change the width of the dropdownbutton
make the dropdownlist to start at the dropdownbutton's height , not above it as default
adjust the height of the dropdownmenuitem
Want i want is
What i have is
The code goes like
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
// isDense: true,
// isExpanded: true,
itemHeight: null,
// menuMaxHeight: 10,
alignment: AlignmentDirectional.center,
elevation: 0,
value: selectedQuantity,
selectedItemBuilder: (BuildContext context) {
return _dropDownQuantities.map<Widget>((String item) {
return Container(
alignment: Alignment.center,
// color: Colors.green,
child: Text(
'Qty: $item',
style: TextStyle(fontSize: 14),
),
);
}).toList();
},
items: _dropDownQuantities.map((e) {
return DropdownMenuItem(
alignment: AlignmentDirectional.topStart,
child: Container(
child: Column(
children: [Container(child: Text(e))],
)),
value: e,
);
}).toList(),
hint: Text("Qty: 1 "),
onChanged: (value) {
setState(() {
selectedQuantity = value!;
});
}),
),
),
Use DropdownButton2 to achieve that.
Use buttonWidth property to change the width of the dropdownbutton.
Use offset property to change the position of the dropdown menu. You should add button's height to the dy offset to make it start at the dropdownbutton's height like this: Offset(0.0, "button's height")
Use itemHeight property to adjust the height of the dropdownmenuitem.
Disclaimer: I am the author of the package mentioned above.
I want to have a dropdown button that has a width based on the menu text length. The dropdown arrow does not have any additional spacing between text.
Like this:
Currently, I am getting this:
My dropdown button arrow is positioned based on the longest text.
My code:
Widget dropdownList(){
return Container(
child: DropdownButton<Location>(
value: _selectedValue,
icon: const Icon(Icons.expand_more),
iconSize: 30,
underline: SizedBox(),
onChanged: (Location? newValue) {
setState(() {
_selectedValue = newValue!;
});
},
style: const TextStyle(color: Colors.blue),
selectedItemBuilder: (BuildContext context) {
return locationList.map((Location value) {
return Container(
child: Text(
value.name,
style: const TextStyle(color: Colors.black,fontSize: 30,
fontWeight: FontWeight.w300),
),
);
}).toList();
},
items: locationList.map<DropdownMenuItem<Location>>((Location value) {
return DropdownMenuItem<Location>(
value: value,
child: Text(value.name, style: TextStyle(color: Colors.black,fontSize: 15,
fontWeight: FontWeight.w300)),
);
}).toList(),
),
);
}
According to the documentations there is a property for DropDownButton called isExpanded:
isExpanded → bool
Set the dropdown's inner contents to horizontally fill its parent. [...]
final
so just set:
isExpanded = true;
In flutter, a DropDownMenu's initial view (where it let us choose items) consists of the width of item having longest length. I want to give the initial view a fixed size.
But if I put DropDownMenu in a container with a fixed width, I get error like some amount of pixel over-followed.
Now how can I achieve a DropDownMenu whose width is fixed in flutter?
Container(
width:75,
child: DropdownButton(
value: selectedItem,
isExpanded: false,
hint: Text("All"),
onChanged: (selectedItem) {setState(() {
this.selectedItem = selectedItem;
});},
underline: Text(""),
isDense: true,
onTap: () {},
items: <String>["aaa", "bbb", "Item having the longest length", "Hello", "World", "good"].map((categoryName) => DropdownMenuItem<String>(
value: categoryName,
child: Text(
categoryName
),
)).toList(),
),
),
You can set the isExpanded property to true:
DropdownButton(
isExpanded: true,
)
and define a TextOverflow in the Text widget:
Text(
categoryName,
overflow: TextOverflow.fade,
)
Follows a full example:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
width: 155,
child: DropdownButton(
value: selectedItem,
isExpanded: true,
hint: Text("All"),
onChanged: (selectedItem) {
setState(() {
this.selectedItem = selectedItem;
});
},
underline: Text(""),
isDense: true,
onTap: () {},
items: <String>[
"aaa",
"bbb",
"Item having the longest length",
"Hello",
"World",
"good"
]
.map(
(categoryName) => DropdownMenuItem<String>(
value: categoryName,
child: Text(
categoryName,
overflow: TextOverflow.fade,
),
),
)
.toList(),
),
),
);