I have created the dropdown widget below to customize when I'm using
import 'package:flutter/material.dart';
import 'package:universalteam/Components/AppColors.dart';
Widget CustomDropdown({
required List<String> items,
required String hint,
double borderRadius = 16,
double width = double.infinity,
double height = 60,
double left = 0,
double right = 0,
double top = 0,
double bottom = 0,
double fontSize = 16,
Color color = AppColors.black,
Color containerBackgroundColor = AppColors.RegisterPageTextFieldColor,
Color textFieldBackgroundColor = AppColors.RegisterPageTextFieldColor,
double contentPaddingLeft = 12,
double contentPaddingRight = 0,
TextAlign textalign = TextAlign.left,
bool isRequired = false,
void Function(String?)? onChanged,
}) {
String? _selectedItem;
return Visibility(
visible: true,
child: Container(
width: width,
height: height,
padding: EdgeInsets.only(
left: left,
right: right,
top: top,
bottom: bottom,
),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
color: containerBackgroundColor,
),
child: Container(
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
color: textFieldBackgroundColor,
),
child: DropdownButtonFormField<String>(
value: _selectedItem,
style: TextStyle(
fontSize: fontSize,
fontFamily: "Poppins",
fontWeight: FontWeight.w400,
color: AppColors.darkGray,
),
decoration: InputDecoration(
label: RichText(
softWrap: true,
text: TextSpan(
text: hint,
style: TextStyle(
color: AppColors.darkGray,
),
children: [
isRequired == true
? TextSpan(
text: ' * ',
style: TextStyle(
color: AppColors.darkMagenta,
fontWeight: FontWeight.bold,
),
)
: TextSpan(text: '')
],
),
),
floatingLabelBehavior: FloatingLabelBehavior.never,
border: InputBorder.none,
contentPadding: EdgeInsets.only(
left: contentPaddingLeft,
right: contentPaddingRight,
),
),
onChanged: (String? newValue) {
_selectedItem = newValue;
onChanged?.call(newValue);
},
items: items.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
textAlign: TextAlign.center,
style: TextStyle(
color: Color(0xFF5F5F60),
fontSize: 13,
fontFamily: 'Poppins',
fontWeight: FontWeight.w400,
height: 0.12,
),
),
);
}).toList(),
icon: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(
Icons.keyboard_arrow_down,
size: 25,
color: AppColors.darkMagenta,
),
SizedBox(width: 17)
],
),
),
),
),
);
}
however when I call it the icon is not centered vertically. I have been changing everything around to find a way but couldn't figure it out. Also is there a way to customize how the dropdown options are displayed?
This is how it looks:
The existence of label
in the InputDecoration
is causing the dropdown icon to be pushed a bit to the bottom. To have a label
while still keeping the icon centered, set the icon as the suffixIcon
of the InputDecoration
instead.
DropdownButtonFormField<String>(
decoration: InputDecoration(
suffixIcon: Icon( // (1) Put the Icon widget in this `suffixIcon` parameter
Icons.keyboard_arrow_down,
size: 25,
color: AppColors.darkMagenta,
),
// ...
),
icon: SizedBox(), // (2) Set the dropdown icon to a blank widget
// ...
)