⭐ Splash screens made simple ⭐

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,
          nextScreen: const MyHomePage(),
          duration: const Duration(milliseconds: 3515),
          onInit: () async {
            debugPrint("onInit");
          },
          onEnd: () async {
            debugPrint("onEnd 1");
          },
        );

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"),
          nextScreen: 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"),
          nextScreen: const MyHomePage(),
        );

Dynamic routing

• Following is the example of Navigate using different mechanisms

FlutterSplashScreen.gif(
     ...
     // go_router example
     asyncNavigationCallback: () async {
       var response = await userRepository.getUserData();
      if(response.status == 200 && response.data.isAuthenticated){
       GoRouter.of(context).goNamed("home");     
      }
      else{
          // GoRouter.of(context).goNamed("/");
      }
     },
                  OR
     // Named routing example
     asyncNavigationCallback: () async {
       await Future.delayed(const Duration(seconds: 3));
       if (context.mounted) {
         Navigator.pushReplacementNamed(context, "home");
       }
     },
    ...
   );

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,
          nextScreen: const MyHomePage(),
          duration: const Duration(milliseconds: 3515),
        );

A splash screen using lottie animation.

FlutterSplashScreen(
          useImmersiveMode: true,
          duration: const Duration(milliseconds: 2000),
          nextScreen: 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),
          nextScreen: 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.