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
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?
0 comments: