Flutter: Design your own SplashScreen

A splash screen is a page that usually appears for a few seconds while launching an application.

Courtesy of Dribbble

Why we use Splash screen?

• This screen can contain some basic info like the logo, app name, version etc.
• Mostly, developers use the splash screen to let the application prefetch data from remote servers while launching it. Instead of displaying a blank screen while loading, splash screen would be the best choice to use.
• Once the splash screen duration is over, it takes us to the next screen, often to be home screen.

Let’s create an application with a basic splash screen containing a single image.

Getting Started!

As in other programming languages like C, in Dart also main() will get executed once we run our project. So, we write logic for that first,

main.dart

• Import material.dart package for including material widgets to our application. Create a StatelessWidget and call SplashScreen() inside that. We should not write too much code in the main() itself. This may increase the load, that’s why we keep it simple.

splashScreen.dart

This file is where we are going to implement our Splash Screen functionality.

• Obviously, this is going to be a StatefulWidget, since the state of it is going to change in a few seconds.
• I have included an image at the center of the app screen using Center widget. Remember, you need to include the chosen image to your project folder and update the pubspec.yaml file in assets section.

Logic

Inside the initState(), call a Timer() with the duration, as you wish, I made it 3 seconds, once done push the navigator to Home Screen of our application.
Note: The application should show the splash screen only one, the user should not go back to it again on back button press. For this, we use Navigator.pushReplacement(), It will move to a new screen and remove the previous screen from the navigation history stack.

home.dart

The application will land at this page once it is done displaying the splash screen. It just has a simple Text widget to show ‘Welcome to home page’.

Now, you know the logic behind Splash Screens. Simple, right?
Design your own splash screen and share your experience with me. ❤

I hope you like it.
If you find this tutorial useful, don’t forget to click/tap on the 👏 button as long as you can. :-) Follow to get more interesting tutorials on Flutter.
Would you like to appreciate my work? Buy Me A Cup Of Coffee! 😊
Other tutorials,

Working with APIs in Flutter

Saving data to Local Storage in Flutter

Flutter: Swipe to Dismiss