What is a Tween and how does CurvedAnimation work?
TL;DR: A Tween maps an animation's 0.0–1.0 range to any value range (e.g., 0.0–300.0 for size, Colors.red to Colors.blue). CurvedAnimation wraps a controller and applies an easing curve to the raw linear value.
Full Answer
Tweens and curves are the two tools that make raw AnimationController values useful for UI.
Tween
A Tween<T> interpolates between a begin and end value. Call tween.animate(controller) to get an Animation<T> that outputs the interpolated value.
CurvedAnimation
CurvedAnimation wraps an AnimationController and remaps its linear 0→1 progress through a Curve like Curves.easeInOut, Curves.bounceOut, or a custom cubic bezier.
Chain them: Tween.animate(CurvedAnimation(parent: controller, curve: Curves.easeOut)) — the tween sees the curved values, not the raw linear ones.
Code Examples
// Box smoothly grows from 50→200 and red→blue with ease-in-out curve
Common Mistakes
- ✗Calling tween.evaluate(controller) instead of tween.animate(controller) — evaluate gives a single snapshot, not a live animation
- ✗Applying curve after the tween instead of before
Interview Tip
Mention that Tween.lerp() is at the core — it's just begin + (end - begin) * t. CurvedAnimation transforms t before lerp sees it.