Flutter Animated Icon Example With Tutorial

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?
Example In Simple Steps
AnimatedIcon – Example With Tutorial
Flutter Animated Icon List
AnimatedIcon Widget Properties
Download Source Code

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 Bottom Button Example

Clickable Container In Flutter

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 progress: Animation progress for the AnimatedIcon.
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.