Creating Splash Screens in Flutter Apps

First of all, What is a splash screen?

Splash Screen is the screen that you, or a user, sees when the app first loads up. The default splash screen is usually white and is shown till the app loads up. After the app loads up, the developer can then choose to show a forced splash screen to provide users with some info or to display their logo for a bit long.

Forced Splash Screen

As explained in the starting, this screen is built as a dart file in your project and is not actually required but is forced by many apps to give a brief introduction to the users about the app.

Steps to include a forced splash screen:-

  1. Create a new flutter project

Use Android Studio or your terminal to create a new flutter project and run your project in any IDE like Android Studio or Visual Studio Code and delete all the default code written in the project.

2. Creating the splash screen

Create a new dart file, here I create a new package called screens and in that I create 2 new dart files named splash_screen.dart and home.dart.

After this create a stateful widget for the splash screen in the file splash_screen.dart with anything you like in it. Here I used a simple text with flutter_spinkit package which you need to depend upon by adding it to your pubspec.yaml file.

3. Coding the home screen

Now we need a different screen to which we will direct the user after the splash screen. Create a stateless/stateful widget in the home.dart file. Here I create a simple home page with an app bar and a body.

4. Setting up the timer for splash screen

Now we need to set up the time for which we want this splash screen to be shown to a user.

We do so by creating a new method called splashTimer and then we call it in the initstate method. In the splashTimer, we use Timer to hold the splash screen for some seconds, in my case 3 seconds, and then push the home page using pushReplacement because we don’t want the user to go back to the splash screen.

Additionally to use async and to call HomePage(), we will also need to add 2 extra imports at the top.

The code :-

The complete code for splash_screen.dart

The final output:-

True Splash Screen

As explained above, this screen is shown when the app is launched till the app loads up in the background. By default it is white and can be changed easily in our project. We will be using the previous project to add this.

Steps:-

  1. Create a new color for the splash screen

In the existing project navigate to android -> app -> src -> main -> res -> values.

Here create a new file named color.xml.

2. Adding code in color.xml file

Add the following code in the file where you can add any number of colors by naming them and writing their hex codes in a similar fashion.

3. Adding the color to splash screen

navigate to android -> app -> src -> main -> res -> drawable and open launch_background.xml.

Replace the following code

with

as I created a color named deepPurple above.

The whole code now looks like this-

Final output -

Similarly images can also be added to this splash screen by uncommenting the lines already present in launch_background.xml and by pasting your image in the drawable folder.

Always learning