修改Flutter Web的Splash Screen（默认白屏前的原生初始屏）

核心问题原因 #

系统会根据Web App Manifest的配置生成原生启动屏，如果background_color、icons配置缺失或与自定义闪屏不一致，就会先显示系统默认的纯色屏，之后才加载出Web层的白屏。以下是纯Web端的解决步骤：

1. 完善Web App Manifest配置 #

确保manifest.json中配置好与启动屏相关的关键字段，让系统原生启动屏和你的自定义闪屏视觉一致：

{
  "name": "你的PWA应用名称",
  "short_name": "应用短名",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff", // 必须和自定义闪屏背景色完全一致
  "theme_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

• background_color：决定系统原生启动屏的背景色，务必和后续Web闪屏的背景色统一
• icons：提供多尺寸图标，系统会自动匹配设备显示，避免出现默认占位图标

2. 实现Web层无缝闪屏 #

在index.html的最顶部添加全屏闪屏容器，确保页面加载前就显示，和系统启动屏无缝衔接：

HTML 代码 #

<body>
  <!-- 闪屏容器放在页面最顶部 -->
  <div id="splash-screen" class="splash-container">
    <img src="/assets/splash-logo.png" alt="应用启动图标" class="splash-logo">
  </div>

  <!-- 页面其他内容 -->
  <div id="app-content">
    <!-- 你的应用内容 -->
  </div>
</body>

内联CSS（放在<head>中，避免外部CSS加载延迟） #

<style>
.splash-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff; /* 和manifest的background_color保持一致 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.3s ease-out;
}

.splash-logo {
  width: 120px;
  height: 120px;
}

.splash-hidden {
  opacity: 0;
  pointer-events: none;
}
</style>

JS 控制闪屏隐藏（页面加载完成后触发） #

<script>
window.addEventListener('load', () => {
  const splashScreen = document.getElementById('splash-screen');
  // 延迟隐藏，给用户视觉过渡时间，可根据需求调整
  setTimeout(() => {
    splashScreen.classList.add('splash-hidden');
    // 动画结束后移除DOM，避免占用资源
    setTimeout(() => splashScreen.remove(), 300);
  }, 500);
});
</script>

3. 优化资源加载，减少白屏间隙 #

• 预加载闪屏图片：在<head>中添加预加载标签，确保闪屏资源优先加载

<link rel="preload" href="/assets/splash-logo.png" as="image">

• 用Service Worker缓存闪屏相关资源（包括manifest、闪屏图片、内联CSS对应的资源），确保二次启动时直接从缓存读取，消除加载间隙

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