Flutter - Application branding and loading splash screen.

If you have worked on mobile application development. You definitely know about splash screen. The splash screen is normally used to show the user some progress before the app loads completely. Some people use the splash screen just to showcase their app/company logo for a couple of seconds.

Before start it, you should read Flutter - Introduction, and setup.

I assuming, you have basic knowledge of Flutter and Dart and you have IntelliJ IDE or Android Studio, Android SDK and Xcode configured.

In this tutorial, we are going to learn how to implement a splash screen with Flutter. Let's start it.

1. Create a new Flutter project and open main.dart file from lib package. You can rename it as i did (splash.dart)here.

2. Create assets folder on project root and add an image that will be displayed on the splash screen.

3. Open pubspec.ymal file and declare image path here.

4. As we know, in Flutter everything is a widget. So, we going to create the SplashScreen widget that extends StatefulWidget. Stateful widget is useful when the part of the user interface you are describing can change dynamically.

splash.dart

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

here, our motive is move to another screen after some time. To achieve it Flutter has given us Route and Navigator classes for managing multiple screens navigation.

Route: A Route is an abstraction for a “screen” or “page” of an app.
Navigator: Navigator is a widget that manages routes. It can push and pop routes to help a user move from screen to screen.

Mobile apps typically display full-screen elements called “screens” or “pages”. In Flutter, these elements are called routes and they’re managed by a Navigator widget. The navigator manages a stack of Route objects and provides methods for managing the stack, like Navigator.push and Navigator.pop.


5. Let's define the route of the splash screen. I have used a tag and another widget (LandingScreen) where we will navigate after some time.

splash.dart

void main() =>   runApp(new MaterialApp
  home: new SplashScreen(),
  routes: <String, WidgetBuilder>{
    '/LandingScreen': (BuildContext context) => new LandingScreen()
  },
));

6. After that, create SplashScreen State. This class extends to SplashScreen class. Where the current configuration of a [State] is hosted.

splash.dart

class _SplashScreenState extends State<SplashScreen> {
  
    return null
}

7. Create startTimer() with async and give some time, like i have given 5 sec.

splash.dart

startTime() async {
    var _duration = new Duration(seconds: 5);
    return new Timer(_duration, navigationPage);
}

8. Create navigationPage callback method that is declared above.

splash.dart

void navigationPage() {
  Navigator.of(context).pushReplacementNamed('/HomeScreen');
}

9. Update initState() method and call startTime() method.

splash.dart

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

initState(): The framework will call this method exactly once for each [State] object it creates. If you override this, make sure your method starts with a call to super.initState().

10. At the end, create the user interface of a splash screen. As you can see,  i have added an image in the center of the widget with its path.

splash.dart

  @override
  Widget build(BuildContext context) {
     return new Scaffold(
       body: new Center(
         child: new Image.asset('assets/images/flutter.png'),
       ),
    );
  }

Now,  before running this project, verify all classes and resources.

1. Resource:- assets>image>flutter.png.
2. Dart files:- splash and landing screen.

3. Declare the image path in pubspec.yaml file.

4. Final splash.dart file.

splash.dart

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:flutter_splash/landingscreen.dart';
void main() =>   runApp(new MaterialApp(


  home: new SplashScreen(),
  routes: <String, WidgetBuilder>{
    '/LandingScreen': (BuildContext context) => new LandingScreen()
  },
));
class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => new _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
  startTime() async {
    var _duration = new Duration(seconds: 5);
    return new Timer(_duration, navigationPage);
  }
  void navigationPage() {
    Navigator.of(context).pushReplacementNamed('/LandingScreen');
  }
  @override
  void initState() {
    super.initState();
    startTime();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Image.asset('assets/images/flutter.png'),
      ),
    );
  }
}

5. Another widget (landingscreen.dart), where the app will navigate.

landingscreen.dart

import 'package:flutter/material.dart';
class LandingScreen extends StatefulWidget {
  @override
  LandingScreenState createState() => new LandingScreenState();
}
class LandingScreenState extends State<LandingScreen> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('HomeScreen'),
      ),
      body: new Center(
        child: new Text('Welcome to Home.!'),
      ),
    );
  }
}

Now, run it and you will see action after 5 sec.

I hope it will work, but if still, you have any doubt or not work. Please feel free to clarify that in the comment section below. Your comments and suggestions are welcome.