When starting up a Flutter application, be it in mobile or web, there is a blank screen displayed before the app shows its first screen. In reality, what happens is that the Flutter framework engine is “booting up” before being able to show the first screen, so by default it shows a white screen.
In both Android and iOS, we can change this by using a Native Splash Screen, since it’s something that native apps extensively use for branding and initialization.
Medium’s Android App Splash SCreen
But what about Web? How can we show something different to the user while Flutter is booting up?
Understanding the Native Elements of Flutter Web
After we create a new Flutter project, we can see a folder for each native platform that we target: android, ios, web and macos. Inside each folder are files for each platform, and if we examine specifically the web folder, we can see the following files:
web/
├── icons/
├── favicon.png
├── index.html
└── manifest.json
Here we can change some properties of our web application, such as the icon that is displayed on the browser tab, the favicon.png, or adding preview text and images by changing the meta tags in the index.html file (as seen in the addtoany article)
We could also add more functionality to our web app, by adding a JavaScript file exposing functions that we could call in Dart with the dart:js library. This can be useful if we want to show a custom JavaScript alert, for example:
Example Javascript Alert
These files are going to be used to load the Flutter application. Specifically, the index.html file is used not only to declare new scripts, the manifest and favicon, but is also used to load the main.dart.js file that is used to boot up Flutter:
<body>
<!—- ... —->
<script src="main.dart.js" type="application/javascript"></script>
</body>
#splash-screen #flutter #web
