Animate.css with Zero Dependencies: Animate_do

Published on by Flutter News Hub

Animate.css with Zero Dependencies: Animate_do

Animate_do is a feature-rich animation package inspired by Animate.css but built solely within the realm of Dart/Flutter, eliminating the need for external dependencies. With Animate_do, developers gain access to a comprehensive array of pre-built animations that can enhance their app interfaces with minimal effort.

Getting Started

Utilizing Animate_do is a breeze. Each animation comes equipped with sensible default settings that deliver visually appealing results. However, you have the flexibility to fine-tune properties to your liking.

Key Properties

Nearly every animation in Animate_do supports a consistent set of properties:


Property Type Description
| key  | Key  | Unique identifier for the widget
| child  | Widget  | The widget to be animated
| duration  | Duration  | Animation duration
| delay  | Duration  | Delay before the animation starts
| from  | double  | Initial or final position for slide or scale animations
| animate  | bool  | Triggers the animation (toggle this for state management)
| infinite  | bool  | Makes the animation run indefinitely
| spins  | double  | Number of spins for specific animations (e.g., Spin, Rouelette)
| controller  | Function  | Exposes the animation controller (advanced use cases)
| onEnd  | Function  | Callback executed when the animation completes
| curve  | Curve  | Customizes the animation curve

Available Animations

Animate_do offers a wide range of animation types:

Fade Animations:

  • FadeIn, FadeInDown, FadeInDownBig, FadeInUp, FadeInUpBig, FadeInLeft, FadeInLeftBig, FadeInRight, FadeInRightBig
  • FadeOut, FadeOutDown, FadeOutDownBig, FadeOutUp, FadeOutUpBig, FadeOutLeft, FadeOutLeftBig, FadeOutRight, FadeOutRightBig

BounceIn Animations:

  • BounceInDown, BounceInUp, BounceInLeft, BounceInRight

ScaleIn Animations:

  • ScaleIn, ScaleOut

SpecialIn Animations:

  • JelloIn

Attention Seekers:

  • Bounce, Dance, Pulse, Rouelette, ShakeX, ShakeY, Spin, SpinTwice, Swing (These can run indefinitely with the infinite property)

Example Usage

Example 1 - Basic Fade Animations

home: Scaffold(
  body: Center(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        FadeInLeft(child: const Text('FadeInLeft')),
        FadeInUp(child: const Text('FadeInUp')),
        FadeInDown(child: const Text('FadeInDown')),
        FadeInRight(child: const Text('FadeInRight')),
      ],
    ),
  ),
),

Example 2 - Toggling Animations with Animate Property

class _MyAppState extends State {
  bool animate = true;

  @override
  Widget build(BuildContext context) {
    return FadeIn(
      animate: animate,
      child: const Text('Fade In'),
    );
  }
}

Event Handling

Animate_do provides an onEnd property that allows you to respond to animation completion. It returns the direction of the animation (forward or reverse).

Example

FadeIn(
  animate: animate,
  onEnd: (direction) => print(direction),
  child: const Text('FadeIn'),
),

Manual Trigger

While the animate property offers convenient animation control, you can also manually trigger animations by obtaining the AnimationController. However, this advanced usage requires managing the animation's lifecycle (forward(), reverse()).

Example

FadeOutDownBig(
  manualTrigger: true,
  controller: (controller) => animateController = controller,
  child: YourWidget(),
),

Conclusion

Animate_do empowers developers with a comprehensive set of animations that can enhance their app's visual appeal. With zero external dependencies and highly configurable properties, Animate_do is an invaluable tool for creating engaging and dynamic UI experiences in Dart/Flutter applications.

Flutter News Hub