flutter_animated_splash 0.0.5 flutter_animated_splash: ^0.0.5 copied to clipboard
A package to automates the task of creating an animated splash screen in a flutter to enhance a beauti of app.
Getting started #
A Animated splash screen API for flutter which can programatically hide and show the splash screen with Transitions.
Platform support #
Android | IOS | Windows | Mac | Linux | Chrome OS | Web |
OverView #
Splash screens (also known as launch screens) provide a simple initial experience while your app loads. They set the stage for your application, while allowing time for the app engine to load and your app to initialize.Below guide teaches you how to use splash screens appropriately on Android , IOS , Windows , Mac etc ..
Installation #
1. Depend on it #
Add this to your package's pubspec.yaml file:
dependencies:
flutter_animated_splash: ^0.0.5
2. Install it #
You can install packages from the command line:
with Flutter:
$ flutter pub add flutter_animated_splash
Usage #
Import #
Now in your Dart code, you can use:
import 'package:flutter_animated_splash/flutter_animated_splash.dart';
Include short and useful examples for package users.
Example_1 #
Splash Screen with Text Widget
AnimatedSplash(
type: Transition.fade,
child:Text("Your Splash"),
curve:Curves.fastLinearToSlowEase,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
Example_2 #
Splash Screen with Icon Widget
AnimatedSplash(
type: Transition.size,
child:Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
curve:Curves.fastLinearToSlowEase,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
Example_3 #
Splash Screen with Image Widget
AnimatedSplash(
type: Transition.slide,
child:Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
curve:Curves.fastLinearToSlowEase,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
ScreenShots #
Page Transition #
In general, a transition is nothing but moving an object from one place to another. In flutter, it is also the same but in terms of widgets like container, button, and also pages since everything in flutter is itself a widget.
We will be using a certain transition technique to animate our transition between two pages or widgets.
Page Transition Animation types #
Animated Transitions | Usage |
---|---|
fade | type : Transition.fade |
rightToLeft | type : Transition.rightToLeft |
leftToRight | type : Transition.leftToRight |
topToBottom | type : Transition.topToBottom |
bottomToTop | type : Transition.bottomToTop |
scale | type : Transition.scale |
size | type : Transition.size |
leftToRightWithFade | type : Transition.leftToRightWithFade |
elasticOut | type : Transition.elasticOut |
fastOutSlowIn | type : Transition.fastOutSlowIn |
slide | type: Transition.slide |
Page Curve Animation #
1. bounceIn. #
curve : Curves.bounceIn
AnimatedSplash(
type: Transition.slide,
child:Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
curve:Curves.bounceIn,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
2. decelerate. #
curve : Curves.decelerate
AnimatedSplash(
type: Transition.rotate,
child:Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
curve:Curves.decelerate,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
3. easeOutCirc. #
curve : Curves.easeOutCirc
AnimatedSplash(
type: Transition.size,
child:Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
curve:Curves.easeOutCirc,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
4. slowMiddle. #
curve : Curves.slowMiddle
AnimatedSplash(
type: Transition.rightToLeftWithFade,
child:Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
curve:Curves.slowMiddle,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
4. elasticInOut. #
curve : Curves.elasticInOut
AnimatedSplash(
child:Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
curve:Curves.elasticInOut,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
5. linearToEaseOut. #
curve : Curves.linearToEaseOut
AnimatedSplash(
type: Transition.rightToLeft,
child:Image(
image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
curve:Curves.linearToEaseOut,
background:Colors.white,
navigator:const Home(),
durationInSeconds:3
)
Types of Animated Curves #
Animated Curves | Usage |
---|---|
bounceIn | curve : Curves.bounceIn |
bounceInOut | curve : Curves.bounceInOut |
bounceOut | curve : Curves.bounceOut |
decelerate | curve : Curves.decelerate |
ease | curve : Curves.ease |
easeIn | curve : Curves.easeIn |
easeInBack | curve : Curves.easeInBack |
easeInOutCubicEmphasized | curve : Curves.easeInOutCubicEmphasized |
elasticOut | curve : Curves.elasticOut |
fastOutSlowIn | curve : Curves.fastOutSlowIn |
easeOutBack | curve : Curves.easeOutBack |
easeInOutSine | curve : Curves.easeInOutSine |
easeInQuart | curve : Curves.easeInQuart |
easeInCubic | curve : Curves.easeInCubic |
easeInOutQuad | curve : Curves.easeInOutQuad |