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:
macos. Inside each folder are files for each platform, and if we examine specifically the
web folder, we can see the following files:
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). The
meta tags will produce the following preview on other websites:
Flutter – Beautiful native apps in record time
Flutter is Google’s UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from…
We could also add more functionality to our web app, by adding a
Dart with the
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:
Adding a Simple Splash Screen
In web, we don’t have an explicit way to edit the
SplashScreenDrawable as we have in Android or a
Storyboard that can be edited in the case of iOS, so we have to work with what we have – the
Let’s start with something simple — loading an image from the web. As we can see from W3Schools, this can be done using the
<img> tag inside the
<body>. So let’s start by adding a new image to it.
First, we add a new folder inside
img, in which we put our Flutter logo:
We can then show it using:
Now, when we reload our page, the Flutter logo is displayed!
But, as we can see, the image is not centered. A quick Google search shows another helpful page from W3.org telling us how we can quickly center our images — Centering Thing
To add styling to our web page, we will need to first add a
styles.css file inside the
Inside it, we can paste the code for centering the image:
Then, we need to link our style sheet to our
index.html file by adding the following to the
Finally, we just need to add the
class = "center" to our image declaration:
This will now show our image centered:
We can now go a step further, and adding a background color to our page, by further customizing the
And this is it! We added a rudimentary Splash Screen to our Flutter Web application! ?
As seen in the article, we can easily manipulate our
index.html file to provide a “splash” screen to our app. We can even further expand this concept by adding
css animations to our app, as we have in this example:
Which can be found in the following Github repository:
Dismiss GitHub is home to over 50 million developers working together to host and review code, manage projects, and…
As an ending note, this workaround might change in the near future, as the Flutter Team adds more and more functionality to Flutter Web, but until then we can provide a better experience to our users when they are first loading our website.