another_flutter_splash_screen 1.2.1 another_flutter_splash_screen: ^1.2.1 copied to clipboard
A flutter package that provides easy way to implement splash screen in your app. Also provides curated demos in the repo.
⭐ 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.