How to Make Custom Splash Screen with Duration of Display in Flutter

The splash screen is the best way to introduce your app to the users. You can add a custom splash screen to your flutter app with duration to display. In this example, we are going to show you the easiest way to create your own splash screen without depending on any packages.

assets/images/
—– logo.png
lib/
—– main.dart
—– splash_screen.dart
—– home.dart

flutter:
  # Find this line and add the line below
  uses-material-design: true
  #leave this line as it is.
  assets:
    - assets/images/
  #be careful of intent otherwise it will not work.

import 'package:flutter/material.dart';
import 'package:splashscreen/splash_screen.dart';
//importing splash_screen.dart file

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: SplashScreen(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class Home extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _Home();
  }
}

class _Home extends State<Home>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
         appBar: AppBar(
           title:Text("Home Page")
          ),
         body: Container( 
             alignment: Alignment.center,
             height: MediaQuery.of(context).size.height,
             //making container height equal to verticle hight.
             width:MediaQuery.of(context).size.width,
             //making container width equal to verticle width.
             child:Text("Hello World !", style: TextStyle( 
                 fontSize: 30,
             ),)
         ),
    );
  }

}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'home.dart';

class SplashScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _SplashScreen();
  }
}

class _SplashScreen extends State<SplashScreen>{
  int splashtime = 3; 
  // duration of splash screen on second

  @override
  void initState() {
    Future.delayed(Duration(seconds: splashtime), () async {
        Navigator.pushReplacement(context, MaterialPageRoute(
          //pushReplacement = replacing the route so that
          //splash screen won't show on back button press
          //navigation to Home page.
          builder: (context){
              return Home();       
        }));
    }); 

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
      return Scaffold(
          body:Container(
               alignment: Alignment.center,
               child:Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  //vertically align center
                  children:<Widget>[
                    Container(
                      child:SizedBox(
                        height:200,width:200,
                        child:Image.asset("assets/images/logo.png")
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(top:30),
                      //margin top 30
                      child:Text("Smart Chat Bot", style: TextStyle(
                          fontSize: 30,
                      ),),
                    ),
                    Container(
                      margin:EdgeInsets.only(top:15),
                      child:Text("Version: 1.0.0", style:TextStyle(
                         color:Colors.black45,
                         fontSize: 20,
                      )),
                    ),
                  ]
               )
            )  
      );
  }
}