animate_do #

A Flutter animation package inspired by Animate.css, built with zero external dependencies.

Getting Started #

Every animation widget ships with sensible defaults and is fully customizable. Drop it around any widget and you're done.

Properties #

Available Animations #

Fade In #

Fade Out #

Bounce In #

Elastic In #

Slide In #

Back In / Back Out #

Flip In #

Zoom #

Attention Seekers #

All attention seekers support the infinite property to loop indefinitely.

Custom Animations #

These widgets let you move widgets around the screen and chain them with any other animation.

Two Syntaxes #

Both syntaxes are fully supported. Use whichever feels more natural to you.

Sugar Syntax #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    const Square().fadeInLeft(),
    const Square().fadeInUp(),
    const Square().fadeInDown(),
    const Square().fadeInRight(),
  ],
)

Class Syntax #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    FadeInLeft(child: Square()),
    FadeInUp(child: Square()),
    FadeInDown(child: Square()),
    FadeInRight(child: Square()),
  ],
)

Animation Chaining #

Chain multiple animations sequentially using the sugar syntax:

Square()
  .tada()
  .wobble()
  .fadeIn()

Chaining with custom animations #

const Square()
  .moveTo(top: 30)
  .moveTo(
    left: 30,
    delay: const Duration(seconds: 1),
  )
  .moveToArc(
    bottom: 30,
    right: 30,
    delay: const Duration(seconds: 2),
  )
  .fadeOut(
    delay: const Duration(seconds: 2),
  )

Triggering Animations #

Toggle with animate #

Set animate: true to play forward, animate: false to reverse. Works with any state management solution.

FadeIn(animate: animate, child: const Square())
FadeInUp(animate: animate, child: const Square())
FadeInDown(animate: animate, child: const Square())
FadeInLeft(animate: animate, child: const Square())
FadeInRight(animate: animate, child: const Square())

Events — onFinish #

The onFinish callback fires when an animation completes, passing an AnimateDoDirection value (forward or backward).

Sugar syntax

const Square().fadeIn(
  animate: animate,
  delay: const Duration(milliseconds: 100),
  onFinish: (direction) => print('$direction'),
),

Class syntax

FadeIn(
  animate: animate,
  delay: const Duration(milliseconds: 100),
  onFinish: (direction) => print('$direction'),
  child: const Square(),
),

Manual Trigger #

Use manualTrigger: true together with the controller callback to drive the animation yourself — useful when you need full control over playback.

Note: When using manualTrigger, you are responsible for calling controller.forward() and controller.reverse() explicitly.

class _MyWidgetState extends State<MyWidget> {
  late AnimationController animateController;

  @override
  Widget build(BuildContext context) {
    return FadeInUp(
      manualTrigger: true,
      controller: (controller) => animateController = controller,
      child: YourWidget(),
    );
  }
}

Demos #

For complete runnable examples, see the example folder.

If you find this package useful, consider leaving a like on pub.dev. Feedback and suggestions are always welcome.