How to Create Splash Screen in Flutter Application

A splash screen is an initial screen that will get displayed proper when the user launches the app, earlier than the main page loads. It may also be the app’s welcome screen that gives a simple initial experience when a mobile game or program is launching. The splash screen is only a display screen that permits users to look something while the {hardware} is loading to current software program to the user.

The common elements of a splash screen contain a company name and brand logo or a title. In this tutorial, we’re going to see how a splash screen is created in Flutter application.

Here we are going to clarify the methods to add a splash screen in our Flutter application.

Create Splash Screen in Flutter

We will implement the Timer() function to create a splash screen in our app.

First, create a new project within the IDE you are utilizing. Open the project, navigate to the lib folder, and replace the under code with the main.dart file

import 'dart:async';  
import 'package:flutter/material.dart';  
  
void main() { runApp(MyApp());}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
      debugShowCheckedModeBanner: false,  
    );  
  }  
}  
  
class MyHomePage extends StatefulWidget {  
  @override  
  SplashScreenState createState() => SplashScreenState();  
}  
class SplashScreenState extends State<MyHomePage> {  
  @override  
  void initState() {  
    super.initState();  
    Timer(Duration(seconds: 5),  
            ()=>Navigator.pushReplacement(context,  
            MaterialPageRoute(builder:  
                (context) => HomeScreen()  
            )  
         )  
    );  
  }  
  @override  
  Widget build(BuildContext context) {  
    return Container(  
        color: Colors.yellow,  
        child:FlutterLogo(size:MediaQuery.of(context).size.height)  
    );  
  }  
}  
class HomeScreen extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(title:Text("Splash Screen Example")),  
      body: Center(  
          child:Text("Welcome to Home Page",  
              style: TextStyle( color: Colors.black, fontSize: 30)  
          )  
      ),  
    );  
  }  
}