Indicate Website Loading for Flutter Web Apps 🤖

4 min readNov 13, 2021

Flutter has taken the world by storm and startups are opting for Flutter to build their amazing apps. Now along with Mobile Apps, Flutter is also providing amazing support for the Web and this is one of the reasons for its popularity. Flutter Web has come a long way and there have been a lot of improvements since its launch but it certainly will take some time to fully grow as a suitable Framework for the Web.

One of the biggest problems these days with Flutter Web is the “BLANK 😑” screen presented to the user before the page is loaded. 👇

This gives a poor impression of the Web App even before it opens. Well, in this article we will be taking a look at solving this issue by a quick fix of adding some additional HTML and CSS code to the Flutter Web app structure. So without any further discussion let’s take a look at the steps that we need to follow to solve this issue:

Step 1

First, In the “web” directory of the Flutter Project, we’ll create a new folder called assets, and in this folder, we will add a GIF (loading.gif) which we want to show as a loading indicator for our web app. You can also add a PNG or JPEG file, or even no file at all if you want to just show something created with HTML and CSS.

Step 2

Now, we’ll add the following code to the <body> tag of the index.html file of our Web App.

<body>
  <div id="loading_indicator" class="container">
    <img class="indicator" src="./assets/loading.gif" />
  </div>
.
.
.
</body>

Make sure this is, added just after the starting <body> before any other element. Notice, that we have added an id and class parameter to the parent <div> and a class to the child <img/>. Let’s ignore this “id” for now, and in the next step, we’ll take a look at the classes.

Step 3

Let’s define the classes that we have used in the HTML elements we just added. For this,we add a <style> element before the closing </head> tag and add the following code CSS to it.

<style>
      .container {
        width: 100vw;
        height: 100vh;
        display: flex; /* Default Axis is X*/
        justify-content: center; /* Main Axis */
        align-items: center; /* Cross Axis */
      }      .indicator{
        width: 50vw;
      }
</style>

In this style element, we are defining the container class, to make its <div> cover the entire page and center its child element (which is the <img/>) using the display property and setting it to flex. You can think of Flex as a Row or a Column depending on its Axis. By default, the axis of flex is X so it’s like a Flutter Row Widget. Now, the “justify-content” can be considered as the “mainAxisAlignment” property, and likewise “align-items” can be considered as the “crossAxisAlignment” property. By a combination of these three properties, we center the child in the parent <div>.

For the image, we are simply going to create an “indicator” class to set the width of the image. At this point, we can restart our web app (Not Hot Reload) to see the updates. It’ll look something like this:

Step 4

Do you see those ugly scroll bars on the right and bottom sides of the app? 😲

Well, we can remove them by setting the “overflow” property to hidden in the body element of the index.html using style property like this:

<body style="overflow: hidden">
.
.
</body>

And with this, those scrollbars will go away but there is another problem that we might overlook. 🤔 Currently, our app is working fine but imagine a case when the app freezer between resizing or there is some other issue when the app is not coving the entire web page. In those cases, the loading indicator will still be visible to the user because we are never really getting rid of it when the app has loaded successfully. So let’s just do that.

For this, we need to use a bit of javascript and add that to our index.html file just before the ending </body> tag.

window.onload = function () {
        setTimeout(function () {
          var loadingIndicator =                 document.getElementById("loading_indicator");
          if (loadingIndicator) {
            loadingIndicator.remove();
          }
        }, 10000);
};

And, We’re Done! 🙌

We now have a nice loading indicator that is presented to the user while our Flutter Web App loads. 🥳

If you like to have a visual representation for reference, check out this tutorial on my Youtube Channel and you’ll have a good idea! And while you’re there, if you find this useful, consider Subscribing and Sharing!

If you find this Useful, Consider Subscribing to RetroPortal Studio on Youtube at:

RetroPortal Studio

Hey! My name is Paras Jain and welcome to RetroPortal Studio! The goal of this channel is to create High-Quality…

www.youtube.com

Here are the links to my other Social Media Handles:

Youtube: https://www.youtube.com/retroportalstudio
Twitter: https://www.twitter.com/theretroportal
Instagram: https://www.instagram.com/retroportalstudio
LinkedIn: https://www.linkedin.com/in/parasjainrps
Github: https://github.com/retroportalstudio

Happy Coding! ✌😁