Flutter web, hide splash screen after flutter web loaded

user_1348121 0
Viewed 308

As Flutter web boots up, it may take a few seconds to boot and start to render home page. hence I add an spinner in index.html to indicate to the user everything is normal.

in index.html (I have simplified)

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

then I need to listen to an event when main.dart.js is completely loaded, to remove the spinner element. does anyone knows what event I should listen? (I'm talking about javascript events that I can benefit in index.html) I can't listen to windows.onload because it fires before flutter boot up.

flutter-web flutter
2 Answers

Use the js package to call a js function from Flutter that removes the spinner:

@JS()
library loading;

import 'package:js/js.dart';

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

And in your index.html:

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

The event name is flutter-first-frame. add below script in index.html which removes and element with id: spinner (the loading indicator) when flutter framework completely loaded.

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

read more: https://haashem.medium.com/add-loading-indicator-toflutter-web-653579fe939a

user_13481210
Related