An example project demonstrating how to animate gradients!
Run the app as you normally do with Flutter!
- Define a begin and end gradient
- Every time the user scrolls, calculate how far down the list we are from 0.0 (top) - 1.0 (bottom)
- Use
beginGradient.lerpTo(endGradient, 0.7)
- Implement a Tween class, using static the
lerp
methods provide by theLinearGradient
class. - Create an
Animation<LinearGradient>
from the Tween using anAnimationController
:final animation = tween.animate(controller);
- Redraw the gradient animation every time it changes using an
AnimatedBuilder
- Provide a button to trigger the animation forward / backward