AnimatedIcon Example in Flutter

<p>In this post, we are going to see how to create an AnimatedIcon in Flutter as below.</p> <p>![](https://fluttercentral.com/Uploads/214163dd-6061-4bb6-888a-dd774d40a46c.gifwidth="50%height="auto](</p> <p>As you already might know, flutter has great support for animations. And the above animation can be created with the out of the box widget, AnimatedIcon. As below,</p> <p>AnimatedIcon( icon: AnimatedIcons.play_pause, progress: controller, ),</p> <p>However, the trickiest part of this example is to add the controller.</p> <p>AnimationController is a special Animation object that generates a new value whenever the hardware is ready for a new frame. By default, an AnimationController linearly produces the numbers from 0.0 to 1.0 during a given duration, (but it can be out of range in few cases). The generation of numbers is tied to the screen refresh, so typically 60 numbers are generated per second.</p> <p>When creating an AnimationController, you pass it a vsync argument. The presence of vsync prevents offscreen animations from consuming unnecessary resources. You can use your stateful object as the vsync by adding SingleTickerProviderStateMixin to the class definition.</p> <p>Here is the code from main.dart file.</p> <p>runApp(LogoApp());</p> <p>class LogoApp extends StatefulWidget { _LogoAppState createState() => _LogoAppState(); }</p> <p>class _LogoAppState extends State with SingleTickerProviderStateMixin { bool isPlaying = false;</p> <p>Animation animation;</p> <p>AnimationController controller;</p> <p>@override void initState() { super.initState();</p> <pre>controller = AnimationController( duration: const Duration(milliseconds: 500), vsync: this); </pre> <p>}</p> <p>@override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: IconButton( iconSize: 70, icon: AnimatedIcon( icon: AnimatedIcons.play_pause, progress: controller, ), onPressed: () => _onpressed(), )), ), ); }</p> <p>@override void dispose() { controller.dispose();</p> <pre>super.dispose(); </pre> <p>}</p> <p>_onpressed() { setState(() { isPlaying = !isPlaying;</p> <pre> isPlaying ? controller.forward() : controller.reverse(); }); </pre> <p>} }</p> <p>` Hope this is helpful to you. Thanks, Srikanth</p>