CODEWITHSUNDEEP
flutterdartflutter-animation
Sabbir33
Sabbir33

Reputation: 1185

Prevent animation from playing immediately

I want to give animation on tapped. If a user tapped a button then only animation start and after some period of time it should stop. Here is my code:

AnimationController _animationController;
Animation<double> _animation;
@override
initState(){
 _animationController = AnimationController(
   vsync: this,
   duration: Duration(seconds: 3),
   lowerBound: 0.5,
   upperBound: 1.0,
 );
  _animation = CurvedAnimation(parent: _animationController, curve: Curves.bounceInOut);
_animation.addListener(() {
  setState(() {});
});
_animationController.forward();
}
 @override
 dispose(){
   _animationController.dispose();
  super.dispose();
}

Above code is for animation.

ScaleTransition(
          scale: _animation,
          child: Center(
            child: InkWell(
                onTap: (){
                  _animation.addStatusListener((status) {
                    if (status == AnimationStatus.completed) {
                      _animationController.reverse();
                    } else if (status == AnimationStatus.dismissed) {
                      _animationController.forward(from: 0.0);
                    }
                  });
                },
                child: new Image.asset(
                  'images/like.png'
                  color: Colors.white,
                  height: 50.0,
                ),
            ),
          ),
        ),

I did like above code. But when I run the app, animation start automatically without clicking the button. But I want to give animation only when user tapped the button. When a user tapdown the button then only animation starts and when tapup the button then animation should stop. In my case animation starts automatically. And when user tap the button, button should bounce.

Upvotes: 1

Views: 673

Answers (2)

mohamed gaber
mohamed gaber

Reputation: 33

remove _animationController.forward(); from initState and put it in ontab method in GesturesDetector

Upvotes: 0

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 127034

This happens because you start the animation in initState:

_animationController.forward();

Remove that line and it will not start until you tap.
Additionally, the following code is unnecessary as Scale handles its state itself:

_animation.addListener(() {
  setState(() {});
});

If you remove this from your initState method as well, you will be fine.

Upvotes: 2

Related Questions