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.
Interview question
What is the main purpose of using a CurvedAnimation in Flutter?
- a.To transform a linear animation's progress into a more natural, non-linear motion.Correct
- b.To ensure an animation always stays within the 0.0 to 1.0 value range.
- c.To control the speed and repetition of an animation.
- d.To directly animate multiple properties of a widget simultaneously.
Why? this is the answer
CurvedAnimation's primary role is to apply a timing curve to a linear animation, making its progression feel more natural and expressive, like easing or bouncing. Option B is incorrect because the card specifically warns that elastic curves can cause values to overshoot the 0.0-1.0 range.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles