Coditaiton Animator #

Flutter package to ease building animations

Features #

This package takes away the hard work of setting up animations in flutter by exposing animator widgets api making it simple to configure a sequence of animations to be applied on a widget.

Using this package, any flutter widget could be configured to go through a customized sequence of animation effects one after the other.

Animators exposed by the package are:

• Rotation
• Scale-in
• Scale-out
• Flip
• Fade-in
• Fade-out

Getting started #

Installation #

dependencies:
  coditation_animator: <latest-version>

The package exposes a set of configuration objects corresponding to each animation supported. For instance, RotationAnimatorConfig takes in configurations for setting up rotation animation on a widget. Similarly

• ScaleInAnimatorConfig for Scale-in animation
• ScaleOutAnimatorConfig for Scale-out animation
• FlipAnimatorConfig for Flip animation
• FadeInAnimatorConfig for Fade-in animation
• FadeOutAnimatorConfig for Fade-out animation

These config objects can also be instantiated using static getter methods in AnimatorConfig class. For instance:

• AnimatorConfig.rotate(angle: pi/4)
• AnimatorConfig.scaleIn(scaleIn: 1)
• AnimatorConfig.scaleOut(scaleOut: 1)
• AnimatorConfig.flipX()
• AnimatorConfig.flipY()
• AnimatorConfig.fadeIn()
• AnimatorConfig.fadeOut()

The package exposes MultiAnimator which takes in

• child which expects any widget which will go through the sequence of animations
• animatorConfigs which expects a list of these animator config objects. The sequence of the config objects passed in the list matters, to obtain the desired sequence of animations being applied on the child.
• rootAnimatorWidgetStateKey which is of type GlobalKey<AnimatorWidgetState<AnimatorWidget>>

final GlobalKey<AnimatorWidgetState> rootAnimatorWidgetStateKey = GlobalKey();

 MultiAnimator(
    rootAnimatorWidgetStateKey: rootAnimatorStateKey,
    animatorConfigs: [
        RotationAnimatorConfig(
            curve: Curves.bounceIn,
            angle: pi / 4,
        ),
        FlipAnimatorConfig(curve: Curves.bounceIn),
        FadeOutAnimatorConfig(curve: Curves.linear),
        FadeInAnimatorConfig(curve: Curves.fastOutSlowIn),
        FlipAnimatorConfig(curve: Curves.bounceIn, flipAxis: FlipAxis.x),
        ScaleInAnimatorConfig(
            curve: Curves.bounceOut,
            scaleIn: 1,
        ),
        RotationAnimatorConfig(
            curve: Curves.bounceIn,
            angle: -pi / 4,
        ),
        ScaleOutAnimatorConfig(
            curve: Curves.bounceInOut,
            scaleOut: 1,
        ),
    ],
    child: Container(
        height: 50,
        width: 100,
        color: Colors.red,
    ),
),

Triggering animation #

The rootAnimatorWidgetStateKey can be used to trigger the animation sequence through different methods like:

• animate() method to start animation to trigger sequentially based on the sequence given in the list
  • make sure to invoke reset() method before invoking animate() to start fresh by resetting any affect from previous animation
• reset() method to reset animators before starting fresh
• reverseAnimate() method to perform reversal of the animation sequence in reverse order of the list, once the forward animation is done through animate() method
• repeat() method to repeat animation sequence forever

Row(
    children: [
        Expanded(
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
                FloatingActionButton.extended(
                    heroTag: "Forward",
                    onPressed: rootAnimatorWidgetStateKey.forward,
                    label: const Text("Forward"),
                    icon: const Icon(Icons.forward),
                ),
                FloatingActionButton.extended(
                    heroTag: "Reverse",
                    onPressed: rootAnimatorWidgetStateKey.reverse,
                    label: const Text("Reverse"),
                    icon: const Icon(Icons.undo),
                ),
                FloatingActionButton.extended(
                    heroTag: "Repeat",
                    onPressed: rootAnimatorWidgetStateKey.repeat,
                    label: const Text("Repeat"),
                    icon: const Icon(Icons.repeat),
                ),
            ],
            ),
        ),
    ],
)