Flutter, how to decrease width of DropdownButtonFormField active menu? - flutter

I have a DropdownButtonFormField inside a Container. When I click it, selections open and the width of that menu take all of the width of screen, because of container. I want to decrease the width of that menu.
Here, you see in picture I want to make it half of screen width.
my code:
Center(
child: Container(
margin: EdgeInsets.only(top: _height * .02),
height: _height * .066,
width: _width * .9,
child: DropdownButtonFormField(
borderRadius: BorderRadius.circular(10),
focusColor: Colors.black,
icon: Image.asset("assets/Arrow down.png"),
value: chosen,
dropdownColor: Colors.white,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5))),
items: dropdownList
.map((e) => DropdownMenuItem(
child: Text(
e,
textAlign: TextAlign.center,
style:
TextStyle(color: Colors.grey, fontSize: 13),
),
value: e,
))
.toList(),
onChanged: (String? value) {
setState(() {
chosen = value;
});
},
),
),
),

To decrease the width of the active menu in a DropdownButtonFormField in Flutter, you can wrap it in a Container widget and specify the width for that container. Here's an example:
Container(
width: 100,
child: DropdownButtonFormField(
items: [
DropdownMenuItem(
child: Text('Option 1'),
value: 'Option 1',
),
DropdownMenuItem(
child: Text('Option 2'),
value: 'Option 2',
),
DropdownMenuItem(
child: Text('Option 3'),
value: 'Option 3',
),
],
onChanged: (value) {
// Handle the value change
},
),
)

Related

Remove default padding of DropDownButton in flutter?

I want to achieve a result like this where my dropdown button has very less padding.
This is what I currently have
so far I have tried adjusting height of dropDownButton, wrapping with a container, assigning padding but nothing works
here's my code
Container(
child: Center(
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton<String>(
dropdownColor: AppColors().white,
value: value,
style: TextStyles().medium12,
icon: Icon(
Icons.keyboard_arrow_down,
color: AppColors().green,
),
onChanged: (newValue) {
setState(() {
value = newValue!;
});
},
items: <String>[
AppStrings().getString().english_language,
AppStrings().getString().arabic_language,
AppStrings().getString().urdu_language,
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
),
);
}).toList(),
),
),
),
),
padding: EdgeInsets.only(
left: 10.w,
right: 10.w,
),
decoration: BoxDecoration(
border: Border.all(color: AppColors().green, width: 6.w),
borderRadius: BorderRadius.all(
Radius.circular(25.r) // <--- border radius here
),
),
);
can someone please help me? thankyou so much
just set dropdownbutton isDense: true

Flutter - How to Change Dropdown Item List Size and Alignment

I am using flutter DropdownButton for list out something and it worked well while selecting an option from the list the drop-down list appears full screen, I need to give some padding so that the user can cancel the list(hide).
The code:
ListView(children: <Widget>[
....
Container(
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
color: Colors.grey,
style: BorderStyle.solid,
width: 0.80),
),
alignment: Alignment.center,
child: DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
hint: Text('Select Your Height'),
icon: Icon(Icons.arrow_downward),
iconSize: 20,
iconEnabledColor: AppColors.PRIMARY_COLOR,
items: _heights.map((dropDownHieghtItem) {
return DropdownMenuItem(
value:
dropDownHieghtItem['height_id'].toString(),
child: Text(dropDownHieghtItem['height_name']));
}).toList(),
onChanged: (String newselectedHieght) {
setState(() {
heightID = newselectedHieght.toString();
});
},
value: heightID)),
),......
])
instead of using Text widget inside DropdownMenuItem use Container and add custom TextStyle
like this:
_heights.map((dropDownHieghtItem) {
return DropdownMenuItem(
value:
dropDownHieghtItem['height_id'].toString(),
child: Container(
alignment: Alignment.center,
child: Text(dropDownHieghtItem['height_name'],style: TextStyle(fontSize: 20,color: Colors.red),textAlign: TextAlign.center,)
)
);
}).toList(),

flutter drop-down list - retrieve selected value and not in a box format

I have made a drop-down list as in the following screen
enter image description here
Here:
I want the drop-down to be in a box like other TextFormFields and arrow to be bigger
my drop-down list background seems to be blurred and not visible
I want the selected value to be replaced on "Choose the id proof"
Following is my code:
Container(
padding: EdgeInsets.symmetric(horizontal: 20),
color: Colors.white,
child: _hintDown(),
),
SizedBox(height: 10),
my dropdown code is:
DropdownButton _hintDown() => DropdownButton<String>(
items: [
DropdownMenuItem<String>(
value: "1",
child: Text(
"Aadhar Card",
),
),
DropdownMenuItem<String>(
value: "2",
child: Text(
"Pancard",
),
),
],
onChanged: (value) {
print("value: $value");
},
hint: Text(
"Choose the id proof!",
style: TextStyle(
color: Colors.black,
),
),
);
Is this code enough or do I need to go for some other?
There are certain changes in the code as per the requirements. You must visit the flutter documentation and read about using DropdownButton class to achieve what you want
See the code clearly, and implement the code in your code base
// look at the comments too to understand the functionality
String dropdownValue = 'Choose the id proof!';
// Return a widgt container to give the border
// and then wrap it around your DropdownButton
Widget _hintDown() => Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(8.0)
),
child: Padding(
padding: EdgeInsets.all(5.0),
child: DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_drop_down),
iconSize: 30, //this inicrease the size
elevation: 16,
style: TextStyle(color: Colors.black),
// this is for underline
// to give an underline us this in your underline inspite of Container
// Container(
// height: 2,
// color: Colors.grey,
// )
underline: Container(),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Choose the id proof!', 'Adhaar Card', 'Pancard', 'Voter card', 'Passport']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
)
)
);
Result

Custom Dropdown Button and MenuItems Flutter

I am trying to build my own drop down button with separated and condensed menu items, like the image below:
here's the code I have tried so far, I got the drop down width to match the container but the items can't be customized so far and always the height starts from above the button and is not occupying the width of the container:
body: Container(
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Container(
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
border: Border.all(color: Colors.brown, width: 1.0)),
padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
isExpanded: true,
isDense: true,
value: selection,
icon: Icon(
Icons.arrow_drop_down,
color: Colors.brown,
),
iconSize: 40,
underline: Container(
height: 1,
color: Colors.transparent,
),
onChanged: (String val) => setState(() => selection = val),
items: settingsOptions.map((option) {
return DropdownMenuItem(
value: option,
child: Text(option),
);
}).toList(),
),
),
)
),
),
This is the output from the code:
How do I customize the items width, height and add dividers like in the first image? Thanks
This is an example modify as you like !
DropdownButton(
isExpanded: true,
isDense: true,
value: selection,
icon: Icon(
Icons.arrow_drop_down,
color: Colors.brown,
),
iconSize: 40,
underline: Container(
height: 1,
color: Colors.transparent,
),
onChanged: (String val) => setState(() => selection = val),
items: sampleList.map((option) {
return DropdownMenuItem(
value: option,
child: Container(
width:double.infinity,
alignment:Alignment.centerLeft,
padding: const EdgeInsets.fromLTRB(0,8.0,0,6.0),
child:Text(option),
decoration:BoxDecoration(
border:Border(top:BorderSide(color:Colors.grey,width:1))
)
),
);
}).toList(),
selectedItemBuilder:(con){
return sampleList.map((m){
return Text(m,);
}).toList();
}
)
I came across a flutter Library called dropdown_below in pub.dev. It has additional methods that can allow you customize dropdownMenuItem to your preferred layout.
DropdownBelow(
value: category,
// isDense: true,
itemWidth: MediaQuery.of(context).size.width * 0.92,
itemTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.black),
boxTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.grey.shade600),
boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
boxWidth: MediaQuery.of(context).size.width,
boxHeight: 60,
hint: Text('choose video'),
items: video.data.value.videos
.map((e) => DropdownMenuItem(
onTap: () => e.title,
value: e.title ?? category,
child: Container(
width: double.infinity,
decoration: BoxDecoration(),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
e.title ?? '$category',
overflow: TextOverflow.ellipsis,
),
),
),
))
.toList(),
onChanged: (video) {
context.read(videoProvider).cateroryOnChange(video);
},
),
Library Link: https://pub.dev/packages/dropdown_below
The problem with the DropdownButton is that the menu will open randomly based on the selected index and other things. Also, You can't edit its code by just trying to pass offset as the logic code of the paint work based on that and trying to hardcode the selectedItemOffset to a value won't work perfectly fine.
So use DropDownButton2 , which is built just over this .
Package: DropDownButton2
Credits: Ahmed Elsayed
For reference: Refer this link

How to center text in DropdownButton?

I'm trying to make the DropdownButton hint, text and menu items appear in the center instead of left but TextAlign.center does not seem to be doing anything.
Image of Dropdown with the hint:
Image of Dropdown with the selected item as text:
Image of the Menu items when arrow is pressed:
My code:
return Theme(
data: ThemeData(canvasColor: blackTrans2, brightness: Brightness.dark),
child:Container(
width: MediaQuery.of(context).size.width/1.2,
decoration: BoxDecoration(
color: blackTrans,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child:DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: _dateSelected,
hint: AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,),
isDense: false,
onChanged: (String newValue){
setState(() {
_dateSelected = newValue;
});
},
items: snapshot.data.documents.map((DocumentSnapshot document){
return DropdownMenuItem<String>(
value: document.documentID,
child: AutoSizeText(document.documentID, style: TextStyle(color: white,),textAlign: TextAlign.center,),
);
}).toList(),
),
),
)
)
);
Not sure if this affects anything but I'm using AutoSizeText in order to resize my text dynamically.
Update: I managed to make the Menu items appear in the center by using Center, but the text and hint is still remains to the left tho even with Center... :
// Does not seem to change the hint or text position (when menu item selected)
hint: Center(child:AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,)),
// Changes the menu item to the center instead of left
child: Center(child:AutoSizeText(document.documentID, style: TextStyle(color: white,),textAlign: TextAlign.center,)),
For those who are seeing option to change flutter class dropdown.dart. You don't need to do that.
Do this:
set property isExpanded to true
use Center widget with DropdownMenuItem class children.
IsExpanded will also take care of overflow.
DropdownButton(
isExpanded: true,
value: category_selected,
items: categories.map<DropdownMenuItem<String>>((var value) {
return DropdownMenuItem<String>(
value: value["name"],
child: Center(
child: Text(
value["name"],
textAlign: TextAlign.center,
),
),
);
}).toList(),
),
A simple and straight answer is Not Possible. But there's always a way.
You have to go to the dropdown.dart provided with the flutter package.If you're using VSCode Ctrl+Click on the DrpoDownMenuItem class and change the following code.
#override
Widget build(BuildContext context) {
return Container(
height: _kMenuItemHeight,
alignment: AlignmentDirectional.centerStart,
child: child,
);
}
Change the alignment: AlignmentDirectional.centerStart to alignment: AlignmentDirectional.center and it should work :)
Yes you can do it like the following code sample.
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(5))),
margin: EdgeInsets.only(top: 5, bottom: 5),
padding: EdgeInsets.only(right: 5, left: 5),
child: ConstrainedBox(
constraints: const BoxConstraints(
minWidth: double.infinity,
),
child: Container(
child: Center(
child: DropdownButtonHideUnderline(
child: DropdownButton(
iconSize: 0.0,
items: <DropdownMenuItem<int>>[
new DropdownMenuItem(
child: new Text(
'Optional Information',
style: TextStyle(color: Colors.black54),
),
),
new DropdownMenuItem(
child: new Text(
'Male',
style: TextStyle(color: Colors.black54),
),
),
new DropdownMenuItem(
child: new Text(
'Female',
style: TextStyle(color: Colors.black54),
)),
],
onChanged: (V) {},
),
),
),
),
),
),
Here i have used my color and decoration view for my porpose you can change it as per you requirement.
You can use the code below to perfectly position the text in the dropdown at the center and still have the dropdown icon positioned at the right end of your container.
DropdownButtonHideUnderline(
child: DropdownButton(
value: dropdownvalue,
items: items.map((String items) {
return DropdownMenuItem(
value: items,
child: Center(
child: Text(items),
),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
isExpanded: true,
),
),
So we simply add isExpanded: true, and add a Center() widget to the Text(items) in the DropdownMenuItem().
There is a alignment property in DropdownMenuItem class.
DropdownButton(
//...
isExpanded: true, // this will take all width available
)
If you want to change it's width wrap DropdownButton with SizedBox or Padding.
item: [
DropdownMenuItem(
//...
alignment: AlignmentDirectional.center,
),
]
in your DropdownButtonFormField or DropdownButton
add
isExpanded: true
thing like this
DropdownButtonFormField<String>(isExpanded: true)