injectAnimation method Null safety

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,
      );
    }