7.4 C
New York
Monday, December 11, 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

Latest Articles