Flutter 网络连接突然断开时如何自动关闭当前加载弹窗？

你遇到的卡弹窗问题本质是异步请求没有加中断触发条件，无限制等待服务端响应导致的，不需要依赖特定库也可以实现需求，也可以选择对应平台的网络状态监听库简化开发。

原生实现方案（无需额外依赖） #

核心用Promise.race()将业务异步逻辑和两个中断触发器放在一起竞争执行，满足任意一个中断条件就直接终止等待、关闭弹窗：

• 网络状态变化监听器：监听到网络断开时直接触发中断
• 超时计时器：就算网络状态监听异常，也可以用超时兜底避免无限等待

参考代码示例（Web端） #

showDialog();
// 注册网络断开监听器
const offLineHandler = () => {
  hideDialog();
  throw new Error("网络断开，操作已终止");
};
window.addEventListener("offline", offLineHandler);

try {
  // 15秒超时兜底，可根据业务调整时长
  const timeout = new Promise((_, reject) => {
    setTimeout(() => reject(new Error("操作超时")), 15000);
  });
  await Promise.race([
    (async () => {
      await firebaseFunction();
      await apiFunction();
    })(),
    timeout
  ]);
} catch (err) {
  // 可自行添加错误提示逻辑
  console.log(err);
} finally {
  hideDialog();
  window.removeEventListener("offline", offLineHandler);
}

可选第三方库 #

如果需要跨平台适配（比如移动端APP、多端统一项目），可以用对应平台的网络状态监听库，避免自己处理不同端的兼容性问题：

• 前端Web/React/Vue项目：直接用原生navigator.onLine + offline/online事件即可，无需额外库
• React Native项目：可使用@react-native-community/netinfo
• Flutter项目：可使用connectivity_plus
• 原生Android/iOS项目：分别使用系统自带的ConnectivityManager、NWPathMonitor即可

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