Flutter Splash Screen Tutorial: A Step-by-Step Guide

What is a Splash Screen?

A splash screen is the first screen a user sees when they open an application. It typically displays the app’s logo or branding while the application is loading its initial resources, data, or performing background tasks. A well-designed splash screen can enhance user experience by providing visual feedback during loading times and reinforcing brand identity.

Why Use a Splash Screen in Flutter?

In Flutter, splash screens serve several crucial purposes:

• Branding: Reinforce your app’s identity with a consistent visual.
• User Experience: Prevent users from seeing a blank or abruptly changing screen during initialization.
• Loading Indicator: Provide a visual cue that the app is busy loading necessary components.

Implementing a Splash Screen in Flutter (Step-by-Step)

Flutter offers flexible ways to implement splash screens. We’ll cover a common approach using the AnimatedSplashScreen package, which simplifies the process and allows for animations.

Step 1: Add the Dependency

First, add the animated_splash_screen package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  animated_splash_screen: ^1.2.0 # Use the latest version

After adding the dependency, run flutter pub get in your terminal to fetch the package.

Step 2: Create Your Splash Screen Widget

You can create a dedicated widget for your splash screen. This widget will display your logo and any desired animations. For this example, we’ll create a simple one.

import 'package:flutter/material.dart';

class CustomSplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/images/logo.png', height: 200), // Replace with your logo path
            SizedBox(height: 20),
            CircularProgressIndicator(color: Colors.white),
            SizedBox(height: 10),
            Text('Loading...', style: TextStyle(color: Colors.white, fontSize: 18)),
          ],
        ),
      ),
    );
  }
}

Make sure you have an assets/images/logo.png file in your project directory and declare it in your pubspec.yaml:

flutter:
  uses-material-design: true
  assets:
    - assets/images/logo.png

Step 3: Integrate with AnimatedSplashScreen

Now, modify your main.dart file to use the AnimatedSplashScreen widget. This widget will handle the transition from the splash screen to your main app screen.

import 'package:flutter/material.dart';
import 'package:animated_splash_screen/animated_splash_screen.dart';
import 'custom_splash_screen.dart'; // Import your custom splash screen widget
import 'home_screen.dart'; // Your main app screen

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Splash Demo',
      home: AnimatedSplashScreen.withDefaults(
        // Optional: duration of the splash screen
        duration: 3000, 
        // Optional: background color of the splash screen
        backgroundColor: Colors.blue.shade900,
        // The image to display on the splash screen
        // You can use Image.asset, Image.network, or any Widget
        image: Image.asset('assets/images/logo.png'),
        // Optional: animation for the splash screen
        animationEffect: 'fade in', // e.g., 'fade in', 'scale', 'rotate'
        // The next screen to navigate to after the splash screen
        nextScreen: const HomeScreen(),
        splashTransition: SplashTransition.fadeTransition,
        // Optional: splash icon size
        splashIconSize: 200,
        // Optional: disable back button
        disableNavigation: true,
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

// Dummy HomeScreen for demonstration
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: const Center(child: Text('Welcome to the App!')),
    );
  }
}

Customizing the Splash Screen

The AnimatedSplashScreen package offers extensive customization options:

splashTransition: Select the type of transition between the splash screen and the next screen.

splashIconSize: Adjust the size of the displayed icon or image.

Platform-Specific Splash Screens (Native)

For a more native feel, especially on Android and iOS, you might want to configure platform-specific splash screens. This is handled differently for each platform:

Android

You can define a splash screen in your android/app/src/main/res/drawable/launch_background.xml file. This XML file allows you to specify a drawable resource (like an image or color) that will be shown while the app is launching.

iOS

On iOS, splash screens are typically managed through Launch Screen Storyboards. You can find and edit these in Xcode by navigating to ios/Runner.xcworkspace > Runner > LaunchScreen.storyboard.

While the animated_splash_screen package provides a great in-app splash experience, consider these native splash screens for the initial loading phase before your Flutter app fully renders.

Conclusion

Implementing a splash screen in Flutter is straightforward, especially with packages like animated_splash_screen. It’s a vital component for enhancing your app’s initial presentation, branding, and user experience. By following these steps, you can create a polished and professional-looking splash screen for your Flutter application.