Flutter：移除TextField下方错误文本及修正边框颜色异常

问题根源 #

你遇到的两个问题本质是同一个原因：当errorText不为null（哪怕是空字符串），TextField会一直处于错误状态，此时Flutter会优先使用错误主题的边框样式，覆盖你自定义的borderSide；同时空字符串的errorText会占据布局空间，就算把字号设为0也会留空行。

正确解决方案 #

1. 彻底隐藏错误文本：当valid为true时，直接把errorText设为null，而不是空字符串。这样TextField会退出错误状态，恢复正常样式。
2. 覆盖所有状态的边框样式：除了border，还要显式设置enabledBorder（未聚焦时的边框）和focusedBorder（聚焦时的边框），确保不同状态下都能应用你自定义的颜色。

修改后的完整代码 #

TextField(
  controller: userName,
  onChanged: (value) {},
  decoration: InputDecoration(
    hintText: "Email",
    // 错误文本直接设为null，彻底关闭错误状态
    errorText: valid ? null : "Not Good",
    prefixIcon: const Icon(Icons.email),
    // 基础边框样式
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: BorderSide(
        color: valid ? Colors.black : Colors.red,
      ),
    ),
    // 未聚焦时的边框
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: BorderSide(
        color: valid ? Colors.black : Colors.red,
      ),
    ),
    // 聚焦时的边框
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
      borderSide: BorderSide(
        color: valid ? Colors.black : Colors.red,
      ),
    ),
  ),
),

补充优化 #

如果需要更清晰的错误状态区分，可以单独设置errorBorder和focusedErrorBorder，专门定义错误状态下的边框样式：

// 错误状态下的未聚焦边框
errorBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(10),
  borderSide: const BorderSide(color: Colors.red),
),
// 错误状态下的聚焦边框
focusedErrorBorder: OutlineInputBorder(
  borderRadius: BorderRadius.circular(10),
  borderSide: const BorderSide(color: Colors.red),
),

这样设置后，valid为true时TextField完全恢复正常样式；valid为false时自动应用错误状态的边框和提示文本，不会出现样式冲突。

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