How to use AnimatedIcon Widget in Flutter?

Series - Lit Flutter Widgets

This is going to be the second article in the series "Lit Flutter Widgets." which talks about the most formidable and best flutter widgets out there.

Widgets disused till now in this series are

1. CheckboxTile Widget 

2. AnimateIcon Widget(this article)

In this article, you will be going to learn how you can use  AnimateIcon Widget in your Flutter projects.

AnimateIcon Flutter

Flutter has a great set of icons already available but did you know that flutter also has a collection of dedicated animated icons in AnimatedIcons class, and to use these animated icons, we have to use AnimatedIcon Widget.

Simple code using AnimatedIcon Widget is given below.

 AnimatedIcon(  
         icon: AnimatedIcons.play_pause,  
         progress: myAnimation,  
         semanticLabel: 'Play Pause',  
        ),  

There are two main parts of the AnimatedIcon widget, usage of the third one depends on the use case scenario. 

1. Icon: This parameter is used to show the animated icon from the AnnimatedIcons class

2. Progress: The progress parameter is used to control the animation of the animated icon.

3. SemanticLabel: This parameter is used to show the meaning label of the animated icon.

Demo Application

In this demo application, I am are going to show the usage of AnimatedIcon Widget. The icon that I will be using will demonstrate play and pause.

I will also try to show the difference between the usage of both standard Icon widget and AnmatedIcon widget.

The source code for this application is 

Let us  differentiate the standard icon widget and the AnimatedIconWidget in this

The code for the standard Icon Widget is

 Icon(isPlaying ? Icons.pause : Icons.play_arrow),  

In this, I have to use two different icons to show the play and pause state of the icon 

The code for AnimationIcon Widget is

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

In this, I used only one animated widget and managed its state using the handleOnPressed function in the application code.

And the rest of the code is for the UI of the application and can be easily understood.

Conclusion

Time to look at what we actually learned. AnimateIcon can come handy whenever we require Icons with the animation. In fact, it is much easier to learn about AnimateIcon than using icons and then Animations to it. However, if you prefer this article, bookmark this URL to come at any later point of time if required.

What is the next widget you like me to talk about?