Flutter中Loader弹窗卡住无法跳转至下一页问题排查

你遇到的核心问题是上下文(context)管理错误，导致Loader弹窗无法关闭且页面跳转失败，控制台的空值错误正是因为使用了失效的context进行导航操作：

1. 调用Navigator.pop(context)关闭抽屉后，原抽屉的context已不再关联当前活跃的导航栈；
2. showDialog的builder函数会创建新的context，但后续关闭弹窗时用的还是抽屉的旧context，无法正确定位到弹窗；
3. 延迟回调中的Navigator.pop尝试操作已失效的context，触发空值检查异常。

• 单独保存弹窗的context，确保关闭操作针对的是弹窗本身；
• 确保弹窗完全关闭后再执行页面跳转，避免导航栈混乱；
• 可选：使用rootNavigator: true获取根导航器，规避context层级问题。

方案一：保存弹窗Context #

onTap: () async {
  // 关闭导航抽屉
  Navigator.pop(context);

  // 存储弹窗的Context
  late BuildContext dialogContext;
  
  // 显示Loader弹窗
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      dialogContext = context;
      return WillPopScope(
        onWillPop: () async => false,
        child: const SpinKitCircle(
          color: Colors.purple,
          size: 50.0,
        ),
      );
    },
  );

  // 模拟耗时操作（替换为实际业务逻辑，比如接口请求）
  await Future.delayed(const Duration(seconds: 3));

  // 关闭Loader弹窗
  Navigator.pop(dialogContext);

  // 跳转到目标页面
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const MyChallenges()),
  );
},

方案二：使用根导航器 #

如果担心context层级问题，可直接通过根导航器关闭弹窗：

onTap: () async {
  // 关闭导航抽屉
  Navigator.pop(context);

  // 显示Loader弹窗
  final dialogFuture = showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) => WillPopScope(
      onWillPop: () async => false,
      child: const SpinKitCircle(color: Colors.purple, size: 50.0),
    ),
  );

  // 模拟耗时操作
  await Future.delayed(const Duration(seconds: 3));

  // 通过根导航器关闭弹窗
  Navigator.of(context, rootNavigator: true).pop();
  await dialogFuture; // 等待弹窗关闭完成

  // 跳转到目标页面
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const MyChallenges()),
  );
},

• 两种方案都解决了context混淆问题，确保关闭的是Loader弹窗而非其他页面；
• 延迟操作后先关闭弹窗再跳转，保证导航栈顺序正确；
• 若实际场景是等待异步任务（比如网络请求），直接替换Future.delayed为对应异步逻辑即可。

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