How to implement Animated Icon in Flutter

Sagar Koju Flutter, Animations

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

iconHere we specify the animated icon
progressThis decides the animation progress of the icon
color sets the color of the icon.
size the size of the icon
textDirectionThe 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

Tags: