Flutter报错：InputDecorator无法拥有无边界宽度，求解决方案

报错原因 #

你遇到的An InputDecorator... cannot have an unbounded width错误，核心问题是TextFormField的水平方向没有获得明确的宽度约束。你用Expanded解决了垂直方向的空间分配，但Expanded仅作用于Column的主轴（垂直方向），无法约束水平宽度。当前布局中，Column默认水平方向是包裹子元素，导致TextFormField的InputDecorator无法确定自身宽度。

直接解决方案 #

给Column添加crossAxisAlignment: CrossAxisAlignment.stretch，让Column的所有子元素自动拉伸填满父级水平空间，这样TextFormField就能获得明确的宽度约束：

修改后的关键代码片段：

child: Column(
  crossAxisAlignment: CrossAxisAlignment.stretch, // 新增此行
  children: [
    Expanded(
        child: TextFormField(
      // 原有的TextFormField配置不变
    )),
    divider,
    Expanded(
        child: TextFormField(
      // 原有的TextFormField配置不变
    )),
    divider,
    ElevatedButton(
      onPressed: () {
        _submitForm(context);
      },
      child: const Text('Submit'),
    ),
  ],
)

其他可选方案 #

如果不想让所有子元素拉伸，也可以单独给每个TextFormField套一层Container并设置宽度：

Expanded(
    child: Container(
      width: double.infinity,
      child: TextFormField(
        // 原配置不变
      ),
    )),

布局逻辑补充说明 #

Flutter的布局约束遵循向下传递、尺寸向上反馈的规则：

• Stack不会给未定位的子元素施加水平约束，子元素宽度由自身内容决定
• Column默认在水平方向仅包裹子元素，导致TextFormField无法获得足够的宽度约束
• CrossAxisAlignment.stretch会强制Column的子元素继承父级的水平约束，完美解决InputDecorator的宽度问题

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