Flutter中用户名TextFormField错误时无法即时验证的问题排查

点击登录按钮时，空字段的客户端验证能正常触发，但当通过switch/case逻辑返回服务端错误（比如用户名错误）时，错误提示不会立即显示，只有修改公司或PIN字段时，用户名字段才会弹出错误提示。已确认MySOAPRequest中的布尔值设置正确，问题出在验证函数的逻辑上。

登录页面代码 #

CustomTextField(
  key: _customTextFieldKey,
  companyController: _companyController,
  usernameController: _usernameController,
  pinController: _pinController,
),
const SizedBox(height: 20),
OutlinedButton(
  onPressed: () {
    FocusManager.instance.primaryFocus?.unfocus();
    String lcomp = Globals().lcomp =
        _companyController.text.trim();
    String luser = Globals().luser =
        _usernameController.text.trim();
    String lpin =
        Globals().lpin = _pinController.text.trim();

    if (lcomp.isNotEmpty &&
        luser.isNotEmpty &&
        lpin.isNotEmpty &&
        !_customTextFieldKey.currentState!
            .hasError()) {
      MySOAPRequest(
        lcomp: lcomp,
        luser: luser,
        lpin: lpin,
        onLoginSuccess: _saveCredentials,
      ).makeSOAPRequest(context);
    } else {
      _customTextFieldKey.currentState?.validate();
    }
  },
  child: const Text('Login'),
),

MySOAPRequest相关代码 #

// 构造函数部分
final String lcomp;
final String luser;
final String lpin;
final Function(bool) onLoginSuccess;

MySOAPRequest({
  required this.lcomp,
  required this.luser,
  required this.lpin,
  required this.onLoginSuccess,
});

// switch/case逻辑部分
switch (logonState) {
  case '1':
    loginFlushbar(context);
    navigateToSubPages(context);
    onLoginSuccess(true);
    break;
  case '3':
    flushbar(context, 'Incorrect User Name',
        'Please try again or contact your administrator if this issue persists.');
    onLoginSuccess(false);
    break;
  default:
    flushbar(context, 'Unknown Error',
        'An unknown error occurred. Please try again or contact your administrator.');
    Globals().usernameHasError = true;
    Globals().errorText = 'Incorrect User Name';
    Globals().customTextFieldKey.currentState?.validate();
    onLoginSuccess(false);
    break;
}

CustomTextFieldState代码 #

class CustomTextFieldState extends State<CustomTextField> {
  final _formKey = GlobalKey<FormState>();

  String _company = '';
  String _username = '';
  String _pin = '';

  bool _companyHasError = false;
  bool _usernameHasError = false;
  bool _pinHasError = false;

  bool hasError() {
    return _usernameHasError || _companyHasError || _pinHasError;
  }

  void validate() {
    setState(() {
      if (_formKey.currentState != null) {
        _companyHasError =
            !_formKey.currentState!.validate() || _company.isEmpty;
        _usernameHasError =
            !_formKey.currentState!.validate() || _username.isEmpty;
        _pinHasError = !_formKey.currentState!.validate() || _pin.isEmpty;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    String lcomp = widget.companyController.text.trim();

    return Form(
      key: _formKey,
      autovalidateMode: AutovalidateMode.disabled,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          // 公司字段省略
          TextFormField(
            controller: widget.usernameController,
            decoration: InputDecoration(
              contentPadding: const EdgeInsets.only(left: 20),
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: const BorderSide(
                  color: Color(0xff185C91),
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: const BorderSide(
                  color: ThemeClass.primaryColor,
                ),
              ),
              enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: const BorderSide(
                  color: Color(0xff185C91),
                ),
              ),
              errorBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: const BorderSide(color: Colors.red),
              ),
              disabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(30),
                borderSide: const BorderSide(color: Color(0x00232323)),
              ),
              suffixIcon: const Icon(Icons.person_outlined,
                  color: ThemeClass.primaryColor),
              labelText: "Username",
              labelStyle: const TextStyle(
                fontSize: 14.0,
                decoration: TextDecoration.none,
              ),
              hintText: 'Enter username',
              hintStyle: const TextStyle(
                fontSize: 14.0,
              ),
              errorText: _usernameHasError
                  ? 'Please enter a valid username!'
                  : Globals().usernameHasError
                      ? Globals().errorText
                      : null,
            ),
            autovalidateMode: AutovalidateMode.onUserInteraction,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter your username!';
              }
              return null;
            },
            onChanged: (value) {
              setState(() {
                _username = value;
                _usernameHasError = false;
                Globals().usernameHasError = false;
              });
            },
            onFieldSubmitted: (value) {
              setState(() {
                _usernameHasError = !_formKey.currentState!.validate();
              });
            },
          ),
          // PIN字段省略
        ],
      ),
    );
  }
}

问题根源与修复方案 #

1. 全局状态未触发组件刷新 #

Globals().usernameHasError更新后，CustomTextFieldState不会自动感知变化，只有其他字段触发setState时才会重新构建并显示错误。

修复：
在设置全局变量后主动触发组件刷新，修改MySOAPRequest的default分支：

default:
  flushbar(context, 'Unknown Error',
      'An unknown error occurred. Please try again or contact your administrator.');
  // 用setState包裹全局变量修改，触发组件刷新
  setState(() {
    Globals().usernameHasError = true;
    Globals().errorText = 'Incorrect User Name';
  });
  Globals().customTextFieldKey.currentState?.validate();
  onLoginSuccess(false);
  break;

2. validate方法未整合服务端错误 #

当前validate()只处理本地空字段验证，未考虑服务端返回的错误状态。

修复：
修改validate方法，加入服务端错误判断：

void validate() {
  setState(() {
    if (_formKey.currentState != null) {
      bool formIsValid = _formKey.currentState!.validate();
      _companyHasError = !formIsValid || _company.isEmpty;
      // 整合本地验证和服务端错误
      _usernameHasError = !formIsValid || _username.isEmpty || Globals().usernameHasError;
      _pinHasError = !formIsValid || _pin.isEmpty;
    }
  });
}

3. 登录按钮验证顺序错误 #

当前先判断字段非空再调用hasError()，应先执行验证再判断是否提交。

修复：
调整登录按钮逻辑：

onPressed: () {
  FocusManager.instance.primaryFocus?.unfocus();
  String lcomp = Globals().lcomp = _companyController.text.trim();
  String luser = Globals().luser = _usernameController.text.trim();
  String lpin = Globals().lpin = _pinController.text.trim();

  // 先执行验证
  _customTextFieldKey.currentState?.validate();
  // 再判断是否通过验证
  if (lcomp.isNotEmpty && luser.isNotEmpty && lpin.isNotEmpty && !_customTextFieldKey.currentState!.hasError()) {
    MySOAPRequest(
      lcomp: lcomp,
      luser: luser,
      lpin: lpin,
      onLoginSuccess: _saveCredentials,
    ).makeSOAPRequest(context);
  }
},

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