How to Make a Loading Screen for Flutter Web in a few minutes
As I’ve said before, Flutter for Web has a pretty big bundle size and even more so If you decide to also provide the WASM implementation of Skia to improve performance.
First, Some explaining
The user goes on the website
He then has to download all the CSS and JS files necessary for the app
This takes time depending on your connection, with mobile users and their 2G/3G taking way more time than what you’ll see on your desktop.
Only then can the user navigate and interact with your website
After taking a look at one of my older project, it seems using Flutter usually nets you a more than 1MB initial bundle which makes it quite prohibitive to load.
Making the Loading Screen
The biggest issue for the user, is to be met with a blank page while the whole app loads. This leaves him wondering if he’s actually loading anything and if there is an issue.
One simple way to avoid this is to create a loading screen. Not only the user will then know that something is loading, it will also have a positive impact on the perceived speed / performance of the website.
So here we go, make sure you already have a Flutter project setup for web. I’ll show you how to add a full screen spinner to show the users while your app loads?
Our Loading Screen
Our first stop will be loading.io in order to select a spinner. Choose whichever you fancy, click on it and get its HTML + CSS.
Our second stop will be our Web folder. Create a loader.css file and paste your newfound spinner CSS into it.
Every browser actually comes with a default styling. We’ll need to take care of it with the following CSS
Disable the margin that is usually set by default by your browser
Center the loading spinner and the title
Styling our loading text
Our next stop is the index.html file, we’ll have to add both our spinner and its associated CSS.
And you’re done. Serve for web and you’ll briefly see “My Loading Text” alongside your previously selected spinner.
I’ve talked about loading times and there are a few more things you should know:
This long loading will only happen on a user’s first visit and whenever you push out new code to your Flutter app. The reason is simple: Chrome (and other browsers) will try and cache the content of your website. Your content is cached, recompiled for performance and will be loaded locally for every subsequent visit by your user.
What happens then is that users will only have to redownload the bits and pieces that have changed since their last visit. It is not quite the case with Flutter for web.
Open up your devtools, and you’ll see a main.dart.js file. This file contains your application as well as the whole Flutter framework. Every modification you make to your website will invalidate the cache for this specific file, even if you actually have set up async loading and split your app.
This means that every time you push a new version live, your user will HAVE to redownload this (quite heavy) file.