6.5 C
New York
Thursday, January 26, 2023

Using AnimatedIcon in Flutter

There are cases where you will want an icon that can change its own appearance like a play/pause button for a video or audio, a button to close/open a menu, etc. Luckily, you can achieve your goal with a few lines of code by using AnimatedIcon.

A Full Example


This example demonstrates an animated play/pause button.

The full code:

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  _HomePageState createState() => _HomePageState();

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  bool _isPlay = false;
  late AnimationController _controller;

  void initState() {
    _controller =
        AnimationController(duration: const Duration(seconds: 1), vsync: this);

  // Dispose the controller
  void dispose() {

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Kindacode.com'),
        body: Center(
          child: GestureDetector(
            onTap: () {
              if (_isPlay == false) {
                _isPlay = true;
              } else {
                _isPlay = false;
            child: AnimatedIcon(
              icon: AnimatedIcons.play_pause,
              progress: _controller,
              size: 200,
              color: Colors.blue,

Available Animated Icons & API

All Available Animated Icons

Currently, Flutter provides directly a set of 14 animated icons as shown below:


   Key? key, 
   required AnimatedIconData icon, 
   required Animation<double> progress, 
   Color? color, 
   double? size, 
   String? semanticLabel, 
   TextDirection? textDirection


AdvertisementsThe following table listed the most-used parameters of the AnimatedIcon widget:

Parameter Type Description
icon (required) AnimatedIconData Determine the icon that will be displayed.
progress (required) Animation<double> The animation progress
color Color The color of the icon
size double Sizing the icon

You can see other properties in the official docs.


We have walked through a complete example and the fundamental of the AnimatedIcon widget. At this point, you should get a better sense when using it in your applications to make more attractive user interfaces.


If you would like to explore more exciting things about Flutter, give a look at the following articles:

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.


Related Articles


Please enter your comment!
Please enter your name here

Latest Articles