Flutter自定义Dropdown组件下拉图标垂直未居中及选项样式定制问题

我开发了如下自定义Dropdown组件以满足个性化需求，但调用时发现下拉图标未垂直居中，同时想咨询如何自定义下拉选项的显示样式：

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)
            ],
          ),
        ),
      ),
    ),
  );
}

组件实际效果：

问题1：下拉图标未垂直居中的解决办法 #

• 设置isExpanded: true：给DropdownButtonFormField添加该属性，让组件占满父容器宽度，确保图标与文本区域对齐。
• 调整contentPadding垂直间距：修改InputDecoration中的contentPadding，增加垂直方向的居中适配，示例：

  contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: contentPaddingLeft),
  

• 优化图标布局：去掉图标外层的Row，改用Padding设置右侧间距，避免额外布局干扰：

  icon: Padding(
    padding: EdgeInsets.only(right: 17),
    child: Icon(
      Icons.keyboard_arrow_down,
      size: 25,
      color: AppColors.darkMagenta,
    ),
  ),
  

• 简化嵌套容器：移除外层冗余的Container对齐设置，避免与DropdownButtonFormField的布局逻辑冲突。

问题2：自定义下拉选项的显示样式 #

可以通过以下方式实现个性化定制：

• 自定义DropdownMenuItem的子组件：直接在DropdownMenuItem的child中使用带样式的Widget，比如带背景色、边框的容器：

  items: items.map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8),
          color: value == _selectedItem ? AppColors.darkMagenta.withOpacity(0.1) : Colors.transparent,
        ),
        child: Text(
          value,
          style: TextStyle(
            color: value == _selectedItem ? AppColors.darkMagenta : Color(0xFF5F5F60),
            fontSize: 13,
            fontFamily: 'Poppins',
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    );
  }).toList(),
  

• 设置下拉菜单整体样式：给DropdownButtonFormField添加dropdownColor设置菜单背景色，menuMaxHeight限制菜单高度：

  dropdownColor: AppColors.RegisterPageTextFieldColor,
  menuMaxHeight: 300,
  

• 通过Theme统一配置：用Theme包裹组件，修改dropdownMenuTheme实现全局样式定制：

  Theme(
    data: ThemeData(
      dropdownMenuTheme: DropdownMenuThemeData(
        menuStyle: MenuStyle(
          backgroundColor: MaterialStateProperty.all(AppColors.RegisterPageTextFieldColor),
          shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(16))),
        ),
      ),
    ),
    child: DropdownButtonFormField<String>(
      // 原有属性
    ),
  )
  

内容的提问来源于stack exchange，提问作者a a