flutter splash screen

Flutter Splash Screen

How to make Flutter Splash Screen?

Every single mobile app have a splash screen when starts. Let’s create a Flutter splash screen.

First: Import the image file into “image folder”

image folder

Import the image files into the project, put image files in a images folder at the root of a Flutter project. The image can be you project Logo or make a Splash Screen in a Photoshop.

Second: Declare the Image in the “pubspec.yaml”

Find pubspec.yaml file in your Flutter Project and open it, you will find it like this:

uses-material-design: true
– images/logo_c.png

Note: This “logo_c.png” is my logo name which i have used for my project.

Third: Make a dart file and name it splashScreen.dart or what ever you like.

Now import the “material.dart” and then import “dart:async”.

Then create a StatefulWidget and name it SplashScreen or of your choice, then start designing the Splash Screen which should be light weight or you can use logo also with simple solid background.

When your design is completed use the following code mentioned below in the big red border.

There you will get the duration code for the screen, after that there is a code for going on the next screen which can be your home, login, register or welcome screen. Make that page and mention it there.

splash code


This is how your splash screen will look like:

Flutter Restaurant App - splash screen