Photo by Mike van den Bos on Unsplash

Add loading indicator for Flutter Web

You have created your flutter web app but it takes moment to render you app in the browser. and it gives a false moment for you users that your app is not working!

The blue line indicator is added by flutter in debug mode and will be removed in released version of your app. and even when the blue loading indicator is removed there is also delay of 1 second to Flutter framework completely boot up.

Create loading indicator

Add a file named styles.css in this path: web/assets and paste below code. it creates a css loading indicator. we aim to display it while Flutter framework boots

svg path,
svg rect{
fill: #F9BC32;
}
.spinner {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

then refer the stylesheet above in index.html file in the head tag:

<link rel=”stylesheet” type=”text/css” href=”assets/styles.css”>

now our loading indicator is ready to shown. in he body tag add the loading indicator:

https://codepen.io/aurer/pen/jEGbA

<div class="spinner">
<svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="60px" height="60px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<path opacity="0.2" fill="#000"
d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z" />
<path fill="#000" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
C22.32,8.481,24.301,9.057,26.013,10.047z">
<animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20"
dur="0.5s" repeatCount="indefinite" />
</path>
</svg>
</div>

so it will be shown at the center of index.html page. but how to hide it after web app loaded?

Hide Loading Indicator

With the power of java script we listen to special flutter event named: flutter-first-frame that broadcasted when first frame rendered, and at that moment we remove the spinner from index.html page. add below script in the body tag:

<script>
 window.addEventListener('flutter-first-frame', function () {
   var el = document.getElementsByClassName('spinner')[0];
   el.remove();
 });
</script>

There are other events but they are broadcasted earlier and cause the spinner hides earlier. as you can see in the below, blue bar hides early but our spinner is still shown.

Done!