Flutter注册异常：Navigator.pop未关加载弹窗却退出注册页

核心问题根源 #

你的代码存在三个关键问题：

1. 路由上下文混淆：showDialog使用的是注册页面的context，后续调用Navigator.pop(context)时，操作的是注册页面的路由栈而非加载弹窗，导致弹窗无法关闭反而关闭了注册页面。
2. 弹窗可外部关闭：默认showDialog允许点击弹窗外部关闭，用户可借此绕过邮箱验证直接进入主页。
3. 无效上下文调用：注册页面被关闭后，后续showErrorMessage使用的context已失效，导致成功提示无法弹出。

修复步骤 #

1. 禁止加载弹窗外部关闭：给showDialog添加barrierDismissible: false参数，阻止用户通过点击外部关闭加载弹窗。
2. 使用根导航器管理弹窗：通过Navigator.of(context, rootNavigator: true)来关闭加载弹窗，确保操作的是弹窗路由而非注册页面路由。
3. 确保上下文有效：在关闭加载弹窗后再执行后续操作，避免使用已失效的上下文。

修改后的完整代码 #

Future<void> signUserUp() async {
  // 显示加载弹窗，禁止外部关闭
  showDialog(
    context: context,
    barrierDismissible: false, // 禁止点击外部关闭弹窗
    barrierColor: Colors.black.withOpacity(0.5), // 可选：添加半透明背景提升体验
    builder: (context) {
      return const Center(
        child: CircularProgressIndicator(),
      );
    },
  );

  try {
    // 检查密码是否匹配
    if (passwordController.text != confirmPasswordController.text) {
      // 使用根导航器关闭加载弹窗
      Navigator.of(context, rootNavigator: true).pop();
      showErrorMessage("Passwords do not match");
      return;
    } else {
      UserCredential userCredential =
          await FirebaseAuth.instance.createUserWithEmailAndPassword(
        email: emailController.text,
        password: passwordController.text,
      );

      // 发送验证邮件
      await userCredential.user!.sendEmailVerification();

      // 关闭加载弹窗
      Navigator.of(context, rootNavigator: true).pop();

      // 显示注册成功提示
      showErrorMessage(
          'Registration successful!\nPlease verify your email to complete the registration.',
        );
    }
  } on FirebaseAuthException catch (e) {
    // 关闭加载弹窗
    Navigator.of(context, rootNavigator: true).pop();
    // 显示错误信息
    showErrorMessage(e.code);
  }
}

void showErrorMessage(String message) {
  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text(
          message,
          style: const TextStyle(color: Colors.black),
        ),
      );
    },
  );
}

额外优化建议 #

• 可以在注册成功的AlertDialog中添加“前往邮箱”按钮，引导用户快速完成验证：

  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text(
          'Registration successful!\nPlease verify your email to complete the registration.',
          style: const TextStyle(color: Colors.black),
        ),
        actions: [
          TextButton(
            onPressed: () => launchUrl(Uri.parse('mailto:')),
            child: const Text('Go to Email'),
          )
        ],
      );
    },
  );
  

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