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

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.

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.

🔥 Read with Full Features on Our Website

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
Google Advertisement

Explain every line of code in simple words

📦 Step 1: Create a New Flutter Project

First, open your terminal or command prompt and run:

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

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

Google Advertisement

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

Google Advertisement

Simple home screen with text.
This is where the app continues after the splash screen.

🎯 Final Output

When you run the app:

A blue splash screen shows the title “My Cool App” for 3 seconds.
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.