Bölüm 12 — Konu 56: Custom `RenderObject` Yazımı

Bölüm 8 Konu 38'de CustomPainter ile çizim katmanına doğrudan erişmeyi öğrenmiştik — ama CustomPainter'ın bir sınırı vardı: sana verilen bir alana (size) çizim yapıyordun, o alanın nasıl hesaplandığına (layout) karışamıyordun. Bu derste, Bölüm 1 Konu 1'den beri zihinsel model olarak taşıdığımız Widget → Element → RenderObject mimarisinin en alt katmanına, kendi layout mantığını yazabileceğin yere iniyoruz.

#Ne Zaman CustomPainter Yetmez?

CustomPainter, "bana verilen dikdörtgen alana ne çizeceğim" sorusuna cevap verir. Ama şu soruları cevaplayamaz:

• Bu widget'ın boyutu ne olmalı, ebeveyninden gelen constraint'lere göre?
• Birden fazla çocuk widget'ı, standart Row/Column/Stack'in sunmadığı özel bir düzende (örneğin dairesel, spiral, ya da veri odaklı bir algoritmaya göre) nasıl yerleştiririm?

Bu sorular, Bölüm 2 Konu 8'de öğrendiğimiz "constraints go down, sizes go up" ilkesinin bizzat kendisini yazmayı gerektirir — işte bunun için RenderObject'e doğrudan ineriz.

#Üç Katman — Kimin İşi Ne?

Widget       → "Ne istiyorum" (değişmez, hafif, her build()'de yeniden oluşturulur)
Element      → Widget ile RenderObject arasındaki "yaşayan" köprü (durumu taşır)
RenderObject → "Nasıl olacak" (layout hesaplar, çizer — PAHALI, elden geldiğince yeniden kullanılır)

Bölüm 1'den beri bildiğin bu üçlüyü, şimdi elle yazacağız. CustomPainter (Konu 38), aslında arka planda senin için bir RenderObject (RenderCustomPaint) oluşturuyordu — bu ders, o "arka planı" sana gösteriyor.

#En Basit Örnek — Sabit Bir Kenar Boşluğu Ekleyen RenderObject

Flutter'ın kendi Padding widget'ının basitleştirilmiş bir versiyonunu elle yazarak başlayalım — amaç Padding'i yeniden icat etmek değil, mekanizmayı görmek:

class OzelKenarBoslugu extends SingleChildRenderObjectWidget {
  final double miktar;

  const OzelKenarBoslugu({super.key, required this.miktar, super.child});

  @override
  RenderObject createRenderObject(BuildContext context) {
    return _OzelKenarBosluguRenderObject(miktar: miktar);
  }

  @override
  void updateRenderObject(BuildContext context, _OzelKenarBosluguRenderObject renderObject) {
    renderObject.miktar = miktar; // widget güncellendiğinde RenderObject'i güncelle
  }
}

class _OzelKenarBosluguRenderObject extends RenderShiftedBox {
  double _miktar;
  double get miktar => _miktar;
  set miktar(double deger) {
    if (_miktar == deger) return;
    _miktar = deger;
    markNeedsLayout(); // DEĞERİ DEĞİŞTİ — yeniden layout hesapla!
  }

  _OzelKenarBosluguRenderObject({required double miktar, RenderBox? child})
      : _miktar = miktar,
        super(child);

  @override
  void performLayout() {
    if (child == null) {
      size = constraints.smallest;
      return;
    }

    // Çocuğa, kendi boyutumuzdan kenar boşluğu kadar KÜÇÜLTÜLMÜŞ constraint ver
    final cocukConstraints = constraints.deflate(EdgeInsets.all(miktar));
    child!.layout(cocukConstraints, parentUsesSize: true);

    // Bizim boyutumuz = çocuğun boyutu + kenar boşlukları
    size = constraints.constrain(
      Size(child!.size.width + miktar * 2, child!.size.height + miktar * 2),
    );

    // Çocuğu, kenar boşluğu kadar İÇERİ kaydır
    (child!.parentData as BoxParentData).offset = Offset(miktar, miktar);
  }
}

Parça parça inceleyelim:

SingleChildRenderObjectWidget — Dart Bölüm 7'de öğrendiğimiz extends; Flutter'ın, tek bir çocuğu olan ve bu çocuğun layout'unu özelleştiren widget'lar için sunduğu hazır bir temel sınıf (Padding, Align, Center gibi widget'lar hep bunu kullanır).

createRenderObject(context) — widget ilk kez oluşturulduğunda çağrılır; gerçek RenderObject'i üretir. Bu, Bölüm 6 Konu 24'te Provider'ın create: parametresiyle (bir kere oluştur, sonra yeniden kullan) kavramsal olarak aynı fikir.

updateRenderObject(context, renderObject) — widget yeniden build() edildiğinde (yeni bir miktar değeriyle bile), Flutter yeni bir RenderObject oluşturmaz — var olanı günceller. Bu, RenderObject'in neden pahalı ve yeniden kullanılabilir olduğunu gösteren en somut örnek.

markNeedsLayout() — bu satır, tüm Flutter'ın reaktivitesinin temelidir. Bölüm 2 Konu 6'da öğrendiğimiz setState()'in, en dipte ne yaptığını şimdi görüyorsun: bir değer değiştiğinde, markNeedsLayout() (ya da sadece görünümü etkiliyorsa markNeedsPaint()) çağrılır — bu, Flutter'a "bu RenderObject'i bir sonraki karede yeniden hesapla" der. setState(), aslında çok daha üst seviyede, bu mekanizmayı senin için tetikleyen bir kolaylık.

performLayout() — asıl layout mantığının yazıldığı yer. constraints (Bölüm 2 Konu 8'de öğrendiğimiz kavram, burada somut bir BoxConstraints nesnesi olarak elinde), ebeveynden gelen sınırlar. constraints.deflate(...), bu sınırları küçültüp çocuğa veriyor — "constraints go down" ilkesinin birebir kod karşılığı.

child!.layout(cocukConstraints, parentUsesSize: true) — çocuğun kendi performLayout()'unu tetikler ve sonucunu (child!.size) okumana izin verir — "sizes go up" ilkesinin birebir kod karşılığı.

(child!.parentData as BoxParentData).offset = ... — çocuğun, bizim içimizde nereye konumlandırılacağını belirler. parentData, Dart Bölüm 7'de öğrendiğimiz tip cast (as) kullanımıyla, her RenderObject'in ebeveyni tarafından eklenen ekstra bilgiyi (burada konum) taşıdığı bir alan.

#Daha İleri Bir Örnek — Çoklu Çocuk, Özel Yerleşim (Dairesel Layout)

class DaireselYerlesim extends MultiChildRenderObjectWidget {
  DaireselYerlesim({super.key, required List<Widget> children}) : super(children: children);

  @override
  RenderObject createRenderObject(BuildContext context) => _DaireselYerlesimRenderBox();
}

class _DaireselYerlesimParentData extends ContainerBoxParentData<RenderBox> {}

class _DaireselYerlesimRenderBox extends RenderBox
    with ContainerRenderObjectMixin<RenderBox, _DaireselYerlesimParentData>,
         RenderBoxContainerDefaultsMixin<RenderBox, _DaireselYerlesimParentData> {

  @override
  void setupParentData(RenderBox child) {
    child.parentData = _DaireselYerlesimParentData();
  }

  @override
  void performLayout() {
    size = constraints.biggest; // mevcut TÜM alanı kullan
    final merkez = Offset(size.width / 2, size.height / 2);
    final yaricap = size.width / 3;

    int i = 0;
    int sayim = childCount;
    RenderBox? cocuk = firstChild;

    while (cocuk != null) {
      cocuk.layout(const BoxConstraints.tightFor(width: 50, height: 50), parentUsesSize: true);

      final aci = (2 * 3.14159 * i) / sayim; // Dart Bölüm 3 — matematik operatörleri
      final konum = Offset(
        merkez.dx + yaricap * cos(aci) - 25,
        merkez.dy + yaricap * sin(aci) - 25,
      );

      (cocuk.parentData as _DaireselYerlesimParentData).offset = konum;
      cocuk = (cocuk.parentData as _DaireselYerlesimParentData).nextSibling;
      i++;
    }
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    defaultPaint(context, offset); // tüm çocukları normal şekilde çiz
  }
}

Bu örnek neyi gösteriyor? Stack, Row, Column'ın kapsamadığı bir yerleşim algoritmasını (çocukları bir dairenin çevresine eşit aralıklarla yerleştirme), tamamen kendi matematiğinle tanımlayabiliyorsun. ContainerRenderObjectMixin, Dart Bölüm 7'de öğrendiğimiz mixin kavramının burada birden fazla çocuğu bir bağlı liste gibi (firstChild, nextSibling) yönetmeni sağlayan hazır bir altyapısı.

#Pratik Gerçek — Ne Sıklıkla Buna İhtiyaç Duyarsın?

Dürüst olmak gerekirse: çok nadiren. Flutter'ın hazır layout widget'ları (Row, Column, Stack, Wrap, Flow, CustomMultiChildLayout) çoğu senaryoyu karşılar. CustomMultiChildLayout (bu dersin gösterdiği ham RenderObject yazımından çok daha kolay, delegate tabanlı bir API), çoğu "özel yerleşim" ihtiyacını elle RenderObject yazmadan çözer. Bu dersin asıl değeri, teknik değil kavramsaldır: artık Row'un, Padding'in, Stack'in arka planda gerçekte ne yaptığını biliyorsun — bir performans sorununu (Bölüm 10) araştırırken ya da bir paketin (Bölüm 12 Konu 58) kaynak koduna baktığında, gördüğün şey artık sihir değil.

#🎯 Bu Dersten Çıkarılması Gerekenler

• RenderObject, Widget → Element → RenderObject üçlüsünün en alt, en pahalı katmanıdır — createRenderObject/updateRenderObject ile widget'lar bunu oluşturur/günceller, kendisi yeniden kullanılır.
• markNeedsLayout()/markNeedsPaint(), Flutter'ın reaktivitesinin temelidir — setState(), bunları senin yerine çağıran üst seviye bir kolaylıktır.
• performLayout() içinde, constraints (ebeveynden gelen) ile çocuğa küçültülmüş/değiştirilmiş constraint'ler verilir (constraints go down), çocuğun size'ı okunur (sizes go up), ve parentData.offset ile konumu belirlenir.
• Çoklu çocuklu özel yerleşimler, ContainerRenderObjectMixin gibi hazır mixin'lerle, çocukları bağlı liste (firstChild/nextSibling) olarak yönetir.
• Pratikte, elle RenderObject yazmak nadiren gerekir — CustomMultiChildLayout gibi daha kolay API'ler çoğu ihtiyacı karşılar; bu dersin asıl değeri, Flutter'ın iç mekanizmasını anlamaktır.

#📝 Ödevler

• [ ] OzelKenarBoslugu örneğini kendi projende dene, miktar'ı bir setState() ile değiştirip animasyonsuz ama anlık güncellendiğini gözlemle.
• [ ] DaireselYerlesim örneğini, farklı sayıda çocukla (3, 5, 8) test et, yaricap değerini değiştirerek layout'un nasıl tepki verdiğini gözlemle.
• [ ] Flutter'ın kaynak kodunda (GitHub) RenderPadding sınıfını bul, bu dersteki OzelKenarBoslugu ile karşılaştır — gerçek implementasyonun hangi ekstra detayları (örn. RTL/LTR metin yönü desteği) ele aldığını not al.
• [ ] Kendi cümlelerinle, "markNeedsLayout() ile markNeedsPaint() arasındaki farkın ne olabileceğini" (hangi durumda sadece çizimin, hangi durumda boyut/konumun yeniden hesaplanması gerektiğini düşünerek) açıkla.

Sıradaki konu: Bölüm 12 — Konu 57: Engine Mimarisi Derinlemesine (Impeller vs Skia)