FLUTTER ECOSYSTEM

ToyZ-95/another_flutter_splash_screen

एक फ्लटर पैकेज जो आपके सुंदर फ्लटर प्रोजेक्ट्स के लिए डायनामिक स्प्लैश स्क्रीन बनाने में सहायता करता है। साथ ही डायनामिक अगला स्क्रीन भी समर्थित है।

एक और Flutter स्प्लैश स्क्रीन प्रोजेक्ट कवर
Stars
21
Forks
3
अंतिम पुश (UTC)
25 जून 2024
प्रोजेक्ट स्थिति
सक्रिय
Asad GitHub avatar
GITHUB User

Asad ↗

HorizontalVadodara, Gujarat, India
भाषाएँDartC++CMakeHTMLCSwiftKotlinObjective-C

तकनीकी विषय

इस रिपॉज़िटरी के पैकेज

उपयोग की गई निर्भरताएँ

निर्भरता सूची 3 आइटम
  • flutter{"sdk":"flutter"}
  • flutter_testडेवलपमेंट{"sdk":"flutter"}
  • flutter_lintsडेवलपमेंट^2.0.0

मूल README

यह अंग्रेज़ी मूल स्नैपशॉट है। नवीनतम सामग्री GitHub पर देखें।

README खोलें / बंद करें

pub package

:star: Splash screens made simple :star:


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.

https://github.com/ToyZ-95/another_flutter_splash_screen/raw/main/example/assets/gif_demo.gif
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.

https://github.com/ToyZ-95/another_flutter_splash_screen/raw/main/example/assets/opacity_demo.gif
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.

https://github.com/ToyZ-95/another_flutter_splash_screen/raw/main/example/assets/scale_demo.gif
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
https://github.com/ToyZ-95/another_flutter_splash_screen/raw/main/example/assets/immersive_demo_1.gif
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.

https://github.com/ToyZ-95/another_flutter_splash_screen/raw/main/example/assets/lottie_demo.gif
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.