Flutter's Tween: The Recipe for Animation
A Tween is a recipe for animation, not the animation itself. It maps a 0.0-1.0 progress value to a concrete value, like a color or position. Use it with an AnimationController to smoothly transition a widget's properties.
Why it exists
Flutter needs a way to calculate intermediate values for animations. An AnimationController just provides a ticking number from 0.0 to 1.0. A Tween bridges the gap between that abstract progress and the concrete property values (like colors, sizes, or positions) you want to animate.
The mental model
Think of a Tween as a stateless mapping function, not a running animation. It's a recipe that says: "Given a progress value 't' between 0.0 and 1.0, here's how to calculate the corresponding value between my 'begin' and 'end' points." The AnimationController provides the 't', and the Tween does the math.
How it works
You create a Tween with begin and end values, for example, Tween<double>(begin: 0, end: 200). You then connect this to an AnimationController by calling myTween.animate(myController). This creates an Animation object. As the controller's value goes from 0.0 to 1.0, the Animation object's .value will go from 0 to 200. The core logic is the lerp (linear interpolation) method, which calculates begin + (end - begin) * t.
When to use it
Use a Tween whenever you need to animate a property between two specific values. This is the most common way to create animations in Flutter for fading (ColorTween), resizing (SizeTween), moving (Tween<Offset>), and more. For constant animations, declare the Tween as a static final variable to avoid recreating it in build methods, which improves performance.
When not to use it
A Tween is for interpolating between two known points. If your animation logic is more complex and doesn't follow a simple begin-to-end path (e.g., it's based on physics), you might use a PhysicsBased simulation instead. A Tween itself also doesn't manage state or lifecycle; you always need a controller like AnimationController to drive it.
One canonical example
To animate a widget's opacity from transparent to opaque, you'd use an AnimationController and a Tween. First, define the controller: _controller = AnimationController(vsync: this, duration: Duration(milliseconds: 500)). Then, define the tween: _opacityTween = Tween<double>(begin: 0.0, end: 1.0). Finally, connect them to create the animation: _opacityAnimation = _opacityTween.animate(_controller). In your build method, you would use this animation's value to set the opacity.
Interview question
Which statement accurately describes the primary role of a Flutter Tween in an animation?
- a.It directly renders the animated changes to a widget on the screen.
- b.It handles complex, non-linear animation paths based on physical properties.
- c.It defines how a 0.0-1.0 progress value is transformed into a specific animated property value.Correct
- d.It manages the animation's duration and playback, such as starting or stopping.
Why? this is the answer
A Tween acts as a stateless mapping function, taking the 0.0-1.0 progress from an AnimationController and calculating the corresponding concrete value (e.g., color, size) between its 'begin' and 'end' points. Option D describes the role of an AnimationController, not the Tween itself.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
- #flutter
- #dart
- #animation
- #tween
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