Flutter TextField尺寸缺失问题求助：需实现动态宽度设置

错误原因 #

Row组件在水平方向的约束是无上限的（0<=w<=屏幕宽度），而TextField默认会尝试获取无限宽度来适配内容。当外层Container没有明确宽度约束时，布局系统无法确定TextField的具体尺寸，就会抛出size: MISSING的错误。

解决方案：添加最小/最大宽度约束 #

不需要硬写固定宽度，通过给容器或TextField添加约束，就能实现动态自适应+最小/最大宽度的效果。

方法一：给外层Container设置约束 #

直接在包裹Column的Container里添加constraints参数，限定宽度范围：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Pangea')),
      body: Container(
        color: Colors.black45,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: double.infinity,
              // 配置最小/最大宽度
              constraints: BoxConstraints(
                minWidth: 200,
                maxWidth: 400,
              ),
              child: Column(
                children: [
                  TextField(
                    decoration: InputDecoration(
                      hintText: '请输入内容',
                      filled: true,
                      fillColor: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

方法二：用ConstrainedBox单独包裹TextField #

如果只想给TextField设置约束，直接用ConstrainedBox包裹即可：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Pangea')),
      body: Container(
        color: Colors.black45,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: double.infinity,
              child: Column(
                children: [
                  ConstrainedBox(
                    constraints: BoxConstraints(
                      minWidth: 200,
                      maxWidth: 400,
                    ),
                    child: TextField(
                      decoration: InputDecoration(
                        hintText: '请输入内容',
                        filled: true,
                        fillColor: Colors.white,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

效果说明 #

• 输入内容较短时，TextField会自适应内容宽度，但不会小于设置的minWidth；
• 内容过长时，宽度会被限制在maxWidth内，自动换行或滚动（取决于TextField配置）；
• 结合Row的居中配置，带约束的容器会始终在屏幕水平居中位置。

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