如何在Flutter的TextFormField中展示Firebase Auth错误信息

核心思路 #

通过给自定义表单组件添加外部错误控制参数，结合页面状态维护各字段的错误信息，将Firebase返回的注册错误精准映射到对应输入框，并在用户交互时自动清除错误提示。

步骤1：修改自定义表单组件 #

给TextForm、EmailForm、PasswordForm这类自定义组件添加外部错误参数和清除错误的回调，让组件能接收外部传入的错误信息，并在用户输入时通知页面清除错误。

以TextForm为例：

class TextForm extends StatelessWidget {
  final String hintText;
  final String fieldContent;
  final String fieldName;
  final Map<String, dynamic> formValues;
  final String? externalError; // 接收外部错误信息
  final VoidCallback? onClearError; // 用户输入时清除错误的回调

  const TextForm({
    super.key,
    required this.hintText,
    required this.fieldContent,
    required this.fieldName,
    required this.formValues,
    this.externalError,
    this.onClearError,
  });

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      decoration: InputDecoration(
        hintText: hintText,
        errorText: externalError, // 显示外部错误
      ),
      validator: (value) {
        // 优先返回外部错误，再执行内部验证
        if (externalError != null) return externalError;
        
        if (value != null) {
          if (value.isEmpty) return 'Ingrese un $fieldContent';
          if (value.length < 2) return 'Ingrese un $fieldContent válido';
        }
        return null;
      },
      onChanged: (value) {
        formValues[fieldName] = value;
        // 用户输入时自动清除对应字段的外部错误
        if (externalError != null) onClearError?.call();
      },
      autovalidateMode: AutovalidateMode.onUserInteraction,
    );
  }
}

EmailForm和PasswordForm需要做完全相同的修改，添加externalError和onClearError参数并对应处理。

步骤2：页面中维护错误状态 #

在注册页面的状态类中，新增一个Map存储各字段的错误信息：

final Map<String, String?> fieldErrors = {};
final GlobalKey<FormState> formKey = GlobalKey();
Map<String, dynamic> formValues = {};

步骤3：处理Firebase注册错误 #

调用createUserWithEmailAndPassword时捕获异常，根据Firebase的错误码映射到对应字段，更新错误状态：

Future<void> handleSignUp() async {
  if (!formKey.currentState!.validate()) return;

  // 先清除之前的错误
  setState(() => fieldErrors.clear());

  // 先检查两次密码是否一致
  if (formValues['password'] != formValues['repeatPassword']) {
    setState(() {
      fieldErrors['repeatPassword'] = 'Las contraseñas no coinciden';
    });
    return;
  }

  try {
    await FirebaseAuth.instance.createUserWithEmailAndPassword(
      email: formValues['email'] as String,
      password: formValues['password'] as String,
    );
    // 注册成功：跳转首页或其他逻辑
  } on FirebaseAuthException catch (e) {
    // 根据错误码匹配对应字段
    setState(() {
      switch (e.code) {
        case 'email-already-in-use':
          fieldErrors['email'] = 'Este correo ya está registrado';
          break;
        case 'invalid-email':
          fieldErrors['email'] = 'Correo electrónico inválido';
          break;
        case 'weak-password':
          fieldErrors['password'] = 'Contraseña demasiado débil (mínimo 6 caracteres)';
          break;
        default:
          // 全局错误提示
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text(e.message ?? 'Error al registrarse')),
          );
      }
    });
  } catch (e) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Ocurrió un error inesperado')),
    );
  }
}

步骤4：给表单组件传递错误信息 #

在Form中调用自定义组件时，传入对应字段的错误信息和清除回调：

Form(
  key: formKey,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // ...其他表单项
      const FormTitle(text: "E-mail"),
      EmailForm(
        hintText: "Ingresá tu e-mail",
        fieldName: "email",
        formValues: formValues,
        externalError: fieldErrors['email'],
        onClearError: () => setState(() => fieldErrors.remove('email')),
      ),
      // ...其他表单项
      const FormTitle(text: "Contraseña"),
      PasswordForm(
        hintText: "Creá una contraseña",
        fieldName: "password",
        formValues: formValues,
        externalError: fieldErrors['password'],
        onClearError: () => setState(() => fieldErrors.remove('password')),
      ),
      const FormTitle(text: "Repetir contraseña"),
      PasswordForm(
        hintText: "Repetí la contraseña",
        fieldName: "repeatPassword",
        formValues: formValues,
        externalError: fieldErrors['repeatPassword'],
        onClearError: () => setState(() => fieldErrors.remove('repeatPassword')),
      ),
      // 注册按钮
      SizedBox(
        width: double.infinity,
        child: ElevatedButton(
          onPressed: handleSignUp,
          child: const Text("Registrarse"),
        ),
      ),
    ],
  ),
)

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