😊 Flutter package to create custom animated IconButton.
😵 Includes all available icons. Based on native IconButton.
Follow these steps to use this library
dependencies:
animated_icon_button: ^0.2.0 #latest version
import 'package:animated_icon_button/animated_icon_button.dart';
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,
),
)
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.
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.