In this guide, we will discuss How to implement Animated Icon in Flutter. For this, we should know some basic information about what an Animation in flutter is. Animations are a way to introduce movement and interactivity to your app. When something changes on the screen, animation can help make that change feel more natural. we can also read the documentation here A Beginner’s Guide To Animations In Flutter
Some of the Properties used on AnimatedIcon are given below
icon | Here we specify the animated icon |
progress | This decides the animation progress of the icon |
color | sets the color of the icon. |
size | the size of the icon |
textDirection | The text direction to use for rendering the icon. |
Let’s take an example of how we can implement the Animated Icon in our flutter application.
import 'package:flutter/material.dart';
class AnimatedIconScreen extends StatefulWidget {
const AnimatedIconScreen({Key? key}) : super(key: key);
@override
_AnimatedIconScreenState createState() => _AnimatedIconScreenState();
}
class _AnimatedIconScreenState extends State<AnimatedIconScreen>
with SingleTickerProviderStateMixin {
bool isPlaying = false;
late AnimationController controller;
@override
void initState() {
controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 2000));
super.initState();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Animated Icon in Flutter'),
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
iconSize: 250,
splashColor: Colors.amber,
onPressed: toggleIcon,
icon: AnimatedIcon(
icon: AnimatedIcons.add_event,
progress: controller,
color: Colors.red,
),
),
],
),
));
}
void toggleIcon() {
setState(() {
isPlaying = !isPlaying;
isPlaying ? controller.forward() : controller.reverse();
});
}
}
In the above code we have used controller to pass to the progress property of AnimatedIcon. Beside these we have used isPlaying to forward or reverse the animation. On the onpressed handle the default value for isPlaying is false so clicking on the icon first time will make it true and animation will start from play to pause.
Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:
Thank you for reading the Guide about How to implement Animated Icon in Flutter