Hi, Welcome to AndroidRide.
Animation always helps our app to stand out from other apps. In Flutter, By default there are lots of Animated Widgets. So in this post, you will learn about Flutter Animated Icon widget.
okay… How it works?
It gets changed into one icon to another with animation.
Contents
How To Use AnimatedIcon In Flutter project?
AnimatedIcon( icon: AnimatedIcons.pause_play, progress: _animationController, )
AnimatedIcon needs 2 things.
- AnimatedIconData icon: Icon you want to show.
- Animation
progress : Animation for the icon.
AnimatedIcon Example In Simple Steps
Let’s start doing… Before that, What we will do next in simple steps?
- Create a Stateful widget.
- Extend the class with SingleTickerProviderStateMixin using with keyword.
- Create an AnimationController.
- Initialize the AnimationController inside initState.
- Use the AnimationController instance as progress value of AnimatedIcon.
- Control the animation through tap events.
- Dispose the AnimationController inside dispose() method.
Flutter AnimatedIcon Example
Create a Flutter project – check this tutorial.
If you are using Visual Studio – you can create a project using CTRL + SHIFT + P(windows).
I assume you have created a project, So clear the main.dart file.
- Create a stateful widget by typing stful and also add main() method.
- Or Just copy the below code.
import 'package:flutter/material.dart'; void main() => const AnimatedIconExample(); class AnimatedIconExample extends StatefulWidget { const AnimatedIconExample({Key? key}) : super(key: key); @override _AnimatedIconExampleState createState() => _AnimatedIconExampleState(); } class _AnimatedIconExampleState extends State<AnimatedIconExample> { @override Widget build(BuildContext context) { return Container(); } }
Next we need to create an AnimationController.
- As a first step, lets extend a Mixin called SingleTickerProviderStateMixin. We are creating only one AnimationController, that’s why SingleTickerProviderStateMixin is used.
- If you have multiple AnimationController, use TickerProviderStateMixin.
- Create an AnimationController object and initialize it in initState.
class _AnimatedIconExampleState extends State<AnimatedIconExample> with SingleTickerProviderStateMixin { late AnimationController _animationController; @override void initState() { super.initState(); _animationController = AnimationController( vsync: this, duration: const Duration(seconds: 1), ); }
- GestureDetector used for detecting tap events.
- Here 200 used for AnimatedIcon size, and green as color.
- AnimationController vsync property needs Ticker, that’s the reason we need to extend SingleTickerProviderStateMixin with our class.
@override Widget build(BuildContext context) { return Scaffold( body: Center( child: GestureDetector( onTap: () { // changeIcon(); }, child: AnimatedIcon( size: 200, color: Colors.green, icon: AnimatedIcons.pause_play, progress: _animationController, ), ), ), ); }
Let’s create a variable for changing animation state.
- Based on isAnimating value, icon changes one to another.
- forward() method starts running the animation forwards to end.
- reverse() method starts running the animation in reverse to beginning.
bool isAnimating = false; void changeIcon() { setState(() { isAnimating = !isAnimating; isAnimating ? _animationController.forward() : _animationController.reverse(); }); }
- Finally, Just like TextEditingController, Animationcontroller also need to dispose in dispose method.
@override void dispose() { _animationController.dispose(); super.dispose(); }
Check out the complete source code.
import 'package:flutter/material.dart'; void main() { runApp( const MaterialApp( home: AnimatedIconExample(), ), ); } class AnimatedIconExample extends StatefulWidget { const AnimatedIconExample({Key? key}) : super(key: key); @override _AnimatedIconExampleState createState() => _AnimatedIconExampleState(); } class _AnimatedIconExampleState extends State<AnimatedIconExample> with SingleTickerProviderStateMixin { late AnimationController _animationController; bool isAnimating = false; @override void initState() { super.initState(); // _animationController = AnimationController( vsync: this,//vsync needs Ticker duration: const Duration(seconds: 1), ); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: GestureDetector( onTap: () { //tap event calls the method, and start animating icon. changeIcon(); }, child: AnimatedIcon( size: 200,//size of the AnimatedIcon color: Colors.green,//color of the AnimatedIcon icon: AnimatedIcons.pause_play, progress: _animationController, ), ), ), ); } void changeIcon() { //rebuilds UI with changing icon. setState(() { isAnimating = !isAnimating; isAnimating ? _animationController.forward() : _animationController.reverse(); }); } //disposes AnimationController. @override void dispose() { _animationController.dispose(); super.dispose(); } }
Flutter AnimatedIcon List
Let’s check out the icons you can use now.
- add_event
- arrow_menu
- close_menu
- ellipsis_search
- event_add
- home_menu
- list_view
- menu_arrow
- menu_close
- menu_home
- pause_play
- play_pause
- search_ellipsis
- view_list
AnimatedIcon Properties
Color? color: Color used to paint the icon.
AnimatedIconData icon: The animated icon you need to show.
Animation
double? size: Size of the AnimatedIcon widget.
TextDirection? textDirection: The text direction used for rendering the icon.
String? semanticLabel: Available in accessibility modes (TalkBack). It doesn’t shown in the UI.
Download Source Code
If you like this post, please share it with your family and friends.
Thanks.