injectAnimation static method

InjectedAnimation injectAnimation({
  1. required Duration duration,
  2. Duration? reverseDuration,
  3. Curve curve = Curves.linear,
  4. Curve? reverseCurve,
  5. double? initialValue,
  6. double lowerBound = 0.0,
  7. double upperBound = 1.0,
  8. AnimationBehavior animationBehavior = AnimationBehavior.normal,
  9. int? repeats,
  10. bool shouldReverseRepeats = false,
  11. bool shouldAutoStart = false,
  12. void onInitialized(
    1. InjectedAnimation
    )?,
  13. void endAnimationListener()?,
})

Inject an animation. It works for both implicit and explicit animation.

This injected state abstracts the best practices to come out with a simple, clean, and testable approach to manage animations.

The approach consists of the following steps:

  • Instantiate an InjectedAnimation object using RM.injectAnimation method. 
      final animation = RM.injectAnimation(
    duration: Duration(seconds: 2),
    curve: Curves.fastOutSlowIn,
  );
  • Use OnAnimationBuilder to listen to the InjectedAnimation. the builder of OnAnimationBuilder exposes an Animate object used to set tweens explicitly or implicitly method. 
          child: OnAnimationBuilder(
        listenTo: animation,
        builder: (animate) {
          //Implicit animation
          final width = animate(selected ? 200.0 : 100.0);

          // Explicit animation
          final height = animate.fromTween((_)=> Tween(200.0, 100.0));

          return Container(
            width: width,
            height: height,
            child: const FlutterLogo(size: 75),
          );
        },
      ),

Parameters:

duration: Required Duration

The length of time the animation should last in the forward direction.

reverseDuration: Optional Duration

The length of time this animation should last when going in reverse. If not defined, the forward duration is used.

curve: Optional Curve. Defaults to Curves.linear

The curve the animation should take when going in forward direction.

reverseCurve: Optional Curve.

The curve the animation should take when going in reverse direction. If not defined, the forward curve is used.

lowerBound: Optional double. Defaults to 0.0

The value at which this animation is deemed to be dismissed.

upperBound: Optional double. Defaults to 1.0

The value at which this animation is deemed to be completed.

initialValue: Optional double.

The AnimationController's value the animation start with. If not defined the lowerBand is used.

animationBehavior: Optional AnimationBehavior. Defaults to AnimationBehavior.normal

The behavior of the controller when AccessibilityFeatures.disableAnimations is true.

repeats: Optional int. Defaults to 1.

The number of times the animation repeats (always from start to end). A value of zero means that the animation will repeats infinity.

shouldReverseRepeats: Optional bool. Defaults to false.

When it is set to true, animation will repeat by alternating between begin and end on each repeat.

shouldAutoStart: Optional bool. Defaults to false.

When it is set to true, animation will auto start after first initialized.

onInitialized: Optional Callback.

Callback fired once the animation is first set.

endAnimationListener: Optional Callback.

callback to be fired after animation ends (After purge of repeats and cycle)

See OnAnimationBuilder, Animate

Example of Implicit Animated Container

 final animation = RM.injectAnimation(
   duration: Duration(seconds: 2),
   curve: Curves.fastOutSlowIn,
 );

 class _MyStatefulWidgetState extends State<MyStatefulWidget> {
   bool selected = false;

   @override
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: () {
         setState(() {
           selected = !selected;
         });
       },
       child: Center(
         child: OnAnimationBuilder(
           listenTo: animation,
           builder: (animate) {
             final width = animate(selected ? 200.0 : 100.0);
             final height = animate(selected ? 100.0 : 200.0, 'height');
             final alignment = animate(
               selected ? Alignment.center : AlignmentDirectional.topCenter,
             );
             final Color? color = animate(
               selected ? Colors.red : Colors.blue,
             );
             return Container(
               width: width,
               height: height,
               color: color,
               alignment: alignment,
               child: const FlutterLogo(size: 75),
             );
           },
         ),
       ),
     );
   }
 }

Implementation

static InjectedAnimation injectAnimation({
  required Duration duration,
  Duration? reverseDuration,
  Curve curve = Curves.linear,
  Curve? reverseCurve,
  double? initialValue,
  double lowerBound = 0.0,
  double upperBound = 1.0,
  AnimationBehavior animationBehavior = AnimationBehavior.normal,
  int? repeats,
  bool shouldReverseRepeats = false,
  bool shouldAutoStart = false,
  void Function(InjectedAnimation)? onInitialized,
  void Function()? endAnimationListener,
}) {
  return InjectedAnimationImp(
    duration: duration,
    reverseDuration: reverseDuration,
    curve: curve,
    reverseCurve: reverseCurve,
    lowerBound: lowerBound,
    upperBound: upperBound,
    animationBehavior: animationBehavior,
    repeats: repeats,
    shouldReverseRepeats: shouldReverseRepeats,
    shouldAutoStart: shouldAutoStart,
    onInitialized: onInitialized,
    endAnimationListener: endAnimationListener,
    initialValue: initialValue,
  );
}