Flutter 3.0 - Better web-app lifecycles

#flutter #dart #news

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