:star: Splash screens made simple :star:

Supports deciding next screen dynamically. Example here

Supports Immersive Mode (Hide Status Bar in Splash Screen). Example here

Getting started

Add another_flutter_splash_screen to your pubspec.yaml file and start implementing splash screen easily.

Installation

Just add another_flutter_splash_screen as a dependency in your pubspec.yaml file.

dependencies:
  another_flutter_splash_screen: <Latest Version>

Usage

 import 'package:another_flutter_splash_screen/another_flutter_splash_screen.dart';

A splash screen with a gif splash.

FlutterSplashScreen.gif(
          gifPath: 'assets/example.gif',
          gifWidth: 269,
          gifHeight: 474,
          defaultNextScreen: const MyHomePage(),
          duration: const Duration(milliseconds: 3515),
          onInit: () async {
            debugPrint("onInit 1");
            await Future.delayed(const Duration(milliseconds: 2000));
            debugPrint("onInit 2");
          },
          onEnd: () async {
            debugPrint("onEnd 1");
            debugPrint("onEnd 2");
          },
        );

A splash screen with fade in splash.

FlutterSplashScreen.fadeIn(
          backgroundColor: Colors.white,
          onInit: () {
            debugPrint("On Init");
          },
          onEnd: () {
            debugPrint("On End");
          },
          childWidget: SizedBox(
            height: 200,
            width: 200,
            child: Image.asset("assets/dart_bird.png"),
          ),
          onAnimationEnd: () => debugPrint("On Fade In End"),
          defaultNextScreen: const MyHomePage(),
        );

A splash screen with scale splash.

FlutterSplashScreen.scale(
          gradient: const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              Colors.lightBlue,
              Colors.blue,
            ],
          ),
          childWidget: SizedBox(
            height: 50,
            child: Image.asset("assets/twitter_logo_white.png"),
          ),
          duration: const Duration(milliseconds: 1500),
          animationDuration: const Duration(milliseconds: 1000),
          onAnimationEnd: () => debugPrint("On Scale End"),
          defaultNextScreen: const MyHomePage(),
        );

A splash screen using immersive mode (Hide status bar in splash screen).

Just use "useImmersiveMode : true" to hide status bar in splash screen.

Demo 1

FlutterSplashScreen.gif(
          useImmersiveMode: true,
          gifPath: 'assets/example.gif',
          gifWidth: 269,
          gifHeight: 474,
          defaultNextScreen: const MyHomePage(),
          duration: const Duration(milliseconds: 3515),
        );

Demo 2

FlutterSplashScreen(
          useImmersiveMode: true,
          duration: const Duration(milliseconds: 2000),
          defaultNextScreen: const MyHomePage(),
          backgroundColor: Colors.white,
          splashScreenBody: Center(
            child: Lottie.asset(
              "assets/lottie_loading_2.json",
              repeat: false,
            ),
          ),
        );

A splash screen using background image.

FlutterSplashScreen.fadeIn(
          backgroundImage: Image.asset("assets/splash_bg.png"),
          childWidget: SizedBox(
            height: 100,
            width: 100,
            child: Image.asset("assets/twitter_logo_white.png"),
          ),
          defaultNextScreen: const MyHomePage(),
        );

Demonstration of setNextScreenAsyncCallback to dynamically decide which screen to show after the splash screen.

FlutterSplashScreen(
...
setNextScreenAsyncCallback: () async {
        String? token = await CredentialStore.getBrearerToken();

        if (token != null && token.isNotEmpty) {
          return const Dashboard();
        } else {
          return SSOScreen();
        }
      },
...
);

A splash screen using gradient.

FlutterSplashScreen.fadeIn(
          gradient: const LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [Color(0xffFF6972), Color(0xffFE6770)],
          ),
          childWidget: SizedBox(
            height: 100,
            width: 100,
            child: Image.asset("assets/tiktok.gif"),
          ),
          defaultNextScreen: const MyHomePage(),
        );

A splash screen using lottie animation.

FlutterSplashScreen(
          useImmersiveMode: true,
          duration: const Duration(milliseconds: 2000),
          defaultNextScreen: const MyHomePage(),
          backgroundColor: Colors.white,
          splashScreenBody: Center(
            child: Lottie.asset(
              "assets/lottie_loading_2.json",
              repeat: false,
            ),
          ),
        );

A splash screen with custom splash.

FlutterSplashScreen(
          duration: const Duration(milliseconds: 2000),
          defaultNextScreen: const MyHomePage(),
          backgroundColor: Colors.white,
          splashScreenBody: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const SizedBox(
                  height: 100,
                ),
                const Text(
                  "Custom Splash",
                  style: TextStyle(color: Colors.black, fontSize: 24),
                ),
                const Spacer(),
                SizedBox(
                  width: 200,
                  child: Image.asset('assets/flutter.png'),
                ),
                const Spacer(),
                const Text(
                  "Flutter is Love",
                  style: TextStyle(color: Colors.pink, fontSize: 20),
                ),
                const SizedBox(
                  height: 100,
                ),
              ],
            ),
          ),
        );

Additional information

We will be more than happy for your contributions.
Please contribute to another_flutter_splash_screen this github repo.