Exploring ‘AnimatedIcon’ in Flutter

Usman Khan
Jul 7 · 4 min read
Image for post
Image for postImage for post
Animation possible using AnimatedIcon

Prerequisite

  • The article assumes that you are familiar with explicit animations as we’ll be dealing with Animation and AnimationController instances.

Usage

The AnimatedIcon widget takes in 2 required parameters:

  • progress : It takes in an instance of Animation object.

It is okay if it didn’t quite make sense, things always get more clear with example.

Example

Let’s go step-by-step in setting up our AnimatedIcon.

Step 1. Configuring Animation and AnimationCotroller

  • As said earlier, we’ll be needing instances of Animation and AnimationController, so for that we’ll first need to update our code to incorporate an inbuilt mixin which is TickerProviderStateMixin.
class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin
bool _flag = true;

Animation<double> _myAnimation;
AnimationController _controller;
Configuring ‘Animation’ and ‘AnimationController’
  • Secondly, the Animation instance _myAnimation can be used to configure the nature of animation using Curve and tie it up with _controller by passing its reference.

Step2. Setting up UI

  • The UI is simply going to be our AnimatedIcon and RaisedButton at the center of the screen. On the tap of button, we’ll start the animation.
AnimatedIcon(
progress: _myAnimation,
icon: AnimatedIcons.add_event,
size: 60,
),
  • Any icon can be passed from the AnimatedIcons class, we went forward with AnimatedIcons.add_event.
onPressed: () {
if (_flag) {
_controller.forward();
} else {
_controller.reverse();
}

_flag = !_flag;
},
  • For switching back from the second icon to first icon, we need to call the reverse() method on our _controller.
  • That is why we have maintained a _flag which helps us track the state of the icon which we toggle every time after an animation is triggered and based on its value we can accordingly call forward() or reverse()to trigger the appropriate animation.
Image for post
Image for postImage for post

Other scenarios :

  1. A play-pause button in Music Player
Image for post
Image for postImage for post
Animated play/pause button for music player
Image for post
Image for postImage for post
Toggle button to switch between list view or grid view when displaying list of items
Image for post
Image for postImage for post
Something similar to Twitter

Thank you for reading my article. Leave some claps if you really enjoyed it. Follow me on medium for more articles.

My other profiles:

Flutter Community

Articles and Stories from the Flutter Community

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store