Widget tree
- Flutter kursu
- Uzman seviye
- Ders 1/39
- 4 dk
Widget ağacının nasıl oluştuğunu ve güncellendiğini öğrenirsin.
Widget tree
widget_tree, Flutter'da widget'ların iç içe dizilimiyle oluşan soyut ağaçtır. Her widget immutable'dır, yani değiştirilemez; state değişince yeni bir widget nesnesi oluşturulur ve ağaç rebuild edilir.
MaterialApp(
home: Scaffold(
body: Center(
child: Text('Merhaba'),
),
),
)Rebuild süreci
rebuild, build metodunun yeniden çağrılmasıdır. State değiştiğinde ilgili widget ve alt widget'ları build ile yeniden oluşturulur. Her rebuild yeni widget nesneleri üretir ama eski Element ağacı korunarak verimli güncelleme yapılır.
Uygulama Widget ağacı oluştur
main içinde bir MaterialApp widget'ı oluştur: home Scaffold, body Center, child Text('Merhaba'). Widget'ın runtimeType'ını yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
// MaterialApp, Scaffold, Center ve Merhaba metnini iç içe oluştur
// runtimeType yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
void main() {
final widget = MaterialApp(
home: Scaffold(
body: Center(
child: const Text('Merhaba'),
),
),
);
print(widget.runtimeType);
}Beklenen çıktı
MaterialApp
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir widget'ın state'i değiştiğinde ne olur?
- Uygulama çöker
- Hiçbir şey olmaz
- Yeni bir widget nesnesi oluşturulur ve ağaç rebuild edilir Doğru cevap
- Widget nesnesi değiştirilir
Açıklama: Widget'lar immutable olduğu için state değiştiğinde widget nesnesi güncellenemez; yenisi oluşturulur ve build metodu yeniden çağrılır.
2 Widget ağacına Center ekle
MaterialApp(
home: Scaffold(
body: ____(child: Text('Merhaba')),
),
)MaterialApp(
home: Scaffold(
body: Center(child: Text('Merhaba')),
),
)Açıklama: Center, çocuğunu ortalar; widget ağacında Scaffold body'sinin çocuğu olarak kullanılır.
3 Widget tree eşleşmeleri
| Kavram | Anlamı |
|---|---|
widget_tree |
Widget iç içe dizilimi |
immutable |
Değiştirilemez |
rebuild |
build'i yeniden çağırır |
build |
Widget döndürür |