How to make Splash Screen in Flutter 2024 | Adding a splash screen to your Flutter Android app

In the dynamic world of mobile app development, creating an engaging user experience is paramount. One way to make a lasting first impression is by incorporating a visually appealing splash screen. Flutter, Google’s UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase, offers a straightforward method to implement splash screens. In this article, we’ll guide you through the process of creating a splash screen in Flutter, keeping up with the latest practices in 2024.

1. Main.dart

import 'package:firebase_con/splash_screen.dart';
import 'package:flutter/material.dart';

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

class Myapp extends StatefulWidget {
  const Myapp({super.key});

  @override
  State<Myapp> createState() => _MyappState();
}

class _MyappState extends State<Myapp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

1. SplashScreen.dart

// ignore_for_file: prefer_const_constructors

import 'dart:async';

import 'package:firebase_con/home.dart';
import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
      Duration(seconds: 3),
      () => Navigator.pushReplacement(
          context,
          MaterialPageRoute(
            builder: (context) => HomeScreen(),
          )),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(
          'Welcome in App',
          style: TextStyle(
            fontSize: 25,
            color: Colors.deepPurple,
          ),
        ),
      ),
    );
  }
}

1. Home.dart

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: Center(
        child: Text(
          'Home Page',
          style: TextStyle(
            fontSize: 30,
            color: Colors.deepOrange,
          ),
        ),
      ),
    );
  }
}