How to Create Simple Splash Screen in Flutter

Last updated Nov 02, 2021


A splash screen is a screen that appears when you open an app on your mobile device. Sometimes it’s referred to as a launch screen or startup screen and shows up when your app is loading after you’ve just opened it. When the loading is finished, you’ll be taken to a more functional screen where you can complete actions.           

So, In this tutorial, we will see how you can create a Simple Splash Screen in Flutter.

Let's Start

Step 1: Create a new Flutter Application.

Step 2: Remove Default MyHomePage and create a new file as splashscreen.dart and add a Stateful Widget as SplashScreen Once, you are done add this SplashScreen to the home of your MaterialApp.

for example: 

void main() {

  runApp(MaterialApp(

    home: Splashscreen(),

  ));

}

Now this will be our Splash Screen so, create a new Screen as HomeScreen which will be the main screen in our app.

Step 3: Now we can add our Logo or Text to the splash screen and initialize a Timer in the initState and use Navigator.push to go to our HomeScreen for example: 

 void initState() {

    // TODO: implement initState

    super.initState();

    Timer(

        Duration(seconds: 4),

        () => Navigator.push(

            context, MaterialPageRoute(builder: (context) => HomeScreen())));

  }

you can control the duration of your SplashScreen inside Timer Duration. Once the given duration finishes we will get navigated to our HomeScreen.

 

Complete example code to Create Splash Screen in Flutter

import 'package:flutter/material.dart';

import 'homescreen.dart';

import 'dart:async';

 

void main() {

  runApp(MaterialApp(

    home: Splashscreen(),

  ));

}

 

class Splashscreen extends StatefulWidget {

  @override

  _SplashscreenState createState() => _SplashscreenState();

}

 

class _SplashscreenState extends State {

  @override

  void initState() {

    // TODO: implement initState

    super.initState();

    Timer(

        const Duration(seconds: 4),

        () => Navigator.pushAndRemoveUntil(

            context,

            MaterialPageRoute(builder: (context) => const HomeScreen()),

            (route) => false));

  }

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: Colors.black,

      body: Column(

        mainAxisAlignment: MainAxisAlignment.center,

        children: [

          SizedBox(

            height: MediaQuery.of(context).size.height / 2.4,

            width: MediaQuery.of(context).size.width / 1.5,

            child: Image.asset(

              'assets/splashscreen.png',

              fit: BoxFit.contain,

            ),

          ),

          const Center(

            child: Text(

              'SplashScreen',

              style: TextStyle(fontSize: 40, color: Colors.white),

            ),

          ),

        ],

      ),

    );

  }

}

 

output: 

 

Video Tutorial

 

Conclusion: In this way, we have learned have to create a simple splash screen in Flutter.

 

 

 

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

31 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions