AnimationsMedium30 XP3 min read

What is the difference between AnimatedWidget, AnimatedBuilder, and Transition widgets?

TL;DR: AnimatedWidget: extends it to create a self-contained animated widget (holds its own listener). AnimatedBuilder: builder pattern for embedding animations in widget trees without subclassing. Transition widgets (FadeTransition, SlideTransition): pre-built composable animated widgets that take an Animation<T>.

Full Answer

Aspect	Approach	When to use
AnimatedWidget	Subclass it, override build()	Creating reusable animated widgets (like a spinning logo)
AnimatedBuilder	builder: (context, child) {} callback	Embedding animation in an existing widget tree; child param for expensive subtrees
FadeTransition etc.	Wrap existing widgets	Standard transitions — always prefer these when they fit

🎯

AnimatedBuilder's child parameter is key for performance: pass expensive subtrees as child — they're only built once, not on every animation frame.

Code Examples

dartAnimatedBuilder with child optimization

Output

// AnimatedBuilder: child FlutterLogo built ONCE
// Each frame: only Transform.rotate rebuilds
// Without child param: FlutterLogo rebuilt 60x/sec

Common Mistakes

✗Not using AnimatedBuilder's child parameter — rebuilding expensive subtrees on every animation frame causes jank
✗Implementing a custom AnimatedWidget when FadeTransition/SlideTransition already exists

Interview Tip

💡

The child optimization in AnimatedBuilder is a key performance technique. Show you know: widgets in child are built once and reused, while builder {} runs every frame. This prevents unnecessary widget rebuilds during animation.

#AnimatedWidget#AnimatedBuilder#Transition#animation

How do you create staggered animations in Flutter?

How do you integrate Lottie and Rive animations in Flutter?