Rotate icon 180 degree with animation in flutter
Solution 1
Thanks to @krumpli.
-
Define
AnimationController _controller
. -
Define
init
method as :
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 300),
upperBound: 0.5,
);
}
- Define
dispose
method as :
@override
void dispose() {
super.dispose();
_controller.dispose();
}
- With the use of the widget
RotationTransition
:
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0).animate(_controller),
child: IconButton(
icon: Icon(Icons.expand_less),
onPressed: () {
setState(() {
if (_expanded) {
_controller..reverse(from: 0.5);
} else {
_controller..forward(from: 0.0);
}
_expanded = !_expanded;
});
},
),
)
Don't forget to add with SingleTickerProviderStateMixin
in the class defintion.
Solution 2
Try this:
Add an animation controller: AnimationController _animationController:
initState() {
_animationController = new AnimationController(
vsync: this, duration: Duration(milliseconds: 300));
}
wrap your icon in this:
RotationTransition(
turns: Tween(begin: 0.0, end: 1.0)
.animate(_animationController),
child: IconButton(icon: //YOUR ICON),
onPressed: () {
setState(() {
_animationController1.forward(from: 0.0);
});
},
),
)
Finally:
@override
void dispose() {
super.dispose();
_animationController?.dispose();
}
Comments
-
Aayush Shah over 1 year
I have a
IconButton
, Normally, It's icon isIcons.expand_more
but When I press that its icon should beIcons.expand_less
. I want to animated this so that if I press that button, it will rotate and point the downwords from upwords. and same when I press theexpand_less
then it should becomeexpand_more
with rotating animation. How can I acheive this ? below is my code :IconButton( icon: _expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more), onPressed: () { setState(() { _expanded = !_expanded; }); }, )
I tried to use animatedContainer but it didn't work as I am using two different icons and that rotation effect I cannot acheive with this. I also tried to rotate the icon with below approach but it cannot show the animation when it is rotating from 0 to 180 degree.
IconButton( icon: AnimatedContainer( duration: Duration(seconds: 3), child: Transform.rotate( angle: _expanded ? 0 : 180 * math.pi / 180, child: Icon(Icons.expand_less))), // icon: // _expanded ? Icon(Icons.expand_less) : Icon(Icons.expand_more), onPressed: () { setState(() { _expanded = !_expanded; }); }, )
This is before expansion :
This is after expansion :
I want the rotation animation on button click.