Flutter中如何实现点击文本即可切换Checkbox选中状态

方案1：现有代码最小改动 #

你可以给文本包裹可点击组件，或者直接包裹整行，点击时执行选中逻辑，修改后的代码如下：

Widget buildRememberCb() {
  return Container(
    height: 200,
    // 把整行包裹在GestureDetector里，点击任意位置都触发切换
    child: GestureDetector(
      onTap: () {
        setState(() {
          isRememberMe = !isRememberMe;
        });
      },
      child: Row(
        textDirection: TextDirection.rtl,
        children: [
          Theme(
            data: ThemeData(unselectedWidgetColor: Colors.white),
            child: Checkbox(
              value: isRememberMe,
              checkColor: Color(0xfff44336),
              activeColor: Colors.white,
              // Checkbox本身的onChanged保留不影响，点击Checkbox仍走原有逻辑
              onChanged: (value) {
                setState(() {
                  isRememberMe = value!;
                });
              },
            ),
          ),
          Text(
            "Remember Me",
            style: TextStyle(
                fontWeight: FontWeight.w900, fontSize: 18, color: Colors.white),
          ),
        ],
      ),
    ),
  );
}

如果仅需要点击文本触发切换，只把GestureDetector包裹Text组件即可。

方案2：使用官方内置CheckboxListTile更规范 #

Flutter提供的CheckboxListTile组件天生支持整行（包括图标、文本区域）点击切换状态，无需手动处理点击事件，代码更简洁：

Widget buildRememberCb() {
  return Container(
    height: 200,
    child: Theme(
      data: ThemeData(unselectedWidgetColor: Colors.white),
      child: CheckboxListTile(
        value: isRememberMe,
        checkColor: Color(0xfff44336),
        activeColor: Colors.white,
        // 配置控件位置，适配你原来的rtl布局效果
        controlAffinity: ListTileControlAffinity.leading,
        title: Text(
          "Remember Me",
          style: TextStyle(
              fontWeight: FontWeight.w900, fontSize: 18, color: Colors.white),
        ),
        onChanged: (value) {
          setState(() {
            isRememberMe = value!;
          });
        },
      ),
    ),
  );
}

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