DEV Community

Keff
Keff

Posted on

7 4

Flutter 3.0 - Better web-app lifecycles

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

This post is just an overview on the new lifecycle for web apps, for an in-depth guide, check out Customizing web app initialization

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

AWS Q Developer image

Your AI Code Assistant

Implement features, document your code, or refactor your projects.
Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay