TweenAnimationBuilder: Animate Anything Implicitly
TweenAnimationBuilder animates any widget property without a complex AnimationController. Just give it a target value, duration, and curve. Use it for one-off animations where a full controller is overkill.
Why it exists
TweenAnimationBuilder was created to provide a simple way to animate a single property of a widget without the boilerplate of creating and managing an AnimationController. It fills the gap between pre-built animated widgets, like AnimatedContainer, and fully manual animations that require an AnimatedBuilder and your own controller.
The mental model
Think of it as a "set it and forget it" animation widget. You give it a Tween (which defines the start and end values), a duration, and a curve. Whenever the end value of the Tween changes, the builder automatically animates from its current value to the new target. It handles the animation lifecycle for you.
How it works
TweenAnimationBuilder is a stateful widget that internally manages its own AnimationController. When it first builds, it animates from the Tween.begin value to Tween.end. If you rebuild the widget with a new Tween that has a different end value, it triggers a new animation from the current value to the new end. Its builder function is called on every tick of the animation, providing the interpolated value which you use to build your widget.
When to use it
Use it for simple, stateless animations on any widget property. For example, animating the size of an icon, changing a border color, or adjusting padding when a state variable changes. It's ideal when a pre-built widget like AnimatedOpacity doesn't exist for the property you want to animate.
When not to use it
Don't use it if you need complex control over the animation, like pausing, reversing, or looping. For that, use an AnimatedBuilder and manage your own AnimationController. Also, if a specific ImplicitlyAnimatedWidget like AnimatedContainer already does what you need, prefer it for its simplicity.
One canonical example
A common use case is an IconButton that changes its size on press. You wrap the Icon in a TweenAnimationBuilder with a Tween<double> for the size. When the button is pressed, you update a state variable that determines the end value of the Tween. The builder automatically animates the size change. The main footgun is to not use the child parameter for parts of the UI that don't depend on the animation, which causes them to rebuild unnecessarily on every frame and hurts performance.
Interview question
For which animation scenario is TweenAnimationBuilder the most appropriate tool?
- a.For coordinating complex animations across multiple widgets with interdependent values.
- b.When you need to animate a single widget property implicitly without managing an AnimationController.Correct
- c.When a dedicated ImplicitlyAnimatedWidget like AnimatedOpacity already exists for the property.
- d.When you require explicit control over animation states like pausing, reversing, or looping.
Why? this is the answer
TweenAnimationBuilder is designed for simple, stateless animations of a single property, bridging the gap when a specific ImplicitlyAnimatedWidget doesn't exist and you want to avoid the boilerplate of an AnimationController. Option D describes scenarios requiring an AnimationController, and Option C suggests using it when a simpler, dedicated widget already exists, which is inefficient.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
- #flutter
- #dart
- #animation
- #widget
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