Flutter Animated Icon Example With Tutorial

Hi, Welcome to AndroidRide.

Animations help our app stand out from others. In Flutter, there are many built-in animated widgets. In this post, you’ll learn about the Flutter AnimatedIcon widget and how it works?.

It gets changed into one icon to another with animation.

How To Use AnimatedIcon In Flutter project?

AnimatedIcon(
            icon: AnimatedIcons.pause_play,
            progress: _animationController,
          )

AnimatedIcon needs 2 things.

1. AnimatedIconData icon: Icon you want to show.
2. 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?

1. Create a Stateful widget.
2. Extend the class with SingleTickerProviderStateMixin using with keyword.
3. Create an AnimationController.
4. Initialize the AnimationController inside initState.
5. Use the AnimationController instance as progress value of AnimatedIcon.
6. Control the animation through tap events.
7. 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();
  }
}

• How To Remove Debug Banner In Flutter?
• Flutter ListView Navigation Example

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.

Download Source Code

If you like this post, please share it with your family and friends.
Thanks.

• Flutter AnimatedIcon Docs