Flutter二次弹窗无法关闭求助：OTP验证后进度弹窗无法关闭

这个问题我之前也碰到过，大概率是Context使用不当或者异步操作中上下文失效导致的，给你几个具体的排查和解决方向：

1. 确保使用正确的BuildContext打开进度弹窗 #

你关闭OTP弹窗后，一定要用当前页面的Context打开进度弹窗，而不是OTP弹窗内部的Context——如果用了OTP弹窗的Context，等OTP弹窗被pop后，这个Context就失效了，后续调用pop自然找不到进度弹窗的路由。

举个例子，假设你的OTP验证方法是在页面的State类里：

void verifyOTP(String otp) async {
  // 验证OTP逻辑
  bool isValid = await OTPManager.verify(otp);
  if (isValid) {
    // 关闭OTP弹窗（这里用的是OTP弹窗的Context，没问题）
    Navigator.of(context).pop();

    // 用页面的Context打开进度弹窗！这里的context是页面State的context
    showDialog(
      context: context,
      barrierDismissible: false, // 禁止点击背景关闭
      builder: (_) => const Center(
        child: CircularProgressIndicator(),
      ),
    );

    // 执行后续上传操作
    await uploadToFirebase();
  }
}

2. 异步操作中先检查Context是否可用 #

Firebase上传是异步操作，等上传完成时，页面可能已经被销毁（比如用户中途返回了其他页面），这时候调用Navigator.pop()会失效甚至报错。所以一定要先判断mounted（State类的属性，表示当前组件是否还挂载在树上）。

修改上传逻辑：

Future<void> uploadToFirebase() async {
  try {
    // 执行Firebase Storage上传
    final storageRef = FirebaseStorage.instance.ref('uploads/my_file.jpg');
    await storageRef.putFile(myLocalFile);

    // 上传完成后，先检查Context是否还可用
    if (mounted) {
      Navigator.of(context).pop(); // 关闭进度弹窗
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('上传成功！')),
      );
    }
  } catch (e) {
    // 上传失败也要关闭弹窗并提示错误
    if (mounted) {
      Navigator.of(context).pop();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('上传失败：${e.toString()}')),
      );
    }
  }
}

3. 尝试使用根导航器强制关闭 #

如果上面的方法还是不行，可能是你的页面用了嵌套导航器，导致进度弹窗被添加到了子导航栈里。这时候可以指定操作根导航器：

打开弹窗时指定根导航器： #

showDialog(
  context: context,
  useRootNavigator: true, // 强制使用根导航器
  barrierDismissible: false,
  builder: (_) => const CircularProgressIndicator(),
);

关闭弹窗时指定根导航器： #

if (mounted) {
  Navigator.of(context, rootNavigator: true).pop();
}

完整示例代码 #

把这些逻辑整合起来，大概是这样的：

class _UploadPageState extends State<UploadPage> {
  File? myLocalFile;

  void _handleOTPSuccess() async {
    // 关闭OTP弹窗
    Navigator.of(context).pop();

    // 打开进度弹窗
    showDialog(
      context: context,
      useRootNavigator: true,
      barrierDismissible: false,
      builder: (_) => const Center(
        child: CircularProgressIndicator(color: Colors.blue),
      ),
    );

    // 执行上传
    await _uploadFileToFirebase();
  }

  Future<void> _uploadFileToFirebase() async {
    if (myLocalFile == null) return;

    try {
      final storageRef = FirebaseStorage.instance.ref('uploads/${DateTime.now().millisecondsSinceEpoch}.jpg');
      await storageRef.putFile(myLocalFile!);

      // 上传成功关闭弹窗
      if (mounted) {
        Navigator.of(context, rootNavigator: true).pop();
        ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('上传完成！')));
      }
    } catch (e) {
      // 上传失败处理
      if (mounted) {
        Navigator.of(context, rootNavigator: true).pop();
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('上传出错：$e')));
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 打开OTP弹窗的示例
            showDialog(
              context: context,
              builder: (otpContext) => AlertDialog(
                title: const Text('验证OTP'),
                content: TextField(onSubmitted: (otp) {
                  // 假设验证成功
                  _handleOTPSuccess();
                }),
              ),
            );
          },
          child: const Text('开始验证并上传'),
        ),
      ),
    );
  }
}

最后检查点 #

• 确认没有在上传过程中执行其他路由操作（比如push新页面），否则进度弹窗会被压在栈底，pop无法触发。
• 如果是用第三方弹窗库（比如flutter_spinkit），也要确保用的是正确的Context。

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