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

Question

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

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

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

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

Answer 1

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

@JS()
library loading;

import 'package:js/js.dart';

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

在你的index.html中：

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

Answer 2

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

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

阅读更多： https://haashem.medium.com/add-loading-indicator-toflutter-web-653579fe939a

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

Flutter web, hide splash screen after flutter web loaded

flutter

flutter-web