Create Flutter Splash Screen in just 5 minutes

Splash screen is a very important aspect of any mobile app. It is basically an introduction page for an app.

It generally serves to enhance the look and feel of an app. It also provides an opportunity to put some professional logo with slogan to tell the app users what this app is all about.

It also can be used for brand marketing for the companies because, It is loaded at the very beginning before the user can see anything or interact with the app.

Splash Screens are also a way to tell the user that the app loading is in progress i.e. its trying to load some data or preparing ready to use for the user.

In this tutorial, we are going to create a flutter splash screen with the help of a flutter package called SplashScreen.

So, lets get started!

1. Installing Package for Splash Screen

For this tutorial, we are going to use SplashScreen flutter package.

So, open your pubspec.yaml file, and add splashscreen text as shown in the image below:

splash screen
Adding package dependency inside pubspec.yaml

Now, Sync your project (Ctrl+S) in VSCode to download the package from the internet.

2. Adding a Sample Logo

As we have seen in our featured image, we are going to add a logo in our project.

2.1 Create a new directory inside your project called assets.

This directory will hold all the images in our project, right now, we will only have our logo image inside it. So, Copy and paste your logo inside the assets directory. In my case, its logo.png.

2.2 Add this to our pubspec.yaml as shown in the image below:

splash screen
Adding image to the pubspec.yaml

2.3 Again, press CTRL + C to sync your project.

We have finished adding our dependencies on our project. Now, we will dive into writing our source code in main.dart file.

3. Using the Splash Screen Package

3.1 In our main.dart file, We will import our package as follows:

import 'package:splashscreen/splashscreen.dart';

3.2 Once, the import is done, We will create a stateful widget and use the splash screen package as follows:

SplashScreen(
        //number of seconds the splash screen will show
        seconds: 7,
        //Page to show after splash screen
        navigateAfterSeconds: MainPage(),
        title: new Text(
          'Coding Ninja',
          style: new TextStyle(
              fontWeight: FontWeight.bold, color: Colors.red, fontSize: 30.0),
        ),
        //Our logo that we have imported in step 2
        image: new Image.asset('assets/logo.png'),
        //Splash Screen Background color
        gradientBackground: LinearGradient(
            colors: [Colors.cyan, Colors.blue[100]],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: new TextStyle(),
        photoSize: 100.0,
        loaderColor: Colors.red,
      ),

If you dont like the default font in the splash screen, You can use custom fonts in flutter.

3.3 Now let’s create a new screen called Main Screen which will be shown after the splash screen. For this, create stateless widget called MainPage as shown in the source code below:

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Coding Ninja"),
        automaticallyImplyLeading: false,
      ),
      body: new Center(
        child: new Text(
          "Main Screen After Splash",
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}

Now, our final main.dart file will have the following source code:

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SplashScreen(
        //number of seconds the splash screen will show
        seconds: 7,
        //Page to show after splash screen
        navigateAfterSeconds: MainPage(),
        title: new Text(
          'Coding Ninja',
          style: new TextStyle(
              fontWeight: FontWeight.bold, color: Colors.red, fontSize: 30.0),
        ),
        //Our logo that we have imported in step 2
        image: new Image.asset('assets/logo.png'),
        //Splash Screen Background color
        gradientBackground: LinearGradient(
            colors: [Colors.cyan, Colors.blue[100]],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: new TextStyle(),
        photoSize: 100.0,
        loaderColor: Colors.red,
      ),
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text("Coding Ninja"),
        automaticallyImplyLeading: false,
      ),
      body: new Center(
        child: new Text(
          "Main Screen After Splash",
          style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}

4. Our Final App Screens

Splash Screen
Main Screen

5. Final Thoughts

Congratulations! Within 5 minutes we have created a flutter splash screen for our mobile application. You are always free to play around it in order to create the best design for you. I hope you liked this tutorial. In our next article, we will be exploring some advance splash screen tutorials with some animations. Till then, never stop learning by exploring through my other articles:

Happy Coding!