Coders In C

Hey, there welcome back to this new flutter article where I teach step by step Flutter widgets in details and share easy source code. Todays topic is how to make Splash screen in Flutter app which can be used in both Android as well IOS device. This is all for quick intro of this article let’s start coding.

checkout YouTube video for implementation of code i explained here and you can see the running code and output of the Splash screen on Flutter App.

---

Step 1:

First lets create new file for Splash screen. I create new file Named “splash_screen.dart” create StateFull Widget class and Design your Splash screen. In this example purpose I have only design with Text Widget center in the Splash screen. You can design according to your need and App’s theme.

Step 2:

Inside “Main.dart” file change your default app screen to “splash_screen.dart” inside you material app widget.

Step 3:

Not it is time to code the the timer that holds the splash screen for 3 to 5 seconds and then navigate to app’s Home screen.

We are using Timer() function that will start and count the time as passed as duration inside Timer(). Duration parameter again holds duration object. yo can read more about Timer Class of flutter by clicking here

In our case create initSate() and write Timer() with 3 or 5 seconds and when timer completes write navigator to move to home screen inside callback block.

example :

 @override
  void initState() {
    //seconds of wait for splash screen
    Timer(const Duration(seconds: 5), () {
      //after 3 seconds
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) {
        return const HomePage();
      }));
    });
    super.initState();
  }

That is it. You Splash screen is ready to run. You can now run the project and see the output.

here is the complete source code of Splash screen i have created in the YT Video

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter_yoga/pages/home_page.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key? key}) : super(key: key);

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    //seconds of wait for splash screen
    Timer(const Duration(seconds: 5), () {
      //after 3 seconds
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (context) {
        return const HomePage();
      }));
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.blueGrey[300],
        child: const Center(
          child: Text(
            "App Logo",
            style: TextStyle(
              color: Colors.white,
              fontSize: 30,
            ),
          ),
        ),
      ),
    );
  }
}

Subscribe my channel :

Thanks for reading.
Enjoy Coding 🙂