Using AnimatedIcon in Flutter

Last updated on February 22, 2021 A Goodman Loading... Post a comment

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() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: '',
      home: HomePage(),

class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();

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

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

  // Dispose the controller
  void dispose() {

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

API and Available Animated Icons


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


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

icon (required)AnimatedIconDataDetermine the icon that will be displayed.
progress (required)Animation<double>The animation progress
colorColorThe color of the icon
sizedoubleSizing the icon

All Available Animated Icons

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


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.

If you would like to explore more exciting things about Flutter, give a look at the following articles: Example of sortable DataTable in FlutterFlutter: Scrolling to a desired Item in a ListViewHow to use Cupertino icons in FlutterExample of CupertinoSliverNavigationBar in Flutter.

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

Notify of
Inline Feedbacks
View all comments

Related Articles