Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Flutter animated icon AnimationController

So I got two pages: The first page is my HomePage from where I can access my second page via a button. The second page is where I put an animated Icon inside.
I’m trying to animate the icon and so far everything works just well. The icon bounces just like I want it to be but as soon as I go back to my HomePage all of a sudden an error appears and the app doesn’t function anymore (I’ve added a screenshot but I don’t really understand what I need to change inside of my code). What can I do to prevent this from happening?

This is my code:

class InfoScreen extends StatefulWidget {
  @override
  _InfoScreen createState() => _InfoScreen();
}
@override
class _InfoScreen extends State<InfoScreen> with TickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;
  bool _isPlaying = false;

  void _animate() {
    if (_isPlaying)
      _animationController.stop();
    else
      _animationController.forward();
    setState(() {
      _isPlaying = !_isPlaying;
    });
  }

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

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

    _animation = Tween<double>(begin: 0.85, end: 1.05).animate(
        CurvedAnimation(parent: _animationController, curve: Curves.easeIn));
    _animationController.forward();
    _animation.addStatusListener((status) {
      if (status == AnimationStatus.completed)
        _animationController.reverse();
      else if (status == AnimationStatus.dismissed)
        _animationController.forward();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Info'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [Color(0xffFBD23E), Color(0xffF6BE03)],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter),
          ),
        ),
      ),
      body: Container(
        constraints: BoxConstraints.expand(),
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight),
        ),
        child: ScaleTransition(
              scale: _animation,
              child: Icon(
                Icons.favorite,
                color: Color(0xffF40930),
              ),
            ),
 ],
        ),
      ),
    );
  }
}

enter image description here

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

We need to dispose the AnimationController. Override the dispose method and dispose the _animationController.

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading