如何在Flutter Chips中添加下拉菜单？求实现代码或相关包

方案一：原生组件自定义实现 #

无需额外依赖，用Flutter原生的Chip配合PopupMenuButton就能实现核心效果，以下是最简示例代码：

class DropdownChip extends StatefulWidget {
  final String label;
  final List<String> options;

  const DropdownChip({super.key, required this.label, required this.options});

  @override
  State<DropdownChip> createState() => _DropdownChipState();
}

class _DropdownChipState extends State<DropdownChip> {
  String? _selectedOption;

  @override
  Widget build(BuildContext context) {
    return Chip(
      label: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(_selectedOption ?? widget.label),
          const SizedBox(width: 4),
          const Icon(Icons.arrow_drop_down, size: 18),
        ],
      ),
      onPressed: () {
        showMenu(
          context: context,
          position: RelativeRect.fromLTRB(0, 0, 0, 0),
          items: widget.options.map((option) {
            return PopupMenuItem(
              value: option,
              child: Text(option),
              onTap: () {
                setState(() {
                  _selectedOption = option;
                });
              },
            );
          }).toList(),
        );
      },
    );
  }
}

// 使用示例
DropdownChip(
  label: "选择选项",
  options: ["选项1", "选项2", "选项3"],
)

这段代码通过Chip的onPressed触发下拉菜单，选中选项后实时更新Chip显示文本，完全贴合Material3的交互逻辑。

方案二：第三方包推荐 #

如果需要更丰富的样式或开箱即用的扩展功能，可以考虑这些包：

• flutter_chips_input：支持带下拉选择的Chip输入，可自定义样式与交互逻辑
• chip_list：提供多种Chip变体，包含带下拉菜单的类型，配置简单

Material3设计指南参考 #

对应的Material3 Chips组件核心设计要求：

下拉菜单Chip需保持紧凑视觉样式，点击弹出的菜单需与Chip对齐，选项选中后立即更新Chip显示内容，交互反馈清晰明确。

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