Create Splash Screen in Flutter

As all of us know Splash Screen is how much important for app to show or recognition of brand to user.

Splash screen in first screen when user start or load the app show some animation to user and fetch some information from server for perform specific operation on next screen.

Like in this screen I created splash screen with flutter icon with give delay 2 second after that open next screen.

So don’t waste time to theory part, Start code for splash screen.

I am not going to give create project steps i think this is all knows, i am going to start direct coding part.

I created Splash screen dart file separate call this file to main.dart file.

In main.dart file I am calling SplashScreen() in home tag at line number 14.

For splash screen i created new file splashScreen.dart

First create StatefulWidget for SplashScreen :-

import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

This is base for every class we create for StatefulWidget.

Now going to doing main part in splashScreen.dart file override initState() method.This method call once, when each state of object render. So i am calling _startTimer() method for perform specific operation after some specific time.

@override
void initState() {
  super.initState();
  _startTimer();
}

Future<Timer> _startTimer() async{
  return new Timer(Duration(seconds: 2), _openNextScreen);
}

So as you see my _startTimer() method has Future return type for this we need to give async identifier for Asynchronous programming i.e. It will work asynchronous way like this operation is perform parallel when this operation finish after that do specific operation that we need to do. In this method i am using Timer with 2 second time period and second part is my function i am calling, after 2 seconds call _openNextScreen() method i declare below:-

void _openNextScreen() {
  Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => FirstScreen()));
}

In this method I am going to open next screen after splash screen for that Flutter provide Navigator Widget for navigate from one screen to another screen. We are using of static method for passing context after that i am calling pushReplacement() method for replace current dart screen i.e. SplashScreen to NewScreen that i am going to call in this method using MaterialPageRoute replace with new screen. When user trying to go back it is not showing to splashScreen. If you are using push() method on that time splash screen is in stack in this case splash screen is showing to user on back press of device. But when you are using pushReplacement() this time it replace your screen with previous stack, on that time it will not show splash screen when user click back press from stack. Replace my FirstScreen() class name with your next screen class name for open that file.

Create body part here for splash screen

Container _bodyView() {
  return new Container(
    color: Colors.white,
    child: new Center(
      child: Image.asset("assets/images/ic_launcher.png"),
    ),
  );
}

In this method i am using Image Widget to show flutter image in center using Center Widget. And i am getting image from my asset folder, but we need to describe in pubsec.yaml we are using image from assets folder.

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg
  assets:
    - assets/images/

Call this method in override build() method of _SplashScreen class.

@override
Widget build(BuildContext context) {
  // TODO: implement build
  return _MySplashScreenWidget();
}

Widget _MySplashScreenWidget() {
  return new Scaffold(
    body: _bodyView(),
  );
}

In above _MySplashScreenWidget() for remove i am not call appBar Widget in Scaffold widget. So this will not show app bar in splash screen.

Full code for splashScreen.dart file is below:-

I hope this will helpful for create own custom SplashScreen in flutter.

Thanks for reading this article. Please give me suggestions also.