CurvedAnimation: Animate with Easing and Personality
CurvedAnimation makes animations feel natural by applying a timing curve to another animation. Instead of linear motion, widgets can ease-in or bounce. Footgun: Elastic curves can overshoot the standard 0.0-1.0 range, causing unexpected UI behavior.
WHY IT EXISTS Raw animations, like those from an AnimationController, progress linearly from 0.0 to 1.0. This constant speed feels robotic and unnatural in a user interface. CurvedAnimation was created to transform this linear progression into something more organic and physically plausible, like an object accelerating or bouncing to a stop.
THE MENTAL MODEL Think of CurvedAnimation as a "timing translator." It takes a steady, predictable input signal (the parent animation's linear progress) and translates it into an expressive output signal (the curved value) based on a set of instructions you provide in the form of a Curve object.
HOW IT WORKS You create a CurvedAnimation by wrapping an existing animation, which you pass as the parent property. You also provide a curve, such as Curves.easeIn. The CurvedAnimation then produces a new animation whose value is the parent's value transformed by the curve's logic. Its key feature is the optional reverseCurve property, which lets you apply a different curve when the animation plays backward.
WHEN TO USE IT Use CurvedAnimation whenever you want to apply non-linear motion to an animation, which is almost always for good UI. It's the standard way to add easing to an AnimationController. It is essential when you need different easing for forward and reverse playback, like a fast entry (easeIn) and a slow exit (easeOut).
WHEN NOT TO USE IT If you are applying a curve directly within a Tween definition and do not need separate forward/reverse curves, the simpler CurveTween might be a better fit. For purely linear motion (which is rare for good UX), you don't need to apply a curve at all.
ONE CANONICAL EXAMPLE A common use is to make a widget fade in with acceleration. You would create an AnimationController, then wrap it in a CurvedAnimation with curve: Curves.easeIn. This new animation object can then drive a FadeTransition widget, making the fade-in effect feel much smoother and more polished than a linear fade.
Read the original → api.flutter.dev
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.