Widget ağacı
- Flutter kursu
- Başlangıç
- Ders 12/99
- 4 dk
Widget'ların iç içe bir ağaç oluşturduğunu öğrenirsin.
Widget ağacı
Widget'lar iç içe geçerek bir ağaç (widget tree) oluşturur. Her widget'ın bir ebeveyni (parent) vardır; kök widget hariç. Bir widget'ın altında yer alan widget'a child denir. Flutter bu ağacı yürüyerek ekrandaki pikselleri üretir.
MaterialApp(
home: Scaffold(
body: Center(
child: Text('Ağaçta'),
),
),
)parent ve child ilişkisi
Parent widget, child widget'ı saran dış widget'tır. Center, Text widget'ını sardığında Center parent, Text child olur. Bazı widget'lar tek child alır (Center, Padding); bazıları birden çok child alır (Column, Row).
Center(
child: Text('ben child'),
)
// Center: parent
// Text: childUygulama İlişkiyi döndür
iliski adında bir fonksiyon yaz: bir String s parametresi alsın. s == 'Center' ise 'parent', s == 'Text' ise 'child', değilse 'unknown' döndürsün. main içinde iliski('Center') ve iliski('Text') çağrılarını print ile yazdır.
Başlangıç kodu
void main() {
// iliski('Center') ve iliski('Text') çağrılarını print ile yazdır
}
// iliski fonksiyonunu tanımla
// 'Center' dönerse 'parent', 'Text' dönerse 'child', değilse 'unknown'Örnek çözüm
void main() {
print(iliski('Center'));
print(iliski('Text'));
}
String iliski(String s) {
if (s == 'Center') return 'parent';
if (s == 'Text') return 'child';
return 'unknown';
}Beklenen çıktı
parent child
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir widget'ın altında yer alan widget'a ne denir?
- root
- sibling
- child Doğru cevap
- parent
Açıklama: Parent'ın içindeki widget'a child denir; parent child'ı sarar.
2 Parent-child bağla
Center(
____: Text('içte'),
)Center(
child: Text('içte'),
)Açıklama: Center widget'ı child parametresiyle bir alt widget alır.
3 Ağaç terimleri
| Kavram | Anlamı |
|---|---|
widget tree |
Widget'ların iç içe yapısı |
parent |
Child'ı saran dış widget |
child |
Parent'ın içindeki widget |
root widget |
Ağacın en üstteki widget'ı |