Animated Icon

Introduction of Animated Icon

In Flutter “Animated Icon” is used to display an animated icons that transitions between different states or animations. It’s particularly useful for creating dynamic and visually appealing user interfaces.

Here is an explanation of AnimatedIcon properties:

Icon Property: Specifies the icon to be displayed. It accepts an AnimatedIconData object, which represents a specific AnimatedIcon Widget. This can be one of the built-in AnimatedIcon Widget data constants or a custom AnimatedIcon Widget data.

AnimatedIcon(
  icon: AnimatedIcons.play_pause,
  // Other properties...
)

Progress Property: Specifies the animation progress, which controls the state of the animated icon. It accepts a Animation<double> object.

AnimatedIcon(
  icon: AnimatedIcons.play_pause,
  progress: _animationController,
  // Other properties...
)

Size Property: Sets the size of the AnimatedIcon Widget.

AnimatedIcon(
  icon: AnimatedIcons.play_pause,
  size: 48,
  // Other properties...
)

Color Property: Defines the color of the animated icon.

AnimatedIcon(
  icon: AnimatedIcons.play_pause,
  color: Colors.blue,
  // Other properties...
)

SemanticLabel Property: A label that describes the animated icon for accessibility purposes.

AnimatedIcon(
  icon: AnimatedIcons.play_pause,
  semanticLabel: 'Play/Pause',
  // Other properties...
)

Usage:

AnimatedIcon(
  icon: AnimatedIcons.play_pause,
  progress: _animationController,
  size: 48,
  color: Colors.blue,
  semanticLabel: 'Play/Pause',
)

Final Code: This is the final code with some of the above properties.

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    _animationController =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
  }

  bool VideoPlaing = false;
  void _iconTaped() {
    if (VideoPlaing == false) {
      _animationController.forward();
      VideoPlaing = true;
    } else {
      _animationController.reverse();
      VideoPlaing = false;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: _iconTaped,
          child: AnimatedIcon(
            icon: AnimatedIcons.play_pause,
            progress: _animationController,
            size: 150,
          ),
        ),
      ),
    );
  }
}

In this example, an AnimatedIcon widget is created with a play/pause animated icon. The animation progress is controlled by an animation controller _animationController, and additional properties such as size, color, and semantic label are set accordingly. Adjust the properties based on your specific use case and styling preferences.

Thank for visiting Hybrid App Development
Posted by Hussam HM