How to create a splash screen in Flutter ?

Actually, it is so basically when we understand the logic. Let’s build with together!

Firstly, you need install all Flutter requirements. Look at deeply learn that how to learn install your development area from flutter.dev. My OS is Mac OS and I use VS Code for development. Install all necessary packages and extensions for Flutter at VS Code.

After the installation, let’s create a new project with Flutter. Open the terminal which folder we want to use inside it. Then in terminal run that command for a new project with Flutter.

  • flutter create my_splash_screen_app

Now, we have a basically flutter project. I want to change some dependencies into the folder. Into the lib folder, I create in order of,

  • config -> for settings and routing the app screens
  • models -> for all models
  • screens -> for all screens
  • services -> for all local or api services
  • themes -> for all themes settings or images etc.

Into the main.dart file, I need some changes for more clean code review. Then I clear all state widgets until the first method void main(). I change the name of App. It’s name is MySplashApp now.

import 'package:flutter/material.dart';
import 'config/routing/app_routing.dart';

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

Now, we need a navigator for routing the application screens. Then, into the config folder, I create another folder which name is routing and inside of this folder I create a dart file which name is app_routing.dart. We need this dart file for routing the application screens. Then, I write MySplashApp class into the app_routing.dart file. After finishing app_routing implementing, We add this file path into the main.dart file. Let’s check out the app_routing.dart file at below.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_splash/screens/main_screen.dart';
import 'package:flutter_splash/screens/splash_screen.dart';

class MySplashApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Splash Sample',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primaryColor: Colors.red,
        fontFamily: 'Poppins'
      ),
      home: SplashScreen(),
      routes: {
        '/splash': (context) => SplashScreen(),
        '/main': (context) => MainScreen()
      },
    );
  }
}

Now, we implement our routing logic and we need our application screens implementation. I create 2 new dart file into the screens folder which names are splash_screen and main_screen. The logic is splash screen open firstly after 2 seconds it’s directly to the main screen.

In splash_screen.dart file, I create a StatefulWidget and it’s state structure. When the state initializes goMainScreen() method runs.

import 'dart:async';
import 'package:flutter/material.dart';
import 'main_screen.dart';

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    goMainScreen();
  }

  // 5 seconds later -> onDoneControl
  Future<Timer> goMainScreen() async {
    return new Timer(Duration(seconds: 2), onDoneControl);
  }

  // route to MainScreen
  onDoneControl() async {
    Navigator.of(context)
        .pushReplacement(MaterialPageRoute(builder: (context) => MainScreen()));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image(image: AssetImage('assets/flutterlogo.png'),),
              Text("Splash Screen",
                  style: new TextStyle(fontFamily: "Poppins", fontSize: 16)),
            ],
          ),
        ],
      )),
    );
  }
}

After 2 seconds, the app routes the main_screen.dart file. In the main_screen.dart file, it has a text and a button for backing to splash_screen.dart file. The main_screen.dart file codes are below.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_splash/screens/splash_screen.dart';

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Welcome to Main Screen !",
                    style: new TextStyle(fontFamily: "Poppins", fontSize: 16)),
                RaisedButton(
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => SplashScreen()));
                  },
                  color: Colors.orangeAccent,
                  textColor: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(5))),
                  child: Text(
                    "Back to Splash Screen",
                    style: new TextStyle(fontFamily: "Poppins", fontSize: 16),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Now, we implement all necessary units for running. There are 2 ways for testing on emulator device. One of them, in VS Code, debug mode with F5. Another way with a command on terminal,

  • flutter run

If we run the application with flutter run, we need to press ‘r’ on terminal for seeing the changes on app when we develop something.

splash_screen.dart
main_screen.dart

For sample code on github : isoguzay

Thanks for reading this article ! Happy coding days..