AnimatedBuilder
- Flutter kursu
- Orta seviye
- Ders 78/99
- 4 dk
AnimatedBuilder ile her frame'de arayüzü çizmeyi öğrenirsin.
AnimatedBuilder nedir?
AnimatedBuilder, bir Animation'ı dinleyip her karede arayüzü yeniden çizen bir widget'tır. animation parametresine Animation nesnesini, builder parametresine ise (context, child) alan bir fonksiyon verirsin.
AnimatedBuilder(
animation: animasyon,
builder: (context, child) {
return Container(width: animasyon.value);
},
)Bu widget, animasyon her güncellendiğinde builder'ı tekrar çağırır.
animation ve builder parametreleri
animation parametresi bir Animation<double> nesnesi alır. builder ise (BuildContext context, Widget? child) imzasına sahip bir fonksiyondur; her karede çağrılır ve bir Widget döndürür. child parametresi, her karede değişmeyen alt widget'ları verimli şekilde geçirmek için kullanılır.
AnimatedBuilder(
animation: animasyon,
builder: (context, child) {
return Opacity(opacity: animasyon.value, child: child);
},
child: const Text('Selam'),
)Uygulama AnimatedBuilder kullan
Ornek adında bir StatelessWidget tanımla. final Animation<double> animasyon alanı required olsun. build metodu bir AnimatedBuilder döndürsün; animation animasyon olsun ve builder bir Container döndürsün. main içinde 'hazir' yazdır.
Başlangıç kodu
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
}Örnek çözüm
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');
}Beklenen çıktı
hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 AnimatedBuilder hangi nesneyi dinler?
- Tween
- Future
- Animation Doğru cevap
- Stream
Açıklama: AnimatedBuilder bir Animation nesnesini dinler ve her güncellemede builder'ı çağırır. Future ve Stream async işlemler içindir, Tween ise değer geçiş sınıfıdır; AnimatedBuilder bunları dinlemez.
2 builder parametresi
AnimatedBuilder(
animation: animasyon,
____: (context, child) {
return Container();
},
)AnimatedBuilder(
animation: animasyon,
builder: (context, child) {
return Container();
},
)Açıklama: builder, AnimatedBuilder'ın her karede çağırdığı fonksiyon parametresidir. build bir metot adıdır ama parametre adı değildir, child alt widget'tır, widget ise genel bir türdür.
3 AnimatedBuilder parçaları
| Kavram | Anlamı |
|---|---|
animation |
dinlenen Animation |
builder |
her karede çağrılan fonksiyon |
context |
build bağlamı |
child |
sabit alt widget |