It finally happened, version 3.0 of Flutter is here!!
One of the most exiting things for me is, that we can now better control web-app lifecycles. This post will give an overview of this new feature. If you want to see a more general changelog, check out this post, or this other one by @frezyx
We can also customize how a Flutter app is initialized on the web using the _flutter.loader JavaScript API. This API can be used to display a loading indicator, prevent the app from loading based on a condition, or wait until the user presses a button before showing the app.
This was a big missing piece for building web apps with Flutter. At least for me.
We can now:
- Add a splash screen
- Add a loading indicator, while loading resources.
- Add a plain HTML interactive landing page displayed before the Flutter app.
The initialization process now looks like this:
-
Loading the entrypoint script
- Loads the main.dart.js script and initializes the service worker.
-
Initializing the Flutter engine
- Starts Flutter’s web engine by downloading required resources.
-
Running the app
- Prepares the DOM for your Flutter app and runs it.
Let's see an example, which adds a loading indicator:
<html>
<head>
<!-- ... -->
<script src="flutter.js" defer></script>
</head>
<body>
<div id="loading"></div>
<script>
window.addEventListener('load', function(ev) {
var loading = document.querySelector('#loading');
loading.textContent = "Loading entrypoint...";
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
loading.textContent = "Initializing engine...";
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
loading.textContent = "Running app...";
return appRunner.runApp();
});
});
</script>
</body>
</html
This post is just an overview on the new lifecycle for web apps, for an in-depth guide, check out Customizing web app initialization
Top comments (0)