animate_do 1.7.4 animate_do: ^1.7.4 copied to clipboard
Beautiful animations inspired on Animate.css, every animation is a widget that contains default but customizable values that look attractive.
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.