Flutter Web中main.dart无法加载，启动屏动画卡住求助

核心问题1：启动屏未自动隐藏 #

你的HTML启动屏设置了z-index:9999，但Flutter应用加载完成后没有隐藏这个容器，导致它一直覆盖在Flutter内容上方，看起来像是卡住，实际上Flutter已经运行了。

修复步骤： #

修改index.html中的Flutter初始化脚本，在runApp()完成后隐藏启动屏：

<script>
  window.addEventListener('load', function (ev) {
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: async function(engineInitializer) {
        let appRunner = await engineInitializer.initializeEngine();
        await appRunner.runApp();
        // 加载完成后隐藏启动屏
        document.getElementById('loader').style.display = 'none';
      }
    });
  });
</script>

核心问题2：外部图片加载异常 #

你使用的头像图片是Google Drive外链，可能存在跨域限制、加载超时或权限问题，导致页面资源加载阻塞，影响Flutter初始化流程。

修复步骤： #

将图片替换为本地资源：

1. 将图片文件放入Flutter项目的web目录下（比如web/assets/loader-avatar.png）
2. 修改img标签的src：

<img src="assets/loader-avatar.png" alt="loader">

额外排查点（新项目也出现问题时） #

如果新建项目也有同样问题，说明可能是环境或配置问题：

• 检查Flutter版本：运行flutter doctor确认无环境异常，建议升级到稳定版
• 清理缓存：执行flutter clean后重新构建项目
• 查看浏览器控制台：打开开发者工具（F12），检查Console和Network标签是否有JS报错或资源加载失败信息

优化后的关键代码示例 #

<!-- 启动屏容器 -->
<div class="loader_container" id="loader">
  <div class="text-center">
    <div class="avatar">
      <img src="assets/loader-avatar.png" alt="loader">
      <div class="spinner"></div>
    </div>
    <h6 class="q-mt-md q-mb-xl loading-text">Loading...</h6>
  </div>
</div>

<script>
  window.addEventListener('load', function (ev) {
    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: async function(engineInitializer) {
        let appRunner = await engineInitializer.initializeEngine();
        await appRunner.runApp();
        // 隐藏启动屏
        document.getElementById('loader').style.display = 'none';
      }
    });
  });
</script>

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