Flutter web, hide splash screen after flutter web loaded
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.
Solution 1:
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>