Flutter web，flutter web加载后隐藏启动画面答案

【问题标题】：Flutter web, hide splash screen after flutter web loadedFlutter web，flutter web加载后隐藏启动画面
【发布时间】：2021-12-26 19:39:57
【问题描述】：

随着 Flutter web 的启动，启动并开始渲染主页可能需要几秒钟。因此我在index.html 中添加了一个微调器，以向用户指示一切正常。

在index.html（我已经简化了）

<body>
<div class="spinner"></div>
.
.
.
</body>

然后我需要在main.dart.js 完全加载时监听一个事件，以删除微调器元素。有谁知道我应该听什么活动？（我说的是我可以在index.html 中受益的 javascript 事件）我无法收听 windows.onload，因为它会在颤振启动之前触发。

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

事件名称是flutter-first-frame。在index.html 中添加以下脚本，当flutter 框架完全加载时，该脚本会删除id 为spinner（加载指示器）的元素。

<script>
 window.addEventListener('flutter-first-frame', function () {
   var el = document.getElementsByClassName('spinner')[0];
   el.remove();
 });
</script>

【讨论】：

【解决方案2】：

使用 js 包从 Flutter 中调用一个 js 函数来移除微调器：

@JS()
library loading;

import 'package:js/js.dart';

@JS("stopLoading")
external void stopLoading();

在你的index.html:

<script>
function stopLoading() {
  ...
}
</script>

【讨论】：