Flutter 3.0 – Better web-app lifecycles

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
Enter fullscreen mode

Exit fullscreen mode

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

Add a Comment

Your email address will not be published. Required fields are marked *