如何在Flutter中实现带圆形颜色容器的下拉菜单？

直接用Flutter自带的DropdownButton配合自定义DropdownMenuItem就能实现需求，下面是具体实现代码：

import 'package:flutter/material.dart';

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

  @override
  State<ColorDropdown> createState() => _ColorDropdownState();
}

class _ColorDropdownState extends State<ColorDropdown> {
  // 定义颜色选项列表
  final List<Color> _colorOptions = [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.yellow,
    Colors.purple,
    Colors.orange,
  ];

  // 记录选中的颜色
  Color? _selectedColor;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: DropdownButton<Color>(
          value: _selectedColor,
          // 未选中时的提示文字
          hint: const Text('选择颜色'),
          // 选中颜色后的回调逻辑
          onChanged: (Color? newValue) {
            setState(() {
              _selectedColor = newValue;
            });
          },
          // 生成带圆形颜色块的下拉选项
          items: _colorOptions.map((Color color) {
            return DropdownMenuItem<Color>(
              value: color,
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  // 圆形容器展示颜色
                  Container(
                    width: 22,
                    height: 22,
                    decoration: BoxDecoration(
                      color: color,
                      shape: BoxShape.circle,
                      border: Border.all(color: Colors.grey.shade300),
                    ),
                  ),
                  const SizedBox(width: 10),
                  // 显示颜色名称
                  Text(
                    color.toString().split('(')[0],
                    style: const TextStyle(fontSize: 14),
                  ),
                ],
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

关键说明 #

• 每个下拉选项通过Row组合了圆形容器和颜色名称，圆形效果靠BoxDecoration的shape: BoxShape.circle实现
• 颜色名称通过拆分Color的字符串形式提取，避免显示冗长的类信息
• 可通过DropdownButton的dropdownColor、elevation等参数自定义下拉弹窗的样式

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