I want to start the list of dropdown from its bottom, here my dropdown code
Container(
height: 55.0,
width: MediaQuery.of(context).size.width *
0.43,
child: DropdownButtonFormField<String>(
decoration: InputDecoration(
errorText: _validatedrop
? 'This is the required field'
: null,
focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Color(int.parse(textfieldBorderColor)))),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0))),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red, width: 5)),
),
items: genderlist
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value, child: Text(value));
}).toList(),
hint: Text(
"Male",
style: GoogleFonts.montserrat(
color: Color(
int.parse(hinttextColor))),
),
onChanged: (value) async {
setState(() {
this.selectedGender = value!;
if (this.selectedGender == "") {
_validatedrop = true;
} else {
_validatedrop = false;
}
});
},
)),
its output look like this
and i want its output like this, it should start from below
Please help if anyone know how to do this.
Try below code hope its helpful to you . you must used dropdown_below from here
Create your list
List genderList = [
{'no': 1, 'gender': 'Male'},
{'no': 2, 'gender': 'Female'},
{'no': 3, 'gender': 'Other'}
];
One varibale and list our value
List<DropdownMenuItem<Object?>> _dropdownTestItems = [];
var selectedGender;
Create initState() and dispose() method:
@override
void initState() {
_dropdownTestItems = buildDropdownTestItems(genderList);
super.initState();
}
@override
void dispose() {
super.dispose();
}
Add your selected gender value in dropdown
List<DropdownMenuItem<Object?>> buildDropdownTestItems(List genderList) {
List<DropdownMenuItem<Object?>> items = [];
for (var i in genderList) {
items.add(
DropdownMenuItem(
value: i,
child: Text(
i['gender'],
style: TextStyle(color: Colors.black),
),
),
);
}
return items;
}
Your Widget:
Padding(
padding: const EdgeInsets.all(8.0),
child: DropdownBelow(
itemWidth: 100,
itemTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.black),
boxTextstyle: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w400,
color: Colors.white54),
boxPadding: EdgeInsets.fromLTRB(13, 12, 13, 12),
boxWidth: 100,
boxHeight: 45,
boxDecoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(width: 1, color: Colors.black,),
),
icon: Icon(
Icons.arrow_downward,
color: Colors.black,
),
hint: Text(
'Gender',
style: TextStyle(
color: Colors.black,
),
),
value: selectedGender,
items: _dropdownTestItems,
onChanged: (selectedTest) {
setState(() {
selectedGender = selectedTest;
});
},
),
),