Element tree
- Flutter kursu
- Uzman seviye
- Ders 2/39
- 4 dk
Element ağacının widget ile render arasındaki bağ olduğunu öğrenirsin.
Element tree
Element ağacı, widget ağacı ile render ağacı arasındaki bağdır. Her widget için bir Element oluşturulur; element widget'ı mount eder, state ve bağlam tutar. Widget'lar her rebuild'de yenilense de elementler korunur ve sadece update edilir.
// Her StatelessWidget için bir Element oluşturulur
element.update(newWidget);mount ve update
mount, elementin ağaca ilk kez eklenmesi; update ise mevcut elementin yeni widget ile güncellenmesidir. Elementler korunduğu için rebuild ucuzdur: sadece update çağrılır.
Uygulama StatelessWidget tanımla
MyWidget adında bir StatelessWidget tanımla. build metodu Container(child: Text('Selam')) döndürsün. main içinde const MyWidget() örneği al ve runtimeType yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// MyWidget StatelessWidget olsun
// build metodu Selam metnini içeren bir Container döndürsün
void main() {
// MyWidget örneği al ve runtimeType yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Container(child: const Text('Selam'));
}
}
void main() {
final widget = const MyWidget();
print(widget.runtimeType);
}Beklenen çıktı
MyWidget
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Element ağacı neyin arasında köprü görevi görür?
- Bellek ve disk
- State ve BuildContext
- İki widget
- Widget ağacı ve render ağacı Doğru cevap
Açıklama: Element ağacı, widget ağacını (soyut tanım) ile render ağacına (çizim) bağlayan ara katmandır; her widget için bir element oluşur.
2 Element'i güncelle
element.____(newWidget);element.update(newWidget);Açıklama: Mevcut element yeni widget ile güncellenirken update çağrılır; mount yalnızca ilk eklemede, dispose ağaçtan çıkarılmada kullanılır.
3 Element tree eşleşmeleri
| Kavram | Anlamı |
|---|---|
Element |
Widget-render bağlayıcı |
mount |
İlk ağaca ekleme |
update |
Widget değiştiğinde güncelleme |
BuildContext |
Element'in kendisi |