如何在Flutter的TextField中显示Firebase Auth错误码作为errorText？

当然可以实现！你只需要通过状态管理把Firebase Auth的错误信息和TextField的errorText绑定起来就行。下面是具体的实现步骤和完整代码示例：

1. 切换到StatefulWidget（如果还没用到的话） #

因为我们需要动态更新UI上的错误提示，所以你的页面组件得是StatefulWidget，这样才能通过setState()来刷新状态，让错误提示实时显示在输入框下方。

2. 定义状态变量存储错误信息 #

在你的State类里添加对应输入框的错误变量，比如邮箱和密码的错误提示：

String? _emailError;
String? _passwordError;

3. 解析Firebase Auth异常并更新状态 #

捕获到Firebase Auth的异常后，先将其转为FirebaseAuthException（它包含具体的错误码），然后根据不同错误码设置对应输入框的提示，最后调用setState()更新UI：

try {
  // 你的注册逻辑...
} on FirebaseAuthException catch (e) {
  setState(() {
    // 先清空之前的错误提示
    _emailError = null;
    _passwordError = null;

    // 根据错误码匹配对应提示
    switch (e.code) {
      case 'email-already-in-use':
        _emailError = '这个邮箱已经被注册过了';
        break;
      case 'invalid-email':
        _emailError = '请输入有效的邮箱地址';
        break;
      case 'weak-password':
        _passwordError = '密码强度不够，请至少输入6个字符';
        break;
      case 'operation-not-allowed':
        _emailError = '当前不允许邮箱注册，请联系管理员';
        break;
      // 可以根据需求添加更多错误码的处理
      default:
        _emailError = '注册失败：${e.message}';
    }
  });
} catch (e) {
  setState(() {
    _emailError = '未知错误，请稍后重试';
  });
}

4. 把错误变量绑定到TextField的errorText #

修改你的TextField组件，将对应的错误变量赋值给errorText属性，同时可以在用户输入时清空错误提示，提升体验：

// 邮箱输入框示例
TextField(
  onChanged: (value) {
    email = value;
    // 用户输入时清空该输入框的错误提示
    if (_emailError != null) {
      setState(() => _emailError = null);
    }
  },
  decoration: InputDecoration(
    border: const UnderlineInputBorder(),
    labelText: '邮箱',
    errorText: _emailError, // 绑定错误变量
  ),
)

// 密码输入框示例
TextField(
  onChanged: (value) {
    password = value;
    if (_passwordError != null) {
      setState(() => _passwordError = null);
    }
  },
  obscureText: true,
  decoration: InputDecoration(
    border: const UnderlineInputBorder(),
    labelText: '密码',
    errorText: _passwordError, // 绑定错误变量
  ),
)

完整的可运行示例代码 #

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class RegisterPage extends StatefulWidget {
  const RegisterPage({super.key});

  @override
  State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  String? email;
  String? password;
  String? _emailError;
  String? _passwordError;

  Future<void> _handleRegister() async {
    // 先做简单的非空校验
    if (email == null || email!.isEmpty || password == null || password!.isEmpty) {
      setState(() {
        _emailError = email?.isEmpty == true ? '请输入邮箱' : null;
        _passwordError = password?.isEmpty == true ? '请输入密码' : null;
      });
      return;
    }

    try {
      final newUser = await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: email!,
        password: password!,
      );

      if (newUser.user != null) {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const ProfileDetail()),
        );
      }
    } on FirebaseAuthException catch (e) {
      setState(() {
        _emailError = null;
        _passwordError = null;

        switch (e.code) {
          case 'email-already-in-use':
            _emailError = '该邮箱已被注册';
            break;
          case 'invalid-email':
            _emailError = '请输入有效的邮箱格式';
            break;
          case 'weak-password':
            _passwordError = '密码至少需要6个字符';
            break;
          case 'operation-not-allowed':
            _emailError = '当前不支持邮箱注册';
            break;
          default:
            _emailError = '注册失败：${e.message}';
        }
      });
    } catch (e) {
      setState(() {
        _emailError = '未知错误，请稍后重试';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('账号注册')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              onChanged: (value) {
                email = value;
                if (_emailError != null) setState(() => _emailError = null);
              },
              decoration: InputDecoration(
                border: const UnderlineInputBorder(),
                labelText: '邮箱',
                errorText: _emailError,
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              onChanged: (value) {
                password = value;
                if (_passwordError != null) setState(() => _passwordError = null);
              },
              obscureText: true,
              decoration: InputDecoration(
                border: const UnderlineInputBorder(),
                labelText: '密码',
                errorText: _passwordError,
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: _handleRegister,
              child: const Text('完成注册'),
            ),
          ],
        ),
      ),
    );
  }
}

// 示例跳转页面
class ProfileDetail extends StatelessWidget {
  const ProfileDetail({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(appBar: AppBar(title: const Text('完善个人信息')));
  }
}

额外小提示 #

• 确保你已经在项目中正确配置了Firebase，并且导入了firebase_auth依赖
• 可以根据产品需求自定义错误提示文本，让用户更容易理解问题
• 如果你的用户名输入框需要校验（比如是否重复），可以在注册前先查询Firestore或其他数据库，再将错误信息赋值给对应的用户名错误变量

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