Flutter：如何设置TextField高度且不引发页面显示异常？

问题场景 #

原有代码可正常渲染，但在Row组件中加入TextField后页面出现白屏异常，需实现TextField的正常显示并设置其高度。

正常显示的代码 #

Widget build(BuildContext context) {
    return 
      SingleChildScrollView(
        child: Column(
          children: [
            Row(
              children: [
                  Image.asset("assets/cross.png"),
                  Text("Nouveau contact"),
              ]
            ),
            Row(
              children: [
                Radio(value: "Homme", groupValue: gender, onChanged: (value) { setState(() { gender = value; }); }),
                Text("Homme"),
                Divider(indent: 10.0,),
                Radio(value: "Femme", groupValue: gender, onChanged: (value) { setState(() { gender = value; }); }),
                Text("Femme"),
              ],
            ),
            Row(
              children: [
                //NOTHING HERE
              ],
            ),
            Row(),
          ],
        ),
      );
  }

添加TextField后异常的代码 #

Widget build(BuildContext context) {
    return 
      SingleChildScrollView(
        child: Column(
          children: [
            Row(
              children: [
                  Image.asset("assets/cross.png"),
                  Text("Nouveau contact"),
              ]
            ),
            Row(
              children: [
                Radio(value: "Homme", groupValue: gender, onChanged: (value) { setState(() { gender = value; }); }),
                Text("Homme"),
                Divider(indent: 10.0,),
                Radio(value: "Femme", groupValue: gender, onChanged: (value) { setState(() { gender = value; }); }),
                Text("Femme"),
              ],
            ),
            Row(
              children: [
                TextField(
                  maxLines: 1,
                  controller: TextEditingController(
                    text: firstname
                  ),
                  decoration: InputDecoration(
                    hintText: "Prénom"
                  ),
                ),
              ],
            ),
            Row(),
          ],
        ),
      );
  }

问题原因 #

Row是水平布局组件，默认不会给子元素提供明确的宽度约束，而TextField需要确定的宽度才能正常渲染，缺少约束会导致布局计算崩溃，最终出现白屏。

解决方法 #

修改后的可正常运行代码 #

Widget build(BuildContext context) {
    return 
      SingleChildScrollView(
        child: Column(
          children: [
            Row(
              children: [
                  Image.asset("assets/cross.png"),
                  Text("Nouveau contact"),
              ]
            ),
            Row(
              children: [
                Radio(value: "Homme", groupValue: gender, onChanged: (value) { setState(() { gender = value; }); }),
                Text("Homme"),
                SizedBox(width: 10.0,), // 替换原Divider，适配Row水平布局
                Radio(value: "Femme", groupValue: gender, onChanged: (value) { setState(() { gender = value; }); }),
                Text("Femme"),
              ],
            ),
            Row(
              children: [
                // 用Expanded赋予TextField宽度约束，同时通过SizedBox设置高度
                Expanded(
                  child: SizedBox(
                    height: 50, // 指定TextField的高度
                    child: TextField(
                      maxLines: 1,
                      controller: TextEditingController(text: firstname),
                      decoration: InputDecoration(
                        hintText: "Prénom",
                        contentPadding: EdgeInsets.symmetric(vertical: 12), // 调整内边距适配高度，避免文字偏移
                        border: OutlineInputBorder(), // 可选：添加边框增强视觉效果
                      ),
                    ),
                  ),
                ),
              ],
            ),
            Row(),
          ],
        ),
      );
  }

关键优化点 #

• Expanded包裹TextField：让TextField占据Row的剩余可用宽度，解决布局约束缺失的问题。
• 固定高度设置：通过外层SizedBox指定高度，配合contentPadding调整输入内容的垂直位置，保证显示效果正常。
• 布局细节调整：将Row中的Divider替换为SizedBox(width:10)，因为Divider是垂直分割线，不适合在水平布局的Row中使用。

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