animated_icon_button #

😊 Flutter package to create custom animated IconButton.
😵 Includes all available icons. Based on native IconButton.

Getting Started #

Follow these steps to use this library

Add dependency #

dependencies:
  animated_icon_button: ^0.4.1 #latest version

Add import package #

import 'package:animated_icon_button/animated_icon_button.dart';

Easy to use #

Simple example of use AnimatedIconButton
Put this code in your project at an screen and learn how it works 😊

    AnimatedIconButton(
        size: 35,
        onPressed: () {
          print("button with color pressed");
        },
        duration: Duration(milliseconds: 200),
        endIcon: Icon(
            Icons.close,
                color: Colors.red,
            ),
        startIcon: Icon(
            Icons.add,
            color: Colors.purple,
        ),
    )

Custom animation controller #

In order to animate your icons in a custom way, like on text changed or when pressing a button, just use the animationController property as follows.

    var animationController = AnimationController(
        vsync: this,
        duration: Duration(milliseconds: 200),
        reverseDuration: Duration(milliseconds: 200),
    );

    AnimatedIconButton(
        animationController: animationController,
        size: 35,
        onPressed: () {
          print("button with color pressed");
        },
        endIcon: Icon(
            Icons.close,
                color: Colors.red,
            ),
        startIcon: Icon(
            Icons.add,
            color: Colors.purple,
        ),
    )

Then, whenever you want, execute your animationController.forward() and animationController.reverse() methods to get your icons animated.

Don't forget to remove duration from your AnimatedIconButton when using this property.

Attributes #

size: The size of AnimatedIconButton
startIcon: The icon of the AnimatedIconButton when button is not pressed.
endIcon: The icon of the AnimatedIconButton when button is pressed.
duration: Animation time of the AnimatedIconButton.
startBackgroundColor: The background Color of the AnimatedIconButton when button is not pressed.
endBackgroundColor: The background Color of the AnimatedIconButton when button is pressed.
And all fields of the parent element: IconButton

For help getting started with 😍 Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.