How To Animate Icons In Flutter

Step by Step guide on using Flutter’s AnimatedIcons widget.

Animation always adds life to pictures. There are times when we click on any icon and then need to show another icon. We achieve this just by replacing the old one with a new one. A good example of this is a play-pause button.

How about if we could just morph one icon into another. Slowly animating one icon into another gives a better user experience. And this is it we will try to achieve.

What is that widget?

We are going to use Flutter’s AnimatedIcon widget. A minimalist code for this widget looks like this.

AnimatedIcon(
   icon: AnimatedIcons.play_pause,
   progress: _animationController,
 )

Do you want to stay updated in Flutter world? Please click on subscribe button to get an email when the new tutorial is published or visit the https://flutterbeads.com

Let’s see it’s properties quickly

➊ icon: Here you specify the animated icon.

icon: AnimatedIcons.play_pause,

This accepts AnimatedIconData, which is available as AnimatedIcons.play_pause. Similarly, there are other predefined animated icons that you can use and the full list is available here.

➋ progress: This decides the animation progress of the icon.

progress: _animationController,

This accepts AnimationController object such as…

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

The duration specified as milliseconds is the time it will take to complete the animation. i.e Begining from the first icon it would take 450 ms to display another icon. Higher the number, more time it will take. You can play with it as you need.

➌ color: This simply sets the color of the icon.

color: Colors.red,

➍ size: Determines the size of the icon.

size: 54,

Sow how we do that in flutter?

Step 1: Create required variables

For the demo, we will need at least two things to get started

AnimationController _animationController;
bool isPlaying = false;

1. _animationController will be used to pass to the progress property of AnimatedIcon.
2. isPlaying will be used to forward or reverse the animation.

Step 2: Initialize animation controller

@override
void initState() {
  super.initState();
  _animationController =
      AnimationController(vsync: this, duration: Duration(milliseconds: 450));
}

Step 3: Prepare the widget

IconButton(
  iconSize: 150,
  splashColor: Colors.greenAccent
  icon: AnimatedIcon(
    icon: AnimatedIcons.play_pause,
    progress: _animationController,
  ),
  onPressed: () => _handleOnPressed(),
)

Step 4: Handle onPressed method

void _handleOnPressed() {
  setState(() {
    isPlaying = !isPlaying;
    isPlaying
        ? _animationController.forward()
        : _animationController.reverse();
  });
}

The main catch here is that the default value for isPlaying is false so clicking on the icon first time will make it true and animation will start from play to pause.

That’s it.

Try to play with this codepen.

More about this widget in the video from the Flutter team.

Thanks for reading.

You can check out my other articles here

Easy Way to Internationalize and Localize Your Flutter app - FlutterBeads

How to build a bottom navigation bar in Flutter - FlutterBeads

Fantastic Flutter Tips And Tricks I Have Found Helpful

Top 5 Flutter Box Widgets You Should Know

Little about me

Hi, Myself Pinkesh Darji. I love to solve problems using technology that improves user’s life on a major scale. Over the last several years, I have been developing and leading various mobile apps in different areas. More than just programming, I love to write technical articles.

I write about Flutter at https://flutterbeads.com/. A place to learn Flutter from high-quality tutorials.

Pinkesh Darji 💙

pinkeshdarji — Overview