How to add two different animation with different duration in Flutter?

Question

I have the following code animate any widget

import 'dart:async';
import 'package:flutter/material.dart';

class AnimElasticOut extends StatefulWidget {
  final Widget child;
  final int delay;
  final Key key;
  final startAnimation;

  AnimElasticOut(
      {@required this.key,
      @required this.child,
      this.delay,
      this.startAnimation});

  @override
  AnimElasticOutState createState() => AnimElasticOutState();
}

class AnimElasticOutState extends State<AnimElasticOut>
    with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;
  int duration = 1000;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(
        vsync: this, duration: Duration(milliseconds: duration));

    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.elasticOut,
    );

    if (widget.startAnimation != null) {
      if (widget.delay == null) {
        controller.forward();
      } else {
        Timer(Duration(milliseconds: widget.delay), () {
          controller.forward();
        });
      }
    }
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      child: widget.child,
      scale: animation,
    );
  }
}

Sample usage

AnimElasticOut(
                        key: counterElasticOutKey,
                        child: Container(
                          height: 35,
                          padding: EdgeInsets.only(
                              left: 5, top: 5, bottom: 5, right: 15),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20),
                          ),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Icon(
                                Icons.add_alarm,
                                color: Colors.amber,
                              ),
                              SizedBox(
                                width: 10,
                              ),
                              Counter(
                                key: counterKey,
                              ),
                            ],
                          ),
                        ),
                      ),

I start the animation using the following code.

counterElasticOutKey.currentState.controller.forward(from: 0);

Now it animates the widget nicely.

I also have another code to reverse the animation.

counterElasticOutKey.currentState.controller.reverse();

What I want is to use another animation while reversing. Also, some other duration. For example, I want Curves.easeInOutCubic as an animation curve with a duration of milliseconds: 500

How can I do this?

Answer 1

There is a property reverseDuration in AnimationController & reverseCurve in Animation<T>

    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 1000),
      reverseDuration: Duration(milliseconds: 250),
    );

    animation = CurvedAnimation(
      parent: controller,
      curve: Curves.elasticOut,
      reverseCurve: Curves.easeInQuad,
    );