How to Create Flutter Splash Screen

Using this post, You can integrate your splash screen in your flutter application. Splash screen means it appears when application is launching. You can also check out sample at HERE.

You can also called it as “launching screen”. It is introduction of your app. Flutter splash screen generally contains an image, a logo of application and the current version of application. It appears when we open an application on our mobile and tablet devices. It provides a simple introduction of our applications while they are loading.
 
Splash screen is used to allow time for application framework to load and our apps to initialize. It is used to brand app using a screen which users see between the time they open apps and application fully loads. So users do not have to waste their time until application is fully loaded and we can brand our app with logo or info.
 
 

Create Stateful Widget

import ‘package:flutter/material.dart’;

class Splash extends StatefulWidget{
   @override
    State<StatefulWidget> createState() {
        // TODO: implement createState
        return SplashState();
    }

}

class SplashState extends State<Splash>{
   @override
   Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(

        );
    }

}



Initialize Timer

We are using Timer class to counts down from specified duration to zero. Whenever timer reaches to zero, callback function will be called. So we need to initialize timer with specified duration and callback function.
 

 @override
 void initState() {
     // TODO: implement initState
     super.initState();
     startTimer();
 }

startTimer() async{
         Timer(Duration(seconds: 3), nextScreen);
}

void nextScreen(){

}

 
 

Integrate in main.dart file

Material App widget provides home parameter. This parameter is used to display first screen on the launch of flutter application.

 

import ‘package:flutter/material.dart’;
import ‘package:fluttersplashsample/splash.dart’;

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

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
          return MaterialApp(
              home: Splash(),
          );
     }
}



Final splash.dart

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

class Splash extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SplashState();
  }

}

class SplashState extends State<Splash>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(

    );
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    startTimer();
  }

  startTimer() async{
     Timer(Duration(seconds: 3), nextScreen);
  }

   void nextScreen(){

  }

}
 

Leave a Reply