How to Add Splash Screen in Flutter App?

We all have heard of Flutter right, it’s a cross-platform application development tool. Flutter can be used to make Android, IOS, and Web applications with just one code base (Dart programming language). In this article let’s see how we can add a splash screen to our applications.

What is Splash Screen?

When we open an application on our phones, the first thing we see is a screen with the logo of the app in the center that screen is referred to as a splash screen Now this splash screen can be used to make our applications look fancy but there’s more to it.

When we open an app on our device, some apps are required to authenticate the user (who’s opening the app) before they let us use the app. This authentication sometimes requires a fraction of a second during which time the user is presented with a splash screen so that the application does not appear to be stuck.

How to Implement it?

Flutter is all about packages, there is always a package available for our use. In this problem of ours, we will use a package called animated_splash_screen.

To install this package, add the following code to the pubspec.yaml file and run pub get :

dependencies:
  animated_splash_screen: ^1.1.0

Note: Watch the indentation, if you get the indentation wrong you will get an error and we definitely don’t like errors.

When we create a flutter app from scratch, we will see some boilerplate code like the one below, in the main.dart file.

Dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      // Application name
      title: 'Flutter Hello World',

      // Application theme data, you can set
      // the colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),

      // A widget which will be started on application startup
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({@required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        // The title text which will
        // be shown on the action bar
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'Hello, World!',
        ),
      ),
    );
  }
}

In the above code instead of returning MyHomePage, we will return an AnimatedSplashScreen which has also required a nextScreen, where we will return our MyHomePage. Like this:

Dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      // Application name
      title: 'GFG tutotial',

      // Application theme data, you can set the
      // colors for the application as
      // you want
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),

      // A widget which will be started on application startup
      home: AnimatedSplashScreen(
        splash: 'images/gfg.png',
        nextScreen: MyHomePage(title: 'GeeksForGeeks'),
        splashTransition: SplashTransition.fadeTransition,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({@required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(

        // The title text which will be shown on the action bar
        title: Text(title),
      ),
      body: Center(
        child: Text(
          'GeeksForGeeks!',
        ),
      ),
    );
  }
}

To use our own image for the splash screen we have to include the images under the assets section in pubspec.yaml file :

Output :