Flutter项目添加CheckboxListTile后出现白屏问题求助

问题根源 #

1. 你在CheckboxListTile的onChanged回调里直接构建并返回了Visibility组件——onChanged是void类型的回调，不允许在这里输出Widget，这种错误逻辑会触发Flutter渲染异常，导致白屏。
2. 原代码把CheckboxListTile嵌套在Row→Column结构里，CheckboxListTile本身需要足够横向空间，这种嵌套容易引发布局约束冲突，也是白屏的潜在诱因。

修复后的完整代码 #

class Signup extends StatefulWidget {
  const Signup({super.key});
  @override
  State<Signup> createState() => _SignupState();
}

class _SignupState extends State<Signup> {
  bool? _checked = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(
            Icons.chevron_left,
            color: Color(0xFF032272),
            size: 40,
          ),
          onPressed: () {},
        ),
        title: Text(
          'New Account',
          style: TextStyle(color: Color(0xFF032272), fontSize: 30),
        ),
        centerTitle: true,
      ),
      body: Container(
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(
            image: DecorationImage(
                fit: BoxFit.cover,
                image: AssetImage("assets/background_image.png"))),
        child: SingleChildScrollView(
          child: SafeArea(
            child: Container(
              padding: EdgeInsets.fromLTRB(30, 100, 0, 0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    "Name",
                    style: TextStyle(
                      color: Color(0xFF032272),
                      fontSize: 22,
                    ),
                  ),
                  SizedBox(height: 10),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        width: 340,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          border:
                              Border.all(width: 3, color: Color(0xFFA9BCFE)),
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: TextField(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'UserName',
                            hintStyle: TextStyle(color: Color(0xFFA9BCFE)),
                            contentPadding:
                                EdgeInsets.symmetric(horizontal: 25),
                          ),
                        ),
                      ),
                      SizedBox(height: 20),
                      Text(
                        "Password",
                        style: TextStyle(
                          color: Color(0xFF032272),
                          fontSize: 22,
                        ),
                      ),
                      SizedBox(height: 10),
                      Container(
                        width: 340,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          border:
                              Border.all(width: 3, color: Color(0xFFA9BCFE)),
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: TextField(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'Password',
                            hintStyle: TextStyle(color: Color(0xFFA9BCFE)),
                            contentPadding:
                                EdgeInsets.symmetric(horizontal: 25),
                          ),
                        ),
                      ),
                      SizedBox(height: 20),
                      Text(
                        "Email",
                        style: TextStyle(
                          color: Color(0xFF032272),
                          fontSize: 22,
                        ),
                      ),
                      SizedBox(height: 10),
                      Container(
                        width: 340,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          border:
                              Border.all(width: 3, color: Color(0xFFA9BCFE)),
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: TextField(
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'Email',
                            hintStyle: TextStyle(color: Color(0xFFA9BCFE)),
                            contentPadding:
                                EdgeInsets.symmetric(horizontal: 25),
                          ),
                        ),
                      ),
                      SizedBox(height: 20),
                      Text(
                        "You Are :",
                        style: TextStyle(
                          color: Color(0xFF032272),
                          fontSize: 22,
                        ),
                      ),
                      SizedBox(height: 10),
                      // 修复：移除多余Row嵌套，给CheckboxListTile指定宽度避免约束问题
                      SizedBox(
                        width: 340,
                        child: CheckboxListTile(
                          title: Text("psychologist", style: TextStyle(color: Color(0xFF032272))),
                          value: _checked,
                          activeColor: Color(0xFF032272),
                          onChanged: (value) {
                            setState(() {
                              _checked = value;
                            });
                          },
                        ),
                      ),
                      // 修复：将Visibility移至Widget树中，通过_state变量控制显示
                      Visibility(
                        visible: _checked ?? false,
                        child: Padding(
                          padding: EdgeInsets.only(top: 10),
                          child: Container(
                            width: 340,
                            decoration: BoxDecoration(
                              color: Colors.white,
                              border: Border.all(width: 3, color: Color(0xFFA9BCFE)),
                              borderRadius: BorderRadius.circular(20),
                            ),
                            child: TextField(
                              decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: 'ps',
                                hintStyle: TextStyle(color: Color(0xFFA9BCFE)),
                                contentPadding: EdgeInsets.symmetric(horizontal: 25),
                              ),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

关键修复点 #

• 把Visibility组件从onChanged回调中移出，放到Widget树的正常位置，通过_checked变量控制显示状态。
• 给CheckboxListTile指定宽度，移除不必要的Row→Column嵌套，解决布局约束冲突。
• 修正了原代码中所有TextField的hintText错误（比如密码框、邮箱框重复写了UserName）。

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