Creating a Splash Screen In Flutter

In this tutorial, you will learn how to create a Splash Screen in your Flutter mobile application.

What is a Splash Screen?

The splash screen is a screen that shows the logo or tagline of the company. No one likes a white screen while opening an app right? So let’s learn how to make your mobile app built with Flutter look professional by creating a splash screen for it.

Adding a splashscreen Package

The good news is that we actually don’t have to do much to make the splash screen start appearing in our Flutter mobile app. There is a special package called “splashscreen that we can use to quickly add basic splash screen support to our app.

In your Flutter project, open the pubspec.yaml file  and add the “splashscreen” package at it is shown in the example below.

dependencies:
  flutter:
    sdk: flutter
  splashscreen: ^1.3.5

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0

In the example above I have added a “splashscreen” package of version 1.3.5. Save the pubspec.yaml file and open the main.dart file.

Customizing the Splash Screen

To make your app display the splash screen with some text and images on it, you will use the SplashScreen widget which is highly customizable. Let’s have a look at a small code snippet first and then discuss its properties.

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 14,
      navigateAfterSeconds: new AfterSplash(),
      title: new Text('Welcome In SplashScreen',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 20.0
      ),),
      image: new Image.network('https://i.imgur.com/TyCSG9A.png'),
      backgroundColor: Colors.white,
      styleTextUnderTheLoader: new TextStyle(),
      photoSize: 100.0,
      loaderColor: Colors.red
    );
  }
}

Above we have created a simple app that uses a SplashScreen widget with the following properties:

  • seconds: for how many seconds you want to show the Splash Screen,
  • navigateAfterSeconds: the widget you want to navigate after the splash screen. It is usually an app Main Screen/Home Screen,
  • title: the title you want to show on splash screen,
  • style: it takes TextStyle() widget for styling the title or any text in the splash screen,
  • image: it takes the image/logo you want to show on a splash screen. It can be from the app’s assets folder or from the Internet,
  • backgroundColor: the background color you want to give to the splash screen,
  • photoSize: the size of the image/logo in pixels,
  • loaderColor: the color for CircularProgressIndicator() while the Splash Screen is active or showing.

If you run the above code example in a device simulator, the app splash screen will look like the one illustrated with an image below.

Splash screen example in FlutterComplete Code Example

Below is a complete code example for you to run and see how it works. It will display a splash screen that we have created in this tutorial.

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

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
        seconds: 5,
        navigateAfterSeconds: new AfterSplash(),
        title: new Text(
          'Welcome In SplashScreen',
          style:
              new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
        ),
        image: new Image.network('https://i.imgur.com/TyCSG9A.png'),
        backgroundColor: Colors.white,
        styleTextUnderTheLoader: new TextStyle(),
        photoSize: 100.0,
        loaderColor: Colors.red);
  }
}

class AfterSplash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
          title: new Text("Welcome In SplashScreen Package"),
          automaticallyImplyLeading: false),
      body: new Center(
        child: new Text(
          "Done!",
          style:
              new TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}

I hope this Flutter tutorial was helpful for you. If you are interested in learning Flutter, please check other Flutter tutorials on this site. Some of them have video tutorials included.

Happy mobile app development with Flutter 🙂!


Leave a Reply

Your email address will not be published. Required fields are marked *

Free Video Lessons

Enter your email and stay on top of things,

Subscribe!