The dropdown icon is not centered

Question

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:

Answer 1

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
  // ...
)