AnimatedIcon widget and Attributes

This widget allows you to create animated icons that can change their appearance, making it perfect for scenarios like play/pause buttons, menu toggles, and more.

Constructors

1. AnimatedIcon: Shows an animated icon at a given animation progress.

   • Key parameters:

     • icon (required): Determines the icon to display (e.g., play, pause, close).

     • progress (required): An animation progress (usually controlled by an AnimationController).

     • color: The color of the icon.

     • size: Sizing for the icon.

     • semanticLabel: A description for accessibility.

     • textDirection: The text direction (e.g., left-to-right or right-to-left).

Available Animated Icons

Flutter provides a set of 14 built-in animated icons, including play, pause, arrow, and more. You can find the complete list in the official documentation.

Example: Animated Play/Pause Button

Below is a complete example demonstrating an animated play/pause button.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'AnimatedIcon Example',
      home: HomePage(),
    );
  }
}

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

  @override
  _HomePageState createState() => _HomePageState();
}

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

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

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

In this example, we create a play/pause button using the AnimatedIcon. When tapped, it smoothly transitions between play and pause states.