Skip to content

A flutter package which facilitates creating a dynamic splash screen for your beautiful flutter projects. Also supports dynamic next screen.

License

Notifications You must be signed in to change notification settings

ToyZ-95/another_flutter_splash_screen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Jun 25, 2024
bba5b5f · Jun 25, 2024

History

58 Commits
Jun 25, 2024
Oct 9, 2023
Dec 8, 2022
Dec 8, 2022
Jun 25, 2024
Oct 3, 2023
Oct 9, 2023
Dec 8, 2022
Jun 25, 2024

Repository files navigation

pub package

⭐ Splash screens made simple ⭐


Supports deciding next screen dynamically. Example here

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


Buy Me A Coffee

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(),
        );

  • 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");
       }
     },
    ...
   );

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.

About

A flutter package which facilitates creating a dynamic splash screen for your beautiful flutter projects. Also supports dynamic next screen.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published