animate_do 2.1.0 icon indicating copy to clipboard operation
animate_do: ^2.1.0 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 #

Null-Safety checked! #

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: #

keyKey(optional) Widget key
childWidgetChild Widget to animate
durationDurationAnimation duration
delayDurationDelay before the animation
fromdoubleInitial or final destination, if you want a slide or fade more striking
animatebooleanChange this property from false to true to starts the animation (useful if you use setState, Bloc, Provider, Redux or any other state management system)
infinitebooleanAttention seekers can be run infinitely with this property
spinsdoubleThe number of spins that you want (some animations have this, ex: Spin, Roulette, PerfectSpin )
manualTriggerbooleanif you're going to trigger the animation manually (required the controller property)
controllerFunctionFunction 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 {

  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blueAccent,

Animate_do demo animation

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.


  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.

pub points


verified publisher

Beautiful animations inspired on Animate.css, every animation is a widget that contains default but customizable values that look attractive.

Repository (GitHub)


API reference


Icon for licenses.MIT (LICENSE)




Packages that depend on animate_do