AnimatedBuilder
- Flutter course
- Intermediate
- Lesson 78/99
- 4 min
Rebuild UI each frame with AnimatedBuilder.
What is AnimatedBuilder?
AnimatedBuilder is a widget that listens to an Animation and rebuilds the UI on every frame. You pass the Animation object to the animation parameter and a function taking (context, child) to the builder parameter.
AnimatedBuilder(
animation: animasyon,
builder: (context, child) {
return Container(width: animasyon.value);
},
)This widget calls builder again every time the animation updates.
The animation and builder parameters
The animation parameter takes an Animation<double> object. The builder is a function with the signature (BuildContext context, Widget? child); it is called on every frame and returns a Widget. The child parameter is used to efficiently pass child widgets that do not change between frames.
AnimatedBuilder(
animation: animasyon,
builder: (context, child) {
return Opacity(opacity: animasyon.value, child: child);
},
child: const Text('Selam'),
)Practice Use AnimatedBuilder
Define a StatelessWidget named Ornek with a required final Animation<double> animasyon field. Its build method should return an AnimatedBuilder with animation set to animasyon and builder returning a Container. Print 'hazir' in main.
Starter code
import 'package:flutter/material.dart';
class Ornek extends StatelessWidget {
final Animation<double> animasyon;
const Ornek({super.key, required this.animasyon});
// build metodu AnimatedBuilder döndürsün
// animation parametresi animasyon alsın
// builder Container döndürsün
}
void main() {
// 'hazir' yazdır
}Sample solution
import 'package:flutter/material.dart';
class Ornek extends StatelessWidget {
final Animation<double> animasyon;
const Ornek({super.key, required this.animasyon});
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animasyon,
builder: (context, child) {
return Container();
},
);
}
}
void main() {
print('hazir');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What object does AnimatedBuilder listen to?
- Tween
- Future
- Animation Correct answer
- Stream
Explanation: AnimatedBuilder listens to an Animation object and calls builder on every update. Future and Stream are for async operations, and Tween is a value transition class; AnimatedBuilder does not listen to these.
2 The builder parameter
AnimatedBuilder(
animation: animasyon,
____: (context, child) {
return Container();
},
)AnimatedBuilder(
animation: animasyon,
builder: (context, child) {
return Container();
},
)Explanation: builder is the function parameter that AnimatedBuilder calls on every frame. build is a method name but not a parameter name, child is the inner widget, and widget is a general type.
3 AnimatedBuilder parts
| Term | Meaning |
|---|---|
animation |
The Animation being listened to |
builder |
Function called on every frame |
context |
Build context |
child |
Static child widget |