Splash Screen Using Flutter

4 min readDec 26, 2019

Flutter made so easy for app developers. It is very handy. Its single codebase is enough to generate android supporting apps and iOS supporting apps. I use Android Studio for coding this flutter code. If you are a beginner and unable to decide which software to start with, then my suggestion would be Android Studio.

Splash Screen is a welcoming screen of an app where the logo or name of the organization and the current version of the software. In simple words, it is a kind of introduction screen for the application. And making a splash screen would be fun to code.

So today, let’s explore a simple splash screen with two different types of backgrounds, one with a gradient background and another one is a plain background.

Add an assets folder

In your assets folder, add your logo which you want to see on your splash screen. You can add an image in two ways:-

Insert an image from the local assets folder.
Or you can directly give an image’s URL.

Here in this program, I’m adding my image from the local assets folder.

Then create two files grad_bg_splash.dart and plain_bg_splash.dart in lib folder.

Adding dependencies

In pubspec.yaml add the given dependencies as shown in the below-given code snippet.

Whenever you add any dependencies or any assets in the pubspec.yaml file then you need to update your packages by typing a command in a command prompt:-

flutter packages get

Let's start with main.dart

Since I’m doing a splash screen with two different backgrounds so I’ll create two buttons on my main page which on clicked shows you the respective splash screen. First I’ll do a splash screen with a plain background. Then I’ll add gradient background to it. So first let’s do the splash screen with a plain background.

Creating Raised Buttons

onPressed: (){
  Navigator.push(context, MaterialPageRoute(builder: (context) => PlainBgSplashScreen()));
}

This block of code directs you to the splash screen with a plain background.

onPressed: (){
  Navigator.push(context, MaterialPageRoute(builder: (context) => GradBgSplashScreen()));
}

And this block of code directs you to the splash screen with a gradient background.

Splash Pages

Create a SplashPage class

Since you added a splash screen dependency in pubspec.yaml, so now you can import a splash screen package in which we use SplashScreen widget from splashscreen.dart file.

Now create a Splash Screen page extending a StatelessWidget. Here, StatefulWidget isn’t required in the case of SplashPage since there will be no user interaction with that screen during the runtime. And there will be no change in the state of widgets during the runtime of the splash screen. But here in this article, I’m using StatefulWidget. So you also follow the same.

Note.:- Don’t create SplashScreen class because SplashScreen is a widget class. It should be returned from your SplashPage class. You can create that class with any name but don’t use SplashScreen to name your class.

In your SplashPage class, you have to mention the duration of the splash screen that you want to run at the starting of your app -under the seconds attribute. And you can mention your image that you want as your app logo -under the image attribute. You can change the color of the loader symbol. You can also give the text for the loader. And also you can mention the title under the title attribute. And you have to mention the class which you want to display after the splash screen completes loading.

Add gradient background

For making a splash screen with gradient background you have to just add a small piece of code to the plain background splash screen. You have to use a combination of colors to do this.