https://github.com/brianegan/gradient_animations

An example of how to animate gradients in flutter
https://github.com/brianegan/gradient_animations

animation flutter gradients

Last synced: 11 days ago
JSON representation

An example of how to animate gradients in flutter

• Host: GitHub
• URL: https://github.com/brianegan/gradient_animations
• Owner: brianegan
• Created: 2018-06-30T12:13:07.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-30T12:23:55.000Z (over 6 years ago)
• Last Synced: 2024-12-25T20:11:59.434Z (15 days ago)
• Topics: animation, flutter, gradients
• Language: Dart
• Size: 11.6 MB
• Stars: 62
• Watchers: 3
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gradient_animation

An example project demonstrating how to animate gradients!



## Getting Started

Run the app as you normally do with Flutter!

## Key Concepts

### Animations with ScrollController

  1. Define a begin and end gradient

  2. Every time the user scrolls, calculate how far down the list we are from 0.0 (top) - 1.0 (bottom) 

  3. Use `beginGradient.lerpTo(endGradient, 0.7)`

### Animations with Tweens

  1. Implement a Tween class, using static the `lerp` methods provide by the `LinearGradient` class.

  2. Create an `Animation` from the Tween using an `AnimationController`: `final animation = tween.animate(controller);`

  3. Redraw the gradient animation every time it changes using an `AnimatedBuilder`

  4. Provide a button to trigger the animation forward / backward