It lastly occurred, model 3.0 of Flutter is right here!!
One of the vital exiting issues for me is, that we will now higher management web-app lifecycles. This submit will give an outline of this new characteristic. If you wish to see a extra common changelog, take a look at this submit, or this different one by @frezyx
We are able to additionally customise how a Flutter app is initialized on the net utilizing the _flutter.loader JavaScript API. This API can be utilized to show a loading indicator, stop the app from loading primarily based on a situation, or wait till the person presses a button earlier than displaying the app.
This was an enormous lacking piece for constructing net apps with Flutter. Not less than for me.
We are able to now:
- Add a splash display screen
- Add a loading indicator, whereas loading assets.
- Add a plain HTML interactive touchdown web page displayed earlier than the Flutter app.
The initialization course of now appears like this:
-
Loading the entrypoint script
- Masses the principle.dart.js script and initializes the service employee.
-
Initializing the Flutter engine
- Begins Flutter’s net engine by downloading required assets.
-
Working the app
- Prepares the DOM on your Flutter app and runs it.
Let’s examine an instance, which provides a loading indicator:
<html>
<head>
<!-- ... -->
<script src="flutter.js" defer></script>
</head>
<physique>
<div id="loading"></div>
<script>
window.addEventListener('load', perform(ev) {
var loading = doc.querySelector('#loading');
loading.textContent = "Loading entrypoint...";
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(perform(engineInitializer) {
loading.textContent = "Initializing engine...";
return engineInitializer.initializeEngine();
}).then(perform(appRunner) {
loading.textContent = "Working app...";
return appRunner.runApp();
});
});
</script>
</physique>
</html
This submit is simply an outline on the brand new lifecycle for net apps, for an in-depth information, take a look at Customizing web app initialization
