Flutter：如何在弹出式对话框表单中正确使用并更新Checkbox状态

showModalBottomSheet弹出的模态弹窗属于独立的组件渲染节点，你在父页面_MyHomePageState中调用setState时，只会重新执行父页面的build方法重绘主页面内容，不会触发弹窗内部的builder函数重新执行，因此弹窗内的Checkbox始终读取的是弹窗初次构建时的_checkbox初始值，不会同步更新后的值——这也是为什么控制台能打印到变量变化，但界面没有刷新的原因。

你可以任选以下一种方案修复：

方案1：使用StatefulBuilder获取弹窗局部刷新能力 #

在弹窗builder外层包裹StatefulBuilder，拿到弹窗作用域内专属的setState方法，点击Checkbox时调用这个局部setState，就能触发弹窗内容重绘。
修改后的_showForm方法代码如下：

void _showForm() async {
  showModalBottomSheet(
      context: context,
      elevation: 5,
      isScrollControlled: true,
      builder: (_) => StatefulBuilder(
        builder: (context, setModalState) {
          return Container(
            padding: EdgeInsets.only(
              top: 15,
              left: 15,
              right: 15,
              bottom: MediaQuery.of(context).viewInsets.bottom + 120,
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                TextField(
                  controller: _titleController,
                  decoration: const InputDecoration(hintText: 'Title'),
                ),
                const SizedBox(
                  height: 10,
                ),
                TextField(
                  controller: _descriptionController,
                  decoration: const InputDecoration(hintText: 'Description'),
                ),
                Row(
                  children: <Widget>[
                    const SizedBox(
                      width: 10,
                    ),
                    const Text(
                      'Item is Checked: ',
                      style: TextStyle(fontSize: 17.0),
                    ),
                    const SizedBox(width: 10),
                    Checkbox(
                      value: _checkbox,
                      onChanged: (value) {
                        setModalState(() {
                          _checkbox = !_checkbox;
                          print("*** isSwitched = $_checkbox");
                        });
                      },
                    ),
                  ],
                ),
              ],
            ),
          );
        }
      ));
}

方案2：抽离独立弹窗组件（推荐） #

将底部弹窗抽离为单独的StatefulWidget，把表单相关的状态（包括Checkbox选中状态、输入框内容）全部放在弹窗组件内部维护，和父页面状态解耦，后续扩展表单逻辑、提交数据时更易维护。

额外代码问题提示：你当前代码中MyHomePage的构造函数写法有误，空安全版本Flutter下正确写法为MyHomePage({Key? key}) : super(key: key);，原写法会导致语法报错。

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