Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FadeTransition() widget is animated only once in flutter?

class pin extends StatefulWidget {
@override
_PinState createState() => _PinState();
}

class _PinState extends State<pin> with TickerProviderStateMixin {
AnimationController _controller;
Animation<double> _animation;
bool error = false;


@override
void initState() {
  super.initState();
  this._controller = AnimationController(
      duration: const Duration(milliseconds: 1000), vsync: this);
  this._animation =
      Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
    parent: _controller,
    curve: Curves.easeIn,
  ));
}

@override
Widget build(BuildContext context) {
  if(this.error) {
    this.error = false;
    _controller.forward();
  }
  return Container(
    child: if (this.error)
            Container(
            child: FadeTransition(
              opacity: _animation,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Image.asset("assets/images/sad_face.png"),
                  ),
                ],
              ),
            ),
          ),    
  ),
}
}

In the above code FadeTransition() widget is animated when the app is first launched. and the visibility of FadeTransition() is toggled by the error variable. but when next time the FadeTransition() widget is visible it is not animated?

what is missing, when toggling FadeTransition() the widget should be animated every time it appears!

the error variable is set from outside using Providers and wherever the error is changed the widget is rebuilt, so no need to use setState()

like image 238
rahul Kushwaha Avatar asked Dec 22 '22 20:12

rahul Kushwaha


1 Answers

One thing I noticed is error is always false. There is no code to turn it to true and there are two places where it would be set to false. One of them dependent on if it is true (which it will never be since error = true doesn't exist)

That being said, if you want to make your animation run again, where ever you are toggling this property (usually in a button's onTap method) you have to call setState. In the setState you can either use

controller.forward(from: 0);
// or
controller.reset(); // stops the animation if in progress
controller.forward();
like image 183
Fawaz Joseph Avatar answered Jan 29 '23 10:01

Fawaz Joseph