Flutter Firebase忘记密码页面Email为null错误修复咨询

问题描述 #

• 忘记密码页面点击重置按钮时，提示Email为null，功能无法正常执行；
• 登录、注册功能正常，但用户注册后收不到邮箱验证邮件。

相关代码 #

忘记密码页面代码 #

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:hetmaantje/reusable_widget.dart';
import 'package:hetmaantje/utils1/colors.dart';

class ResetPassword extends StatefulWidget {
  const ResetPassword({Key? key}) : super(key: key);

  @override
  _ResetPasswordState createState() => _ResetPasswordState();
}

class _ResetPasswordState extends State<ResetPassword> {
  TextEditingController _emailTextController = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        title: const Text(
          "Wachtwoord resetten",
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
      body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
              gradient: LinearGradient(colors: [
                hexStringToColor("FFBEC8"),
                hexStringToColor("fe98a8"),
                hexStringToColor("FC98A7"),
                hexStringToColor("#FF8799")
              ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
          child: SingleChildScrollView(
              child: Padding(
                padding: EdgeInsets.fromLTRB(20, 120, 20, 0),
                child: Column(
                  children: <Widget>[
                    const SizedBox(
                      height: 20,
                    ),
                    reusableTextField("Vul je email in", Icons.person_outline, false,
                        _emailTextController),
                    const SizedBox(
                      height: 20,
                    ),
                    firebaseUIButton(context, "Reset je wachtwoord", () {
                      FirebaseAuth.instance
                          .sendPasswordResetEmail(email: _emailTextController.text)
                          .then((value) => Navigator.of(context).pop());
                    })
                  ],
                ),
              ))),
    );
  }
}

reusableTextField 代码 #

TextEditingController controller) {
  return TextField(
    controller: controller,
    obscureText: isPasswordType,
    enableSuggestions: !isPasswordType,
    autocorrect: !isPasswordType,
    cursorColor: Colors.white,
    style: TextStyle(color: Colors.white.withOpacity(0.9)),
    decoration: InputDecoration(
      prefixIcon: Icon(
        icon,
        color: Colors.white70,
      ),
      labelText: text,
      labelStyle: TextStyle(color: Colors.white.withOpacity(0.9)),
      filled: true,
      floatingLabelBehavior: FloatingLabelBehavior.never,
      fillColor: Colors.white.withOpacity(0.3),
      border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30.0),
          borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
    ),
    keyboardType: isPasswordType
        ? TextInputType.visiblePassword
        : TextInputType.emailAddress,
  );
}

firebaseUIButton 代码 #

Container firebaseUIButton(BuildContext context, String title, Function onTap) {
  return Container(
    width: MediaQuery.of(context).size.width,
    height: 50,
    margin: const EdgeInsets.fromLTRB(0, 10, 0, 20),
    decoration: BoxDecoration(borderRadius: BorderRadius.circular(90)),
    child: ElevatedButton(
      onPressed: () {
        onTap();
      },
      child: Text(
        title,
        style: const TextStyle(
            color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
      ),
      style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith((states) {
            if (states.contains(MaterialState.pressed)) {

              return Colors.pinkAccent.shade100;

            }
            return  hexStringToColor("FFBEC8");
          }),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)))),
    ),

  );

}

解决方案 #

一、修复忘记密码Email为空错误 #

原代码未对输入邮箱做校验，也没有捕获Firebase异常，导致空值或格式错误时直接报错且无用户提示。修改如下：

1. 添加输入校验：检查邮箱是否为空、格式是否合法；
2. 加入异常捕获：捕获FirebaseAuth的具体错误并提示用户；
3. 优化交互：发送成功后再返回上一页，失败则保留页面。

修改后的重置按钮回调代码：

firebaseUIButton(context, "Reset je wachtwoord", () async {
  // 去除首尾空格，避免用户输入空格导致的空值
  final email = _emailTextController.text.trim();
  
  // 校验邮箱是否为空
  if (email.isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("请输入邮箱地址")),
    );
    return;
  }
  
  // 简单校验邮箱格式
  final emailRegex = RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
  if (!emailRegex.hasMatch(email)) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("请输入有效的邮箱地址")),
    );
    return;
  }
  
  try {
    await FirebaseAuth.instance.sendPasswordResetEmail(email: email);
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text("重置邮件已发送，请查收邮箱")),
    );
    Navigator.of(context).pop();
  } on FirebaseAuthException catch (e) {
    // 捕获Firebase的具体错误并提示用户
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(e.message ?? "发送失败，请重试")),
    );
  }
})

二、修复注册后收不到验证邮件的问题 #

从注册功能正常来看，账号创建逻辑没问题，按以下步骤排查：

1. 检查Firebase控制台配置

   • 进入Firebase控制台 → 认证 → 模板，确认「验证邮箱」模板已启用，内容、发送邮箱设置正常；
   • 如果使用自定义SMTP服务，进入「认证」→ 「设置」→ 「电子邮件模板」→ 「SMTP设置」，确认服务器地址、端口、账号密码配置正确；使用默认服务的话，确保域名已通过验证。

2. 确认注册代码中调用了验证邮件发送方法
   注册成功后必须调用sendEmailVerification()才会触发邮件发送，示例代码：

   // 注册逻辑示例
   UserCredential userCredential = await FirebaseAuth.instance.createUserWithEmailAndPassword(
     email: emailController.text.trim(),
     password: passwordController.text,
   );
   // 发送验证邮件
   await userCredential.user?.sendEmailVerification();
   

3. 检查用户邮箱的垃圾邮件文件夹
   多数邮箱会把自动发送的验证邮件归类到垃圾邮件或推广邮件文件夹，让用户去这些位置查找。

4. 测试邮箱兼容性
   用主流邮箱（如Gmail、Outlook）测试，避免使用小众邮箱或企业内部邮箱（可能有拦截规则）。

5. 查看Firebase用户状态
   进入Firebase控制台 → 认证 → 用户，查看对应用户的「邮箱验证」状态，如果显示「未验证」，说明邮件发送请求已触发但未送达，需要排查邮箱服务商的拦截问题；如果状态异常，重新触发邮件发送。

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