Animating icons with Flutter AnimatedIcon

Share this post

Flutter supports a number of Material Design animated icons that are built-in and can be used with minimal effort. The AnimatedIcon class works almost like the Icon class but requires an AnimationController.

I’m going to show you how to animate an icon using a button and reset the same animation to its beginning state using another button. Just keep in mind that you can, of course, trigger the animation any other way you want. This will be our end result:

First of all we need a Stateful widget that uses SingleTickerProviderStateMixin and create an instance of AnimationController:

class _AnimatedIconPageState extends State<AnimatedIconPage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

And we should override initState with the following code:

@override
  void initState() {
    _controller = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin
      duration: Duration(seconds: 1), // how long should the animation take to finish
    );
    super.initState();
  }

And we dispose of our animation like so:

@override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

Wherever we want to have our animated icon (one of these), we just call this:

AnimatedIcon(
  icon: AnimatedIcons.list_view, // one of the available animated icons
  progress: _controller, // this is our AnimationController
  color: Colors.blue,
),

There are a lot of possibilities with AnimationController, but today I just want to keep it simple and stick to the possible uses within the AnimatedIcon context. To start our animation we can call:

_controller.forward()

After calling forward the animation stops in its last state. If we would want to run the animation from the end to beginning again, we can call:

_controller.reverse()

Or we can just reset it to the beginning state:

_controller.reset()

So, after all the steps this is the code that we have:

class AnimatedIconPage extends StatefulWidget {
  AnimatedIconPage({Key key}) : super(key: key);

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

class _AnimatedIconPageState extends State<AnimatedIconPage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      vsync: this, // the SingleTickerProviderStateMixin
      duration: Duration(seconds: 1),
    );

    super.initState();
  }

  @override
  dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimatedIcon"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedIcon(
              icon: AnimatedIcons.list_view,
              progress: _controller,
              color: Colors.blue,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: <Widget>[
                FlatButton(
                  onPressed: () => _controller.forward(),
                  child: Text('Animate'),
                ),
                FlatButton(
                  onPressed: () => _controller.reset(),
                  child: Text('Reset'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

There are a lot more custom and advanced uses of animation of Flutter, but if you just want to do a common animation that is already part of Material Design, then AnimatedIcon is a great widget to use.

In my future posts, I will show more things that we can do with animation in Flutter.