Flutter中如何从自定义取色器组件获取值并更新容器颜色

要实现点击Save后更新Container颜色的需求，核心是通过showDialog的返回值传递选中的颜色，和DatePicker的交互逻辑一致。具体修改如下：

1. 主页面代码修改 #

在主页面的State中添加状态变量存储选中颜色，并通过async/await接收对话框返回的颜色：

class _YourMainPageState extends State<YourMainPage> {
  // 初始化选中颜色为colorlist的第一个元素
  Color _selectedColor = colorlist[0];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () async {
          // 等待对话框返回选中的颜色
          final Color? pickedColor = await showDialog<Color>(
            context: context,
            builder: (context) => Dialog(child: ColorPalleteWidget()),
          );
          // 若返回有效颜色，更新状态
          if (pickedColor != null) {
            setState(() => _selectedColor = pickedColor);
          }
        },
        child: Container(
          height: 40,
          color: _selectedColor, // 使用状态变量绑定颜色
        ),
      ),
    );
  }
}

2. ColorPalleteWidget代码修改 #

修改Save按钮的onPressed回调，在关闭对话框时返回选中的颜色：

// 替换原Save按钮的代码
TextButton(
  onPressed: () {
    // 弹出对话框时返回当前选中的颜色
    Navigator.of(context).pop(selectedColor);
  },
  child: const Text('Save')
)

逻辑说明 #

• 点击Container触发showDialog，弹出取色器组件；
• 在取色器中选择颜色后，点击Save会通过Navigator.pop(selectedColor)将选中的颜色传递回主页面；
• 主页面通过await接收返回值，调用setState更新Container的颜色，完成交互闭环。

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