In my app, I have a container that I want to start rotating with a slow-curve on a click, then keep rotation, and then the next click will make it stop with a slow-curve.

How do I make a curve-animation in flutter?

Somthing like this: https://miro.medium.com/max/960/1*ZLekwO4QthfAWlBgM-9vpA.gif


Solution 1: Mobina

  1. Make an animation controller and an animation.

  AnimationController _animController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animController = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    );
    _animation =
        Tween<double>(begin: 0, end: 2 * math.pi).animate(_animController)
          ..addListener(() {
            setState(() {});
          });
  }

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

  1. Define a boolean variable. This variable indicates whether the object is animating or not.
var _animating = false;
  1. End the animation on Stop and repeat the animation on Start.
Scaffold(
  backgroundColor: Colors.blueGrey,
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Transform.rotate(
          angle: _animation.value,
          child: Container(
            color: Colors.green,
            height: 80,
            width: 80,
            padding: EdgeInsets.all(30),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: RaisedButton(
            color: Colors.white,
            child: Text(_animating ? "Stop" : "Start"),
            onPressed: () {
              if (_animating) {
                _animController.animateTo(1,
                                          duration: Duration(seconds: 3), curve: Curves.ease);
              } else {
                _animController.repeat();
              }
              setState(() => _animating = !_animating);
            },
          ),
        ),
      ],
    ),
  ),
)

Result:

Result