Flutter
AnimatedBuilder
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.
Örnek çözümü göster
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');
}
Kendini test et
-
AnimatedBuilder hangi nesneyi dinler?
- Tween
- Future
- Animation
- Stream
Cevabı göster
Animation — 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.
-
builder parametresi
AnimatedBuilder(
animation: animasyon,
____: (context, child) {
return Container();
},
)
Cevabı göster
AnimatedBuilder(
animation: animasyon,
builder: (context, child) {
return Container();
},
)
-
AnimatedBuilder parçaları
- animation
- dinlenen Animation
- builder
- her karede çağrılan fonksiyon
- context
- build bağlamı
- child
- sabit alt widget
Sıradaki ders: Curve
