What is a splash screen ?
A splash screen is a screen that briefly opens whenever you open an application. A splash screen is also called the launch screen and appears as soon as you click on the app icon to launch it. It appears for very few seconds and then disappears and application home screen is launched.

How to create a splash screen in Flutter ?
By using Timer() function we will create a splash screen in Flutter. After creating a Flutter application we will have a main.dart file, where we add the following code:

import 'package:flutter/material.dart';
import 'package:my_flutter_app/splash_screen.dart';


void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const SplashScreen(),
    );
  }
}

We will create a stateful widget named SplashScreen. The splash screen can just have a simple logo or the name of the app.

First, we create a file named homepage. Then we add code for the second screen. After our widget for the second screen is ready, we just need to write code to connect it.

We will add the timer, which specifies how long the screen is displayed whenever it is launched. We add the timer in initState().
This is the code to add a splash screen:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my_flutter_app/home_page.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

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

    Timer(Duration(seconds: 3), () {
      Navigator.pushReplacement(
          context, MaterialPageRoute(builder: (context) => (HomePage())));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.orange,
        body: Center(
            child: Container(
          child: Text(
            'This is the Splash Screen',
            style: TextStyle(
                fontFamily: AutofillHints.name,
                fontSize: 60,
                fontWeight: FontWeight.w800),
          ),
        )));
  }
}

The below code is added to the homepage, which contains the screen displayed after the splash screen.

class HomePage extends StatelessWidget {
  @override
  widget build ( BuildContext context ) {
    return Scaffold(
      appBar: AppBar(title:Text("This is the home screen")),
      body: Text("Home page", textScaleFactor: 2,)
    );
   }
  }