A splash screen is a graphical control element that contains the image, logo, and current version of the software. It is also known as a launch screen, start screen, or boot screen. It’s the app’s first screen, which appears as soon as the app starts to load. It could also be the app’s welcome screen, which provides a basic first impression when a mobile game or programme is launched. The splash screen is simply a display screen that allows people to look at something while the hardware is loading so that software may be presented to them.

A company name and logo, as well as a title, are standard features of a splash screen. The Flutter logo when opening the Flutter application or the Microsoft logo when starting the Microsoft operating system are two common examples of splash screens. In this article, we’ll look at how to make a splash screen in the Flutter application.

Characteristics of a Splash Screen

The splash screen’s essential characteristics are as follows:

• It is mostly used for application branding or identity identification, and it gives consumers a branding impression.
• It can also be used to display a loading progress indication while the hardware is loading in order to show the user software.
• When the splash screen has finished loading, the user is presented with another useful interface, such as a home screen or dashboard, which is then forgotten. We can’t go back to the splash screen when the loading is finished since we can’t press the back button.

Code:

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)  
          )  
      ),  
    );  
  }  
}  

The method initState() is called once in the above code when the stateful widget is placed into the widget tree. The super.initState() function was called first, followed by the Timer function. The timer function has two arguments, the first of which is the period and the second of which is the action to be executed. We’ve set a timer for five seconds, and when it’s up, the current screen will be replaced with the app’s main screen, which is HomeScreen ().

Output: