animate_do Package

For full control over playback (e.g., precise timing or custom triggers), set manualTrigger: true. You must then use the controller callback to capture the AnimationController and call .forward() or .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(),
    );
  }
}

animate_do is a Flutter animation package inspired by Animate.css. It allows you to add animations to any widget by wrapping it in an animation widget or using extension methods. It features zero external dependencies and supports Dart 3 and Null Safety.

/* Drop an animation widget around any widget to begin. */
FadeIn(child: const Square());

To control when an animation plays, use the animate boolean property. Setting animate: true plays the animation forward, while animate: false reverses it. This is designed to work seamlessly with state management solutions like setState, Bloc, Provider, or Redux.

FadeIn(animate: animate, child: const Square())

The package provides two ways to apply animations:

1. Sugar Syntax: Uses extension methods on widgets to chain animations fluently.
2. Class Syntax: Uses specific animation widgets (e.g., FadeInLeft) that wrap a child widget.

Both syntaxes are fully supported and achieve the same result.

// Sugar Syntax
const Square().fadeInLeft()

// Class Syntax
FadeInLeft(child: const Square())

You can chain multiple animations together using the Sugar syntax. This is particularly useful for complex sequences or combining standard animations with custom movement animations like MoveTo or MoveToArc.

// Chaining standard animations
Square()
  .tada()
  .wobble()
  .fadeIn()

// Chaining with custom movement 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),
  )

The onFinish callback is executed when an animation finishes. It provides an AnimateDoDirection argument, which tells you if the animation was moving 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(),
)

The Wobble animation wobbles the child horizontally while rotating it slightly, mimicking the wobble animation from Animate.css. The horizontal movement is calculated as a fraction of the available screen width.

You can use it either by wrapping a widget with the Wobble class or by using the wobble() extension method on any Widget.

// Using the extension method (recommended)
MyWidget().wobble(
  duration: Duration(milliseconds: 1500),
  infinite: true,
);

// Using the Wobble widget directly
Wobble(
  child: MyWidget(),
  duration: Duration(milliseconds: 1500),
);