Flutter问题：错误触发时无法将TextFormField边框设为红色

问题根源 #

你当前的代码仅通过isError变量控制errorBorder样式，但errorBorder只有在TextFormField处于错误状态时才会生效——默认情况下，只有当errorText不为空，或者FormField验证器返回错误信息时，组件才会进入错误状态。单纯修改isError不会触发该状态，因此边框无法变色。

解决方案：两种可行方案 #

方案一：通过errorText触发内置错误状态

利用Flutter内置的错误状态机制，API验证失败时设置错误文本，自动激活errorBorder：

1. 在State类中新增错误文本变量：

class _Login_pageState extends State<Login_page> {
  bool isError = false;
  String email = "";
  String password = "";
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  String? _emailErrorText; // 新增：存储邮箱错误提示
  // ... 其余代码保持不变
}

2. 修改TextFormField的decoration，绑定错误文本并优化错误边框样式：

TextFormField(
  // ... 原有属性不变
  decoration: InputDecoration(
    // ... 原有样式不变
    errorBorder: UnderlineInputBorder(
      borderSide: BorderSide(
        color: Colors.red,
        width: 3, // 将原30改为合理宽度，与正常边框统一
      ),
      borderRadius: BorderRadius.circular(5),
    ),
    focusedErrorBorder: UnderlineInputBorder( // 补充聚焦时的错误边框
      borderSide: BorderSide(
        color: Colors.red,
        width: 3,
      ),
      borderRadius: BorderRadius.circular(5),
    ),
    errorText: isError ? "邮箱不存在或验证失败" : null, // 绑定错误文本触发状态
    // ... 其余属性不变
  ),
  // ... 原有属性不变
)

3. 更新登录按钮的触发逻辑：

onPressed: () async {
  if (_formKey.currentState != null && _formKey.currentState!.validate()) {
    String apiResponse = await loginAPI(email, password);
    setState(() {
      isError = apiResponse.trim() == 'false'; // 避免响应含空格导致判断失效
    });
  }
},

方案二：自定义动态边框（不依赖错误状态）

若无需显示错误文本，仅需切换边框颜色，可直接在正常边框样式中根据isError动态调整颜色：

修改TextFormField的decoration部分：

decoration: InputDecoration(
  // ... 原有样式不变
  enabledBorder: UnderlineInputBorder(
    borderSide: BorderSide(
      color: isError ? Colors.red : Colors.white, // 根据状态切换颜色
      width: 3,
    ),
    borderRadius: BorderRadius.circular(5),
  ),
  focusedBorder: UnderlineInputBorder(
    borderSide: BorderSide(
      color: isError ? Colors.red : Colors.white, // 聚焦时同步切换
      width: 3,
    ),
    borderRadius: BorderRadius.circular(5),
  ),
  // 可移除原有errorBorder相关代码
  // ... 其余属性不变
),

额外优化建议 #

• 在用户输入邮箱时重置错误状态，避免错误样式残留：

onChanged: (value) {
  setState(() {
    email = value;
    isError = false; // 用户输入时清除错误标记
  });
},

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