Flutter技术问题：TextFormField错误边框无法包裹Container容器

问题根源 #

你遇到的问题主要来自两个点：

1. validator返回空字符串''时，TextFormField会渲染一个空的错误文本区域，占用额外垂直空间导致外层Container被撑开；
2. 背景色属于外层Container，而错误边框属于TextFormField，层级分离导致边框无法完整包裹背景。

具体修复方案 #

1. 消除错误文本占位

空错误文本会占用不必要的空间，可通过errorStyle让错误区域彻底不占高度：

errorStyle: TextStyle(height: 0, color: Colors.transparent)

2. 将背景色移至InputDecoration内部

把背景色整合到TextFormField的装饰中，让背景和边框属于同一层级，彻底解决边框包裹问题：

TextFormField(
  decoration: InputDecoration(
    filled: true, // 开启填充
    fillColor: Colors.grey.withOpacity(0.2), // 原Container背景色
    disabledBorder: InputBorder.none,
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 0.5)),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 0.5)),
    border: InputBorder.none,
    errorStyle: TextStyle(height: 0, color: Colors.transparent), // 消除错误占位
  ),
  // 其他属性不变
)

修改后可直接移除外层的Container，让TextFormField自行管理背景与边框。

3. 给Container添加固定约束（可选）

如果必须保留外层Container，可设置固定高度防止尺寸异常：

Container(
  color: Colors.grey.withOpacity(0.2),
  height: 50, // 根据需求设置合适高度
  constraints: BoxConstraints(minHeight: 50, maxHeight: 50),
  child: Form(...),
)

完整修改后代码示例 #

Form(
  key: globalKey,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  child: TextFormField(
    decoration: InputDecoration(
      filled: true,
      fillColor: Colors.grey.withOpacity(0.2),
      disabledBorder: InputBorder.none,
      errorBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.red, width: 0.5)),
      focusedErrorBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.red, width: 0.5)),
      border: InputBorder.none,
      errorStyle: TextStyle(height: 0, color: Colors.transparent),
    ),
    textAlign: TextAlign.center,
    style: TextStyle(
      fontSize: 20,
      color: Colors.white,
      fontWeight: FontWeight.w400,
      fontFamily: "Sofia",
    ),
    validator: (value) {
      if (value != null && value.isNotEmpty && value.length > 7) {
        if (callbackText != null && originalText != value) {
          callbackText(value);
        }
        return null;
      }
      return '';
    },
  ),
)

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