A splash screen is a screen that loads up when you first launch an app otherwise also know has the loading screen. Why is a splash screen needed in an app apart from the fact that it makes an app looks more aesthetic it also makes your app look faster when its been launched.

How to create a splash screen

First of all, create a new file in the lib folder name “splash.dart”, then create a stateful widget in that file. Create an init state in your stateful widget with will contain a function that handles the splash/loading screen logic.

Next, we create an async function that holds a timer in which after the timer it navigates to the next page.

Then you can design your splash screen to your desire in the black scaffold.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:songs_app/pages/home.dart';

class Splash extends StatefulWidget {
  const Splash({Key? key}) : super(key: key);

  @override
  State<Splash> createState() => _SplashState();
}

class _SplashState extends State<Splash> {
  @override
  void initState() {
    super.initState();
    navigatetohome();
  }

  navigatetohome() async {
    await Future.delayed(Duration(milliseconds: 2000), (() {}));
    Navigator.pushReplacement(context, MaterialPageRoute(builder: ((context) {
      return const Home();
    })));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
     // Design your splash screen
    );
  }
}

That is how to simply add a splash screen in your app.