flutter_animated_icon_button 1.1.3

An animated icon button for Flutter apps. This package allows you to create animated icons and a particle easily.

flutter_animated_icon_button

An animated icon plugin. This plugin allows you to create an animated icon button easily.

Getting Started

To use this plugin, add flutter_animated_icon_button to a dependency in your pubspec.yaml.

flutter_animated_icon_button: ^1.1.3

Example

TapFillIcon

The code below shows how to create the Good icon button that is often used in SNS apps.

TapFillIcon(
    borderIcon: const Icon(
      Icons.favorite_border,
      color: Colors.grey,
    ),
    fillIcon: const Icon(
      Icons.favorite,
      color: Colors.red,
    ),
),

This code builds the below icon button.

TapFillIconWithParticle

The code below shows how to create the Favorite icon button with particles.

// Please initialize a controller in 'initState' of the class that mixin TickerProviderStateMixin

  late AnimationController controller;
  @override
  void initState() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
      lowerBound: 0.0,
      upperBound: 1.0,
    );
    controller.addListener(() {
      if (mounted) {
        setState(() {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return TapParticle(
      size: 50,
      particleCount: 5,
      particleLength: 10,
      color: Colors.orange,
      syncAnimation: controller,
      duration: const Duration(milliseconds: 300),
      child: TapFillIcon(
        animationController: controller,
        borderIcon: const Icon(
          Icons.star_border,
          color: Colors.grey,
          size: 50,
        ),
        fillIcon: const Icon(
          Icons.star,
          color: Colors.yellow,
          size: 50,
        ),
      ),
    ),
  }

This code builds the below icon button.

AnimateChangeIcon

The code below shows how to create the icon button that can change its icon from Play to Stop with animation.

AnimateChangeIcon(
  firstIcon: Icon(
    Icons.play_arrow_rounded,
  ),
  secondIcon: Icon(
    Icons.stop_rounded,
  ),
),

This code builds the below icon button.