animate_do
An animation package inspired in Animate.css, built using only Flutter animations, no extra packages.
Getting Started
This package is simple to use. Every single animation contains default values that look beautiful, but you can change properties to accomplish your needs.
Properties in almost every animated widget:
Property | Type | Description |
---|---|---|
key | Key | (optional) Widget key |
child | Widget | Child Widget to animate |
duration | Duration | Animation duration |
delay | Duration | Delay before the animation |
from | double | Initial or final destination, if you want a slide or fade more striking |
animate | boolean | Change this property from false to true to starts the animation (useful if you use setState, Bloc, Provider, Redux or any other state management system) |
infinite | boolean | Attention seekers can be run infinitely with this property |
spins | double | The number of spins that you want (some animations have this, ex: Spin, Roulette, PerfectSpin ) |
manualTrigger | boolean | if you’re going to trigger the animation manually (required the controller property) |
controller | Function | Function that exposes the controller (for more control of the animation |
Available Animations
FadeIn Animations
- FadeIn
- FadeInDown
- FadeInDownBig
- FadeInUp
- FadeInUpBig
- FadeInLeft
- FadeInLeftBig
- FadeInRight
- FadeInRightBig
FadeOut Animations
- FadeOut
- FadeOutDown
- FadeOutDownBig
- FadeOutUp
- FadeOutUpBig
- FadeOutLeft
- FadeOutLeftBig
- FadeOutRight
- FadeOutRightBig
BounceIn Animations
- BounceInDown
- BounceInUp
- BounceInLeft
- BounceInRight
ElasticIn Animations
- ElasticIn
- ElasticInDown
- ElasticInUp
- ElasticInLeft
- ElasticInRight
SlideIns Animations
- SlideInDown
- SlideInUp
- SlideInLeft
- SlideInRight
FlipIn Animations
- FlipInX
- FlipInY
Zooms
- ZoomIn
- ZoomOut
SpecialIn Animations
- JelloIn
Attention Seeker
All of the following animations could be infinite with a property called infinite
(type Bool)
- Bounce
- Flash
- Pulse
- Swing
- Spin
- SpinPerfect
- Dance
- Roulette
Example
home: Scaffold(
body: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FadeInLeft(child: Square() ),
FadeInUp(child: Square() ),
FadeInDown(child: Square() ),
FadeInRight(child: Square() ),
],
),
),
),
Note: Square, is just a Square blue container
class Square extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.blueAccent,
),
);
}
}
Manual Trigger
Since version 1.2.0
, there is a way to get the AnimationController easily, so you can restart it, change the duration, do the animation again.
Example
class FadeOutDownBig extends StatelessWidget/StatefulWidget {
AnimationController animateController;
...
...
...
child: FadeInUp(
// (optional) if true, will not fire the animation on load
manualTrigger: true,
//(optional, but mandatory if you use manualTrigger:true) This callback exposes the AnimationController used for the selected animation. Then you can call animationController.forward() to trigger the animation wherever you like manually.
controller: ( controller ) => animateController = controller,
child: YourWidget(),
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.
Download animate_do package source code on GitHub
https://github.com/Klerith/animate_do_package
Check out implementation details of animate_do on PUB
https://pub.dev/packages/animate_do
Provides the list of the opensource Flutter apps collection with GitHub repository.