How to Create a Splash Screen in Flutter using Timer and Navigator

By Vandu
May 4, 2025

Follow us on

Learn how to create a simple splash screen in Flutter using Timer and Navigator. This step-by-step tutorial includes complete code and beginner-friendly explanations.

How to Create a Splash Screen in Flutter using Timer and Navigator

Make a Splash Screen using Timer and Navigator in Flutter

A splash screen is the first screen that appears when you open an app. It usually displays the logo or name of the app and gives a smooth transition to the home or main screen. In this tutorial, we will learn how to make a splash screen in Flutter using a Timer and Navigator.

This method is simple, and best of all—it works without any external packages!

🔧 What We’ll Do

  • Create a new Flutter project

  • Make a SplashScreen widget

  • Use Timer to delay the screen

  • Navigate to the HomeScreen after a few seconds using Navigator

  • Explain every line of code in simple words

📦 Step 1: Create a New Flutter Project

First, open your terminal or command prompt and run:

flutter create splash_screen_demo
cd splash_screen_demo

This will create a new Flutter project named splash_screen_demo.

🧱 Step 2: Update main.dart File

Replace the content of your lib/main.dart file with the following code:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen Demo',
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

// Splash Screen Widget
class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();

    // Timer that waits 3 seconds then moves to HomeScreen
    Timer(Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Center(
        child: Text(
          'My Cool App',
          style: TextStyle(
            fontSize: 30,
            fontWeight: FontWeight.bold,
            color: Colors.white,
          ),
        ),
      ),
    );
  }
}

// Home Screen Widget
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text(
          'Welcome to the App!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

🧠 Step-by-Step Explanation

🟢 main() Function

void main() {
  runApp(MyApp());
}

This is the entry point of the app. It launches the MyApp widget.

🟩 MyApp Widget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Screen Demo',
      debugShowCheckedModeBanner: false,
      home: SplashScreen(),
    );
  }
}

  • MaterialApp sets up the app.

  • home: SplashScreen() means the first screen shown will be the Splash Screen.

🟨 SplashScreen Widget

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}
 

  • We use a StatefulWidget because we want to do something after a delay (navigation).

  • The State class _SplashScreenState handles the timer logic.

🕒 Using Timer in initState()

@override
void initState() {
  super.initState();

  Timer(Duration(seconds: 3), () {
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => HomeScreen()),
    );
  });
}

  • This runs when the splash screen loads.

  • Timer(Duration(seconds: 3), ...) sets a delay of 3 seconds.

  • Navigator.pushReplacement() navigates to HomeScreen and removes the splash screen from the stack.

🎨 Splash Screen UI

Scaffold(
  backgroundColor: Colors.blueAccent,
  body: Center(
    child: Text(
      'My Cool App',
      style: TextStyle(
        fontSize: 30,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      ),
    ),
  ),
);

  • A blue screen with centered white text.

  • You can add a logo here if you want (e.g., using Image.asset()).

🏠 HomeScreen Widget

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text(
          'Welcome to the App!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

  • Simple home screen with text.

  • This is where the app continues after the splash screen.

🎯 Final Output

When you run the app:

  1. A blue splash screen shows the title “My Cool App” for 3 seconds.

  2. Then it automatically goes to the home screen with “Welcome to the App!”

📝 Tips

  • You can change the timer duration to any number of seconds.

  • Add images or animations to your splash screen for a better experience.

  • For production apps, consider using the flutter_native_splash package for native launch screen configuration.

✅ Conclusion

That’s it! You’ve learned how to create a simple and clean splash screen in Flutter using Timer and Navigator. This method is perfect for small to medium apps and helps create a smooth user experience.

TOPICS MENTIONED IN THIS ARTICLE

Flutter splash screen
Flutter timer
Flutter navigator
splash screen tutorial
how to create splash screen in flutter
Subscribe to our Newsletter!

Thank you for visiting! Enjoy exploring our diverse collection of blogs, crafted with passion and insight to inspire and inform. Happy reading!

© 2025 Pay18News. All rights reserved.
Developed by Keynate