Posted in Flutter

Flutter – Simple and Custom Splash Screen with Duration of Display

Flutter – Simple and Custom Splash Screen with Duration of Display Posted on May 9, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Splash screen is the best way to intro your app with the users. You can add custom splash screen to your flutter app with duration to display.

Output:

Splash Screenhome screen

Download Flutter Project: Simple Splash Screen [376.34 KB]

App Directory:

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

Download the source code of project and try to understand the logic.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *