Adding a Splash Screen to Flutter Web
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.
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:
