如何移除Flutter Web页面加载时的空白加载屏（loader）？

你提供的HTML代码看起来和Flutter Web加载白屏的问题无关，以下是针对该问题的具体解决方法：

1. 自定义初始HTML占位内容 #

Flutter Web的入口是web/index.html，默认页面为空白状态，你可以直接在这个文件中添加与主页风格匹配的静态占位元素（比如logo、骨架屏），让用户在等待Flutter初始化时看到的不是白屏。

修改web/index.html的body部分示例：

<body>
  <!-- 自定义预加载占位区 -->
  <div id="preloader" style="width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f5f5;">
    <div style="width:60px;height:60px;border:4px solid #ddd;border-top-color:#007AFF;border-radius:50%;animation:spin 1.2s linear infinite;"></div>
    <style>
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
    </style>
  </div>

  <!-- Flutter初始化完成后隐藏占位区 -->
  <script>
    window.addEventListener('flutter-first-frame', () => {
      document.getElementById('preloader').style.display = 'none';
    });
  </script>

  <!-- Flutter默认加载脚本 -->
  <script src="main.dart.js" type="application/javascript"></script>
</body>

2. 优化资源加载与编译参数 #

• 启用资源预缓存：在pubspec.yaml中开启web_precache，提前缓存必要资源，加快加载速度：

flutter:
  web:
    precache: true

• 选择合适的Web渲染器：发布编译时，简单UI用html渲染器（启动更快），复杂UI用canvaskit（性能更好）：

# html渲染器（启动快，适合轻量UI）
flutter build web --release --web-renderer html

# canvaskit渲染器（性能优，适合复杂UI）
flutter build web --release --web-renderer canvaskit

• 启用代码分割：通过deferred import拆分非首屏代码，减少初始bundle体积：

// 延迟加载非首屏页面
import 'package:your_app/secondary_page.dart' deferred as secondary;

// 后续需要时再加载
void loadSecondaryPage() async {
  await secondary.loadLibrary();
  // 跳转至对应页面
}

3. 减少首屏初始化耗时 #

把网络请求、复杂数据解析等耗时操作，放到首屏渲染完成后再执行，确保Flutter能快速渲染第一帧：

void main() {
  runApp(const MyApp());
  // 首屏渲染完成后执行耗时操作
  WidgetsBinding.instance.addPostFrameCallback((_) {
    fetchRemoteData();
    initComplexModules();
  });
}

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