Skip to content
Related Articles

Related Articles

Flutter – AnimatedIcon Widget

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 04 May, 2022

Animation has become a vital part of UI design, whether it be a transition from one window to another or the closing of the window, the animation plays an important role in the smooth representation of the process. Just like that when we click on the icon, it shows animation, or another icon is shown in its place. In Flutter this can be achieved with the help of AnimatedIcon Widget. A sample GIF is given below to get an idea about what we are going to do in this article.

Flutter - AnimatedIcon Widget



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


  • color: The color to use when drawing the icon.
  • hashCode: The hash code for this object.
  • icon: The icon to display. Available icons are listed in AnimatedIcons.
  • key: Controls how one widget replaces another widget in the tree.
  • progress: The animation progress for the animated icon.
  • runtimeType: A representation of the runtime type of the object.
  • semanticLabel: Semantic label for the icon.
  • size: The size of the icon in logical pixels.
  • textDirection: The text direction to use for rendering the icon.


  • First, create the Flutter project by typing “flutter create app_name” in the terminal.
  • Then, go to the “main. dart” file. 


import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  // This is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      home: GFG(),
      debugShowCheckedModeBanner: false,


class GFG1 extends StatefulWidget {
  const GFG({ Key? key }) : super(key: key);
  State<GFG> createState() => _GFGState();
// Widget that will be shown
// at the start of application.
class _GFGState extends State<GFG> {
  Widget build(BuildContext context) {
    return Scaffold(

  • Inside Scaffold, create IconButton wrapped around the Center widget which will help make our button center. Then provide AnimatedIcon with Icon and controller to change to check icon. 


class _GFGState extends State<GFG> with TickerProviderStateMixin {
  // The controller to change our animated icon
  late AnimationController _controller;
  // Boolean to check state of our icon
  bool isClicked = false;
  void initState() {
    // Initializing our controller
    _controller = AnimationController(
      duration: const Duration(
        milliseconds: 800,
      vsync: this,
  void dispose() {
    // Disposing controller
    // when its not needed
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: IconButton(
          iconSize: 70,
          onPressed: () {
            // Setting icon animation
            // according isClicked variable
            if (isClicked) {
            } else {
            // Changing the value
            // of isClicked variable
            isClicked = !isClicked;
          icon: AnimatedIcon(
            icon: AnimatedIcons.list_view,
            // providing controller
            // to the AnimatedIcon
            progress: _controller


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!