Flutter Column内嵌套含子Column的Row时报断言错误如何解决

问题场景 #

我正在开发如下样式的登录页面：

实现过程中，在外层Column组件内添加嵌套了子Column（用于放置文本输入框与文本内容）的Row组件时，程序直接抛出断言错误。尝试移除文本对应Row前的SizedBox组件后，错误仍然存在。

原始问题代码 #

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: color,
    body: SafeArea(
      child: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 20.0),
              Text(
                'Life Drop',
                style: TextStyle(fontSize: 40, color: Colors.white)
              ),
              SizedBox(height: 10.0),
              Text(
                "your blood can save lives",
                style: TextStyle(fontSize: 12, color: Colors.white)
              ),
              SizedBox(height:20.0),
              Row(
                children: [
                  Column(children: [
                    Text('Login'),
                    TextFormField(
                      controller: emailController,
                      decoration: const InputDecoration(
                        border: UnderlineInputBorder(),
                        labelText: 'Email',
                      ),
                    ),
                    SizedBox(width: 20),
                  ],)
                ],
              )
            ],
          ),
        ),
      )
    )
  );
}

错误原因 #

Row组件的水平方向为无界约束，直接嵌套在Row内的Column没有明确的宽度边界时，Column内的TextFormField会尝试占据无限水平宽度，直接触发Flutter布局溢出断言。另外代码中SizedBox(width: 20)被错误放在了Column的子组件列表中，Column为垂直布局，设置宽度的组件不会产生预期的间距效果。

修复方案 #

• 给Row内嵌套的子Column包裹Expanded组件，让其自动适配Row内的可用宽度，为内部输入框提供明确的水平布局约束
• 调整边距位置，匹配设计稿的布局间距
• 给输入框设置浅色文本、边框样式，适配深色背景

修复后代码 #

Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: color,
    body: SafeArea(
      child: Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(height: 20.0),
              Text(
                'Life Drop',
                style: TextStyle(fontSize: 40, color: Colors.white)
              ),
              SizedBox(height: 10.0),
              Text(
                "your blood can save lives",
                style: TextStyle(fontSize: 12, color: Colors.white)
              ),
              SizedBox(height: 80.0),
              Row(
                children: [
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Login',
                          style: TextStyle(color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold),
                        ),
                        SizedBox(height: 30),
                        TextFormField(
                          controller: emailController,
                          style: TextStyle(color: Colors.white),
                          decoration: const InputDecoration(
                            border: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white)),
                            enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white)),
                            labelText: 'Email',
                            labelStyle: TextStyle(color: Colors.white70),
                          ),
                        ),
                        SizedBox(height: 20),
                        // 后续密码输入框、登录按钮可按相同逻辑继续添加
                      ],
                    ),
                  )
                ],
              )
            ],
          ),
        ),
      )
    )
  );
}

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