Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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.

File Structure in this Example:

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

pubspec.yaml (Defining our Image asset directory):

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.

main.dart

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

home.dart

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

}

splash_screen.dart

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

Output Screenshot:

Splash Screen on App Startup Auto redirects to Home Page after 3 second

In this way, you can make your own Splash Screen with the Duration of its auto-hide and navigate to the Home page.

No any Comments on this Article


Please Wait...