AnimatedBuilder: Isolate Animation Rebuilds for Performance
Flutter's AnimatedBuilder rebuilds only the widgets that change during an animation, not the entire screen. Use it to embed a moving part within a larger static widget, like a spinning icon on a button, to maximize performance.
Why it exists
In Flutter, animations can trigger 60 rebuilds per second. If an animation is part of a large, complex widget, rebuilding the entire widget 60 times is computationally expensive and can cause jank. AnimatedBuilder was created to solve this by rebuilding only a small, targeted part of the widget tree.
The mental model
Think of AnimatedBuilder as a surgical tool for UI updates. Instead of making your whole widget a StatefulWidget to manage an animation, you wrap just the moving part in an AnimatedBuilder. It listens for ticks from an animation and rebuilds only its small builder function, leaving the rest of your UI untouched and performant.
How it works
You provide an AnimatedBuilder with a Listenable (like an AnimationController) and a builder function. Whenever the Listenable notifies its listeners, AnimatedBuilder calls your builder function to reconstruct just that part of the widget tree. For a major performance boost, you can define a static part of your UI once, pass it to AnimatedBuilder's child parameter, and it will be passed into your builder without being rebuilt on every frame.
When to use it
Use AnimatedBuilder when you need to animate a widget that is part of a larger, more complex widget tree. It excels at decoupling animation logic from widget build logic, which improves both readability and performance. A spinning icon on a card or a pulsing button are perfect use cases.
When not to use it
For very simple cases where the entire widget is the animation, extending AnimatedWidget can be simpler. For implicit animations where you just want to animate a property to a new value (e.g., fade in), TweenAnimationBuilder is easier as it manages its own controller. If your listenable is not an Animation (like a ChangeNotifier), use ListenableBuilder for better code clarity, though it is functionally identical.
One canonical example
To create a continuously spinning square without rebuilding its parent, you would use an AnimationController. You'd wrap a Transform.rotate widget inside an AnimatedBuilder that listens to the controller. The Container for the square itself, which doesn't change, would be passed as the child to the AnimatedBuilder. This ensures only the rotation is recalculated each frame, not the square's color, shape, or size.
Interview question
What is the main problem Flutter's AnimatedBuilder solves in animation performance?
- a.Enabling complex animations to run on a background thread to prevent UI jank.
- b.Allowing animations to be defined declaratively without explicit controllers.
- c.Preventing memory leaks from undisposed AnimationControllers.
- d.Avoiding unnecessary rebuilds of large, static parts of the widget tree during an animation.Correct
Why? this is the answer
The card states AnimatedBuilder was created to solve the problem of rebuilding entire complex widgets 60 times per second during an animation, by instead rebuilding only a small, targeted part. The other options describe different animation approaches or incorrect mechanisms.
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