Flutter – AnimatedIcon Widget

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.

Constructor

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

Properties

• 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.

Example

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

Dart

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.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GFG(),
      debugShowCheckedModeBanner: false,
    );
  }
}

• In the “main.dart” file, create a stateful widget below MyApp.

Dart

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

  @override
  State<GFG> createState() => _GFGState();
}

// Widget that will be shown
// at the start of application.
class _GFGState extends State<GFG> {
  @override
  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. 

Dart

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;
  @override
  void initState() {
    // Initializing our controller
    _controller = AnimationController(
      duration: const Duration(
        milliseconds: 800,
      ),
      vsync: this,
    );
    super.initState();
  }

  @override
  void dispose() {
    // Disposing controller
    // when its not needed
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: IconButton(
          iconSize: 70,
          onPressed: () {
            // Setting icon animation
            // according isClicked variable
            if (isClicked) {
              _controller.forward();
            } else {
              _controller.reverse();
            }
            // Changing the value
            // of isClicked variable
            isClicked = !isClicked;
          },
          icon: AnimatedIcon(
            icon: AnimatedIcons.list_view,
            // providing controller
            // to the AnimatedIcon
            progress: _controller
          ),
        ),
      ),
    );
  }
}

Output: