Bölüm 2 — Konu 5: "Her Şey Widget'tır" Felsefesi, Widget Ağacı

Bölüm 2'ye hoş geldin — artık gerçekten kod yazmaya başlıyoruz. Bölüm 1 Konu 1'de kısaca değindiğimiz "her şey widget'tır" felsefesini şimdi derinlemesine işleyeceğiz.

#Widget Nedir? — Dart Bilginle Tam Bir Tanım

Bölüm 1'de widget'ları "ekranda bir şeyi tarif eden açıklamalar" olarak tanımlamıştık. Şimdi Dart bilginle daha kesin bir tanım yapalım: her widget, Dart'ta Widget sınıfından türeyen bir class'tır (Dart Bölüm 7'de öğrendiğimiz extends kalıtımı).

import 'package:flutter/material.dart';

class SelamWidget extends StatelessWidget {
  const SelamWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Text('Merhaba Flutter!');
  }
}

Bu, senin kendi yazdığın ilk widget'ın. Dikkat et — bu tamamen tanıdık bir Dart class'ı: extends (Bölüm 7), constructor (Bölüm 6), @override (Bölüm 7), bir metod (build) — hepsi zaten bildiğin kavramlar.

#"Her Şey" Derken Gerçekten Her Şey

Flutter'da şaşırtıcı derecede çok şey widget'tır — sadece görsel öğeler değil:

Padding(          // bu bile bir widget! (boşluk ekleme)
  padding: const EdgeInsets.all(16.0),
  child: Text('Merhaba'),
)

Padding, ekranda kendi başına görünmeyen, sadece çocuğuna (child) boşluk ekleyen bir widget'tır. Bu, Flutter'ın felsefesini gösteriyor: layout (yerleşim), stil, davranış — hepsi widget'lar aracılığıyla ifade edilir, ayrı bir "stil dili" veya "layout dili" yoktur. Bölüm 6'da (Dart) öğrendiğimiz kompozisyon ilkesinin, burada UI tasarımına uygulandığını görüyorsun.

#Widget Ağacı — Somut Bir Örnek

class OrnekWidget extends StatelessWidget {
  const OrnekWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          color: Colors.blue,
          child: Text('Merhaba, Flutter!'),
        ),
      ),
    );
  }
}

Bu kod, şu ağacı oluşturuyor:

Center
  └── Padding
        └── Container (mavi renk)
              └── Text('Merhaba, Flutter!')

Her widget'ın tek bir görevi var:

• Center: çocuğunu ortalar.
• Padding: çocuğunun etrafına boşluk ekler.
• Container: bir arka plan rengi (ve başka birçok özellik) sağlar.
• Text: metni gösterir.

Bu, Dart Bölüm 7'de öğrendiğimiz "her class'ın tek bir sorumluluğu olmalı" (single responsibility) mantığının UI'a uygulanmış hali — büyük, her şeyi yapan tek bir widget yerine, küçük, tek işi yapan widget'ları iç içe geçirerek karmaşık arayüzler kuruyorsun.

#child Parametresi — Tek Çocuklu Widget'lar

Yukarıdaki örnekte, her widget'ın bir child parametresi vardı — bu, Dart Bölüm 5'te öğrendiğimiz named parametreler'dir:

Center(
  child: Text('Merhaba'),
)

Center'ın constructor'ı, child adında bir named parametre alıyor (Dart Bölüm 5 Konu 21'i hatırla — {required this.child} gibi bir tanım, aslında Flutter'ın kendi kaynak kodunda böyle yazılmış). Bu widget'lar tek bir çocuk alabilir — o çocuğu "sarmalar" (wrap eder) ve ona bir davranış/stil ekler.

#children Parametresi — Çoklu Çocuklu Widget'lar

Bazı widget'lar, birden fazla çocuk alabilir — bu durumda parametre adı children (çoğul) olur ve bir List<Widget> alır (Dart Bölüm 4'ü hatırla!):

Column(
  children: [
    Text('Birinci satır'),
    Text('İkinci satır'),
    Text('Üçüncü satır'),
  ],
)

Column, çocuklarını dikey olarak sıralar (bunu Bölüm 2 Konu 7'de tam olarak işleyeceğiz). Buradaki children: [...], Dart Bölüm 4'te öğrendiğimiz liste literal sözdizimidir — hiçbir yeni şey öğrenmene gerek yok, sadece bir widget'ın parametresi olarak bir liste geçiriyorsun.

#Widget'lar Neden immutable (Değişmez)?

Dart Bölüm 2'de final ve const kavramlarını öğrenmiştik. Flutter'da widget'ların hemen tüm alanları final'dır ve widget'ın kendisi genelde const olarak oluşturulabilir:

class MyWidget extends StatelessWidget {
  final String mesaj; // final — Dart Bölüm 6'yı hatırla

  const MyWidget({super.key, required this.mesaj}); // const constructor

  @override
  Widget build(BuildContext context) {
    return Text(mesaj);
  }
}

Neden bu kadar önemli? Bölüm 1 Konu 1'de öğrendiğimiz Widget/Element/RenderObject ayrımını hatırlarsan — widget'lar, "ne isteniyor" açıklamasıdır ve her rebuild'de yeniden oluşturulabilirler (bu, ucuz bir işlemdir çünkü widget'lar hafif nesnelerdir). Değişmez olmaları, Dart Bölüm 13 Konu 62'de öğrendiğimiz const nesnelerin bellek paylaşımı avantajını doğrudan kullanmalarını sağlar — aynı const widget, birden fazla yerde tek bir bellek konumunu paylaşarak kullanılabilir, gereksiz yeniden oluşturmadan kaçınılır.

#build() Metodu — Widget'ın "Ne İstediğini" Tarif Etmesi

@override
Widget build(BuildContext context) {
  return Text('Merhaba');
}

Her widget'ın (StatelessWidget veya StatefulWidget, Bölüm 2 Konu 6'da tam olarak göreceğiz) bir build() metodu vardır — bu, Dart Bölüm 7'de öğrendiğimiz override edilen bir metoddur (üst sınıf StatelessWidget'tan geliyor). build()'in görevi, widget ağacının bu parçasının nasıl görünmesi gerektiğini döndürmektir — Flutter, bu metodu gerektiğinde (widget yeniden oluşturulması gerektiğinde) çağırır.

BuildContext context parametresi nedir? Şimdilik, context'i "bu widget'ın ağaçtaki konumu hakkında bilgi taşıyan bir nesne" olarak düşün — Bölüm 4'te (tema, MediaQuery gibi konularda) bunun gerçek gücünü göreceğiz. Şu an sadece build() metodunun her zaman bu parametreyi aldığını bil.

#Küçük Bir Pratik — Kendi Widget'ını Yazma

import 'package:flutter/material.dart';

class KarsilamaKarti extends StatelessWidget {
  const KarsilamaKarti({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(20.0),
      child: Container(
        color: Colors.amber,
        child: Column(
          children: [
            Text('Hoş Geldin!'),
            Text('Flutter öğreniyorsun'),
          ],
        ),
      ),
    );
  }
}

Bu widget, kendi başına yeniden kullanılabilir bir bileşendir — Dart Bölüm 6'da öğrendiğimiz "sınıflar yeniden kullanılabilir yapı taşlarıdır" prensibinin, UI dünyasındaki karşılığı. Bunu, uygulamanın herhangi bir yerinde, KarsilamaKarti() yazarak kullanabilirsin — tıpkı kendi yazdığın bir Dart class'ını başka bir yerde Kisi() diye kullanman gibi.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Her widget, Dart'ta Widget'tan (veya StatelessWidget/StatefulWidget gibi ara sınıflardan) türeyen bir class'tır — Dart'ta öğrendiğin extends, @override, constructor kavramları doğrudan geçerlidir.
• Widget'lar, tek bir görevi olan küçük parçalar halinde tasarlanır ve iç içe geçirilerek (kompozisyon) karmaşık arayüzler oluşturulur.
• child (tekil) ve children (List, çoğul) parametreleri, widget'ların nasıl iç içe geçtiğini belirler.
• Widget'lar genelde immutabledır (final alanlar, const constructor) — bu, performans ve bellek avantajı sağlar (Dart Bölüm 13'ü hatırla).
• build(BuildContext context), her widget'ın "ne görüneceğini" tarif eden, override edilen bir metoddur.

#📝 Ödevler

• [ ] StatelessWidget'tan türeyen, en az 3 seviye iç içe widget (örn. Center → Padding → Text) içeren kendi widget'ını yaz.
• [ ] Column ile children parametresine en az 3 Text widget'ı ekleyen bir örnek yaz.
• [ ] Kendi widget'ının hangi alanlarının final olduğunu belirle, neden final olmaları gerektiğini (Dart Bölüm 6/13 bağlamında) açıkla.
• [ ] Bir widget'ı, uygulamanın (varsayılan sayaç uygulamasının) içinde iki farklı yerde kullanarak, yeniden kullanılabilirliğini kanıtla.
• [ ] Kendi cümlelerinle, "Flutter'da neden ayrı bir 'stil dili' yok, her şey widget üzerinden ifade ediliyor" sorusunu, kompozisyon kavramıyla ilişkilendirerek açıkla.

Sıradaki konu: Bölüm 2 — Konu 6: StatelessWidget vs StatefulWidget + setState() Derinlemesine (Rebuild Mekanizması)