Border around DropdownMenu - flutter

Question

I want to give border to DropdownButton and DropdownMenu like below image along with height itemHeight of 21px and some background color to DropdownMenuItem on mouse hover and on keyboard up or down keys:
Here is what I have tried till now:
var genderList = [
'Female',
'Male',
'Other',
];
String? selection;
final border = const OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: Color(0xFF00AFEF),
),
borderRadius: BorderRadius.all(Radius.circular(7)),
);
...
SizedBox(
height: 38.h,
// color: Colors.blue,
child: InputDecorator(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
border: border,
enabledBorder: border,
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
hint: Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 13.w),
child: const Text(
'Gender',
style: TextStyle(
fontSize: 14,
color: Color(0xFF606060),
),
),
),
),
value: selection,
icon: Container(
margin: EdgeInsets.symmetric(horizontal: 13.w),
height: 10.r,
width: 16.r,
alignment: Alignment.center,
child: SvgPicture.asset(
AppIcons.arrowDown,
),
),
onChanged: (String? val) {
setState(() => selection = val);
},
items: genderList.map((option) {
return DropdownMenuItem(
value: option,
child: Container(
width: double.infinity,
height: 21.h,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Color(0xFFCBF1FF),
border: Border.all(
color: Color(0xFF00AFEF), width: 1)),
child: Text(
option,
style: TextStyle(
fontSize: 12,
color: Color(0xFF606060),
),
),
),
);
}).toList(),
selectedItemBuilder: (con) {
return genderList.map((val) {
return Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: EdgeInsets.only(left: 13.w),
child: Text(
val,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF606060),
),
),
),
);
}).toList();
},
),
),
),
);
What I got,
DropDownButton:
DropdownMenu:
How can I get the desired design?

Answer 1

I was able to get the desired result using dropdown_button2
You can use dropdownXXXX parameters for editing related dropdown menu properties.
Only issue I find is that when giving dropdown menu border some radius its covered by selectedItemHighlightColor. So I have used some padding to overcome it.
SizedBox(
height: 38,
child: InputDecorator(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero,
border: border,
enabledBorder: border,
),
child: DropdownButtonHideUnderline(
child: DropdownButton2(
selectedItemHighlightColor: AppColors.lightBackground,
itemHighlightColor: AppColors.lightBackground,
dropdownDecoration: BoxDecoration(
border: Border.all(
color: AppColors.primary,
width: 1,
),
borderRadius: BorderRadius.circular(4),
),
dropdownElevation: 0,
dropdownPadding: const EdgeInsets.symmetric(
horizontal: 1.5,
vertical: 1.5,
),
itemPadding: EdgeInsets.zero,
customItemsHeights: [21, 21, 21],
isExpanded: true,
hint: const Padding(
padding: EdgeInsets.symmetric(horizontal: 14),
child: Text(
'Gender',
style: TextStyle(
fontSize: 14,
color: AppColors.secondaryText,
),
),
),
value: widget.value,
icon: Container(
margin: const EdgeInsets.symmetric(horizontal: 14),
height: 10,
width: 16,
alignment: Alignment.center,
child: SvgPicture.asset(
AppIcons.arrowDown,
),
),
onChanged: widget.onChanged,
items: widget.list.map((option) {
return DropdownMenuItem(
value: option,
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 14),
child: Text(
option,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: AppColors.secondaryText,
),
),
),
);
}).toList(),
selectedItemBuilder: (con) {
return widget.list.map((val) {
return Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(left: 14),
child: Text(
val,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 14,
color: AppColors.secondaryText,
),
),
),
);
}).toList();
},
),
),
),
);