Flutter TextField出现RenderBox was not laid out错误且页面空白问题

问题根因 #

你的屏幕空白是布局约束异常导致的：TextFormField默认会尝试填充父组件提供的最大宽度，你将它放在了Row嵌套的Column内部，而Column默认不会给子组件提供水平方向的宽度约束，最终TextFormField会计算出无限宽度，无法正常渲染，所以页面显示空白。

解决方案 #

你只要给内部需要放置TextFormField的容器加明确的宽度约束即可，最常用的适配方案是给Row下的左侧Column套Expanded，自动分配Row内的可用宽度：
修改后的代码示例：

child: Row(
  children: <Widget>[
    // 新增Expanded包裹左侧Column，给内部组件提供宽度约束
    Expanded(
      child: Column(
        // 可选添加，让Column高度自适应内容，不占满父容器全部高度
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          TextFormField(
            decoration: const InputDecoration(
              hintText: 'Enter your email',
            ),
            validator: (String? value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
              return null;
            },
          ),
          const Padding(
            padding: EdgeInsets.symmetric(vertical: 16.0),
            child: ElevatedButton(
              onPressed: null,
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    ),
    Column(
      // 可选添加，高度自适应
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        TextButton(
          style: TextButton.styleFrom(
            textStyle: const TextStyle(fontSize: 20),
            backgroundColor: Colors.blueAccent,
          ),
          onPressed: null,
          child: const Text('Button'),
        ),
        Row(
          children: <Widget>[
            TextButton(
              style: TextButton.styleFrom(
                textStyle: const TextStyle(fontSize: 20),
                backgroundColor: Colors.blueAccent,
              ),
              onPressed: null,
              child: const Text('Button2'),
            ),
          ],
        )
      ],
    )
  ],
),

如果你的布局不需要自动占满剩余宽度，也可以给TextFormField外层套SizedBox(width: 具体宽度)来指定固定宽度。

补充注意 #

Flutter布局遵循「约束向下传递，尺寸向上返回」的规则，遇到无报错的页面空白问题时，优先检查输入类、可滚动类组件的父容器是否提供了明确的宽高约束即可快速定位问题。

内容的提问来源于stack exchange，提问作者Meriç Türkyılmaz