Flutter自定义下拉按钮实现求助：如何达成目标样式

我想要创建一个如下所示样式的Flutter下拉按钮，尝试自行实现但未成功，也没找到合适的第三方包，该怎么实现？

目标样式 #

我的尝试代码 #

class CustomDropdown extends StatefulWidget {
  const CustomDropdown({super.key});

  @override
  State<CustomDropdown> createState() => _CustomDropdownState();
}

class _CustomDropdownState extends State<CustomDropdown> {
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 10),
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.grey,
          width: 0.4,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: dropdownValue,
          isExpanded: true,
          icon: SvgPicture.asset(
              height: 24, width: 24, dropdownIcon, semanticsLabel: 'Acme Logo'),
          iconSize: 24,
          elevation: 16,
          style: GoogleFonts.raleway(
            textStyle: TextStyle(
              color: blackColor,
              fontSize: 18,
              fontWeight: FontWeight.w400,
            ),
          ),
          onChanged: (newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: <String>['One', 'Two', 'Three', 'Four']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    );
  }
}

我的实现效果 #

要实现目标样式，需要从收起按钮布局和下拉菜单样式两方面针对性调整：

1. 优化收起按钮的布局对齐 #

你的现有代码中，DropdownButton自带的内边距会导致文字与图标布局偏移，需要清除默认内边距，同时调整外部Container的padding让按钮更饱满：

// 外部Container的padding调整
padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),

// DropdownButton添加属性清除默认内边距
contentPadding: EdgeInsets.zero,

2. 自定义下拉菜单的核心样式 #

目标样式的下拉菜单带圆角边框、无阴影，且选中项有高亮背景，可通过menuStyle（Flutter 3.10+支持）定制菜单容器，同时自定义每个选项的样式：

修改后的完整代码

class CustomDropdown extends StatefulWidget {
  const CustomDropdown({super.key});

  @override
  State<CustomDropdown> createState() => _CustomDropdownState();
}

class _CustomDropdownState extends State<CustomDropdown> {
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 16),
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.grey.shade300,
          width: 1,
        ),
        borderRadius: BorderRadius.circular(16),
      ),
      child: DropdownButtonHideUnderline(
        child: DropdownButton<String>(
          value: dropdownValue,
          isExpanded: true,
          icon: const Icon(Icons.keyboard_arrow_down, size: 24), // 可替换为你的SVG图标
          iconSize: 24,
          elevation: 0, // 去除菜单阴影
          style: const TextStyle(
            color: Colors.black,
            fontSize: 18,
            fontWeight: FontWeight.w400,
          ),
          contentPadding: EdgeInsets.zero, // 清除默认内边距
          // 定制下拉菜单容器样式
          menuStyle: MenuStyle(
            shape: MaterialStatePropertyAll(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16),
                side: BorderSide(color: Colors.grey.shade300, width: 1),
              ),
            ),
            padding: const MaterialStatePropertyAll(EdgeInsets.symmetric(vertical: 8)),
            elevation: const MaterialStatePropertyAll(0),
          ),
          onChanged: (newValue) {
            setState(() {
              dropdownValue = newValue!;
            });
          },
          items: <String>['One', 'Two', 'Three', 'Four']
              .map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              // 定制选项的选中/未选中样式
              child: Container(
                padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 16),
                width: double.infinity,
                decoration: BoxDecoration(
                  color: dropdownValue == value ? Colors.grey.shade100 : Colors.transparent,
                  borderRadius: BorderRadius.circular(12),
                ),
                child: Text(value),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键调整说明 #

• 收起按钮：调整Container的padding让按钮更饱满，清除DropdownButton的默认内边距，避免布局错位。
• 下拉菜单：通过menuStyle设置菜单的圆角、边框和内边距，关闭elevation去掉阴影，贴合目标样式的扁平感。
• 选项样式：给每个DropdownMenuItem添加容器，设置选中时的浅灰背景和圆角，同时调整内边距提升视觉舒适度。

如果你的Flutter版本低于3.10，无法使用menuStyle，可以改用PopupMenuButton完全自定义下拉内容（灵活性更高，需自行处理选中状态和弹出逻辑）。

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