CurvedAnimationController
An easy way to use AnimationController with Curve.
Getting Started
Add dependency in your flutter project.
$ flutter pub add curved_animation_controller
or
dependencies:
curved_animation_controller: ^1.1.0+1
or
dependencies:
curved_animation_controller:
git: https://github.com/salkuadrat/curved_animation_controller.git
Then run flutter pub get.
Example
There is a nice example project in the example folder. Check it out to learn how to use Curved Animation Controller.
Usage
Here is a snippet of code we usually use when we want to do some animation with curve.
AnimationController _controller = AnimationController(
vsync: this,
duration: Duration(milliseconds: 300),
);
Animation _animation = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation(
parent: _controller, curve: Curves.easeInOut,
));
_controller.addListener(() => setState(() {}));
...
// start animation
_animation.forward();
...
// apply animation
Opacity(
opacity: _animation.value,
child: child,
)
Using CurvedAnimationController, we can apply animation with a more straightforward code:
CurvedAnimationController _animation = CurvedAnimationController(
vsync: this, duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
_animation.addListener(() => setState(() {}));
...
// start animation
_animation.start();
...
// apply animation
Opacity(
opacity: _animation.value,
child: child,
)
We can also use custom Tween:
CurvedAnimationController<Color> _animation = CurvedAnimationController<Color>.tween(
ColorTween(begin: Colors.pink, end: Colors.teal),
Duration(milliseconds: 300),
curve: Curves.easeInCubic,
vsync: this,
);
_animation.addListener(() => setState(() {}));
...
// start animation
_animation.forward();
...
// apply animation
Container(
color: _animation.value,
child: child,
)
Don't forget to dispose the controller properly:
@override
void dispose() {
_animation.dispose();
super.dispose();
}
Available Constructors
CurvedAnimationController(
begin: begin,
end: end,
vsync: vsync,
curve: curve,
duration: duration,
reverseCurve: reverseCurve,
reverseDuration: reverseDuration,
animationBehavior: animationBehavior,
debugLabel: debugLabel,
);
CurvedAnimationController.tween(
tween, // ex: ColorTween(begin: Colors.pink, end: Colors.teal)
duration,
vsync: vsync,
curve: curve,
reverseCurve: reverseCurve,
reverseDuration: reverseDuration,
animationBehavior: animationBehavior,
debugLabel: debugLabel,
);
CurvedAnimationController.sequence(
sequence, // list of sequence (List<SequenceItem>)
duration,
vsync: vsync,
curve: curve,
reverseCurve: reverseCurve,
reverseDuration: reverseDuration,
animationBehavior: animationBehavior,
debugLabel: debugLabel,
);
CurvedAnimationController.tweenSequence(
sequence, // TweenSequence
duration,
vsync: vsync,
curve: curve,
reverseCurve: reverseCurve,
reverseDuration: reverseDuration,
animationBehavior: animationBehavior,
debugLabel: debugLabel,
);
Available Methods
Start animation:
start()
or :
forward()
Start animation in reverse direction:
reverse()
Stop animation:
stop()
Start animation with fling effect:
fling()
Animate to specific target value:
animateTo()
Animate back to specific target value:
animateBack()
Reset animation:
reset()
Dispose animation controller:
dispose()
Add animation listener:
addListener()
Remove animation listener:
removeListener()
Add AnimationState listener:
addStateListener()
Remove AnimationState listener:
removeStateListener()
Notify all listeners:
notifyListeners()
356 Dec 12, 2022
1k Jan 9, 2023
3 Nov 4, 2022
143 Dec 10, 2022
3 Sep 29, 2022
427 Nov 26, 2022
271 Oct 31, 2022
3 Sep 22, 2022
266 Nov 20, 2022