How to create splash screen using flutter

Creating a Splash Screen in Flutter is quite simple — you can do it in two main ways:

1. Native splash screen (recommended way) using the flutter_native_splash package.
2. Custom Flutter widget splash screen (if you want animations or branding effects).

Let’s go through both step by step 👇

🥇 Method 1: Using flutter_native_splash (Recommended)

This method shows a native splash screen before your Flutter app fully loads.

Step 1: Add dependency

In your pubspec.yaml:

dev_dependencies:
  flutter_native_splash: ^2.3.2

Then run:

flutter pub get

Step 2: Configure splash screen

Add this section in your pubspec.yaml (usually at the bottom):

flutter_native_splash:
  color: "#ffffff"       # Background color
  image: assets/logo.png # Your logo
  android: true
  ios: true
  web: true

✅ Make sure you have the image in the path assets/logo.png, and that your assets are declared:

flutter:
  assets:
    - assets/logo.png

Step 3: Generate splash screen

Run the command:

flutter pub run flutter_native_splash:create

This will automatically create native splash screens for Android, iOS, and web.

Step 4: (Optional) Remove splash after delay

To show your splash for a few seconds before navigating:

Create a file splash_screen.dart:

import 'dart:async';
import 'package:flutter/material.dart';
import 'home_screen.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(const Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (_) => const HomeScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Image(
          image: AssetImage('assets/logo.png'),
          width: 150,
        ),
      ),
    );
  }
}

Then set it as your start screen in main.dart:

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: SplashScreen(),
      debugShowCheckedModeBanner: false,
    );
  }
}

🥈 Method 2: Flutter-only Custom Splash Screen (Animated)

If you want animations (like fade-in, logo movement, etc.), use Flutter directly:

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

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

  @override
  State<AnimatedSplashScreen> createState() => _AnimatedSplashScreenState();
}

class _AnimatedSplashScreenState extends State<AnimatedSplashScreen>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 2));
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
    _controller.forward();

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

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: FadeTransition(
          opacity: _animation,
          child: Image.asset('assets/logo.png', width: 150),
        ),
      ),
    );
  }
}

✅ Summary