Flutter Custom RenderObject Demo: Circular Layout Widget

Bu proje, Flutter'ın render katmanının gücünü ve esnekliğini göstermek amacıyla oluşturulmuş ileri düzey bir demo uygulamasıdır. Standart Column, Row veya Stack gibi mevcut layout widget'larını kullanmak yerine, bu proje sıfırdan, kendi yerleşim (layout) ve çizim (painting) mantığına sahip özel bir RenderObject'in nasıl yaratılacağını adım adım sergilemektedir.

Projenin merkezinde, kendisine verilen alt widget'ları (children) mükemmel bir dairesel yörünge etrafına eşit aralıklarla dizen CircularLayoutWidget bulunmaktadır.

Bu proje, aşağıdaki Medium makalesinin pratik uygulaması olarak geliştirilmiştir:

---

🎯 Projenin Felsefesi ve Amacı

Çoğu Flutter geliştiricisi, StatelessWidget ve StatefulWidget'ları bir araya getirerek harika kullanıcı arayüzleri oluşturur. Ancak bazen, Flutter'ın sunduğu standart layout widget'ları hayalimizdeki tasarımı veya performansı tam olarak karşılamayabilir. İşte bu noktada, Flutter'ın en derin katmanına, yani Render Ağacı'na inmemiz gerekir.

Bu projenin amacı, şu temel sorulara somut kodlarla cevap vermektir:

1. Flutter'ın Üç Ağacı (Widget, Element, Render) Nasıl Çalışır? Bu üçlü yapının birbiriyle nasıl konuştuğunu ve bir Widget'ın ekranda nasıl piksele dönüştüğünü anlamak.
2. RenderObject Nedir? Flutter'ın layout ve painting motorunun temel taşı olan bu sınıfın sorumluluklarını keşfetmek.
3. performLayout() ve paint() Metotları Ne İşe Yarar? Bir RenderObject'in "kendini ve çocuklarını nasıl ölçeceğini" ve "ekrana nasıl çizeceğini" belirleyen bu iki kritik metodu derinlemesine incelemek.
4. Sıfırdan Bir Layout Widget'ı Nasıl Yazılır? Mevcut widget'ları birleştirmek yerine, tamamen özgün bir yerleşim mantığı oluşturarak Flutter'ın temel yeteneklerini nasıl genişletebileceğimizi göstermek.

Bu proje, sadece bir "kod örneği" değil, aynı zamanda Flutter'ın render pipeline'ı üzerine bir eğitim materyalidir.

✨ Öne Çıkan Konsept: CircularLayoutWidget

Projenin kalbi olan CircularLayoutWidget, kendisine children olarak verilen bir listeyi alır ve onları bir saat kadranı gibi dairesel bir patikaya yerleştirir.

Teknik Detaylar

Bu widget'ı hayata geçirmek için üç ana bileşen oluşturulmuştur:

1. CircularLayoutWidget (MultiChildRenderObjectWidget): Geliştiricinin doğrudan kullandığı, children listesini kabul eden arayüz widget'ıdır. Görevi, Flutter'a kendi özel RenderObject'imizi oluşturmasını söylemektir.

   • Dosya: lib/circular_layout_widget.dart

2. RenderCircularLayout (RenderBox): Tüm sihrin gerçekleştiği yerdir. Bu sınıf, RenderObject'in kendisidir.

   • performLayout() Metodu: Bu metot içinde, widget'ın kendi boyutları hesaplanır. Ardından, her bir alt widget (child) için dairesel yörünge üzerindeki (x, y) pozisyonu trigonometrik fonksiyonlar (cos, sin) kullanılarak belirlenir. Her çocuk ölçülür ve hesaplanan bu pozisyona yerleştirilir.
   • paint() Metodu: Bu metot, ContainerRenderObjectMixin'den gelen defaultPaint metodunu çağırarak, performLayout aşamasında konumları belirlenmiş olan tüm çocukların kendilerini ekrana çizmelerini sağlar.
   • Dosya: lib/render_circular_layout.dart

3. ParentData: Flutter'ın render ağacında, bir ebeveynin her bir çocuğu hakkında ekstra layout bilgisi (örneğin Offset) saklaması için kullandığı mekanizmadır. Bu projede, RenderBoxParentData kullanılarak her çocuğun konumu performLayout sırasında ayarlanır.

Bu yapı sayesinde, CircularLayoutWidget tıpkı bir Column veya Row gibi deklaratif bir şekilde kullanılabilirken, arka planda tamamen özel bir layout algoritması çalıştırır.

🛠️ Teknolojiler ve Temel Kavramlar

Bu proje, Flutter'ın harici kütüphanelerden ziyade temel (core) yeteneklerine odaklanmaktadır:

• Flutter & Dart
• Widget Tree, Element Tree, Render Tree: Flutter'ın temel mimarisini oluşturan üçlü ağaç yapısı.
• RenderObject & RenderBox: Flutter'ın layout ve painting sisteminin temel sınıfları.
• MultiChildRenderObjectWidget: Birden fazla alt widget'ı yöneten özel RenderObject widget'ları oluşturmak için temel sınıf.
• ContainerRenderObjectMixin: RenderObject'in çocuk listesini yönetmeyi kolaylaştıran bir mixin.
• Trigonometri (sin, cos): Dairesel pozisyonları hesaplamak için kullanılan matematiksel temel.

📂 Proje Yapısı

Proje, konseptin anlaşılırlığını en üst düzeye çıkarmak için olabildiğince basit tutulmuştur:

lib/
├── circular_layout_widget.dart  # Geliştiricinin kullandığı public Widget
├── main.dart                    # Uygulamanın giriş noktası ve demo sayfası
└── render_circular_layout.dart  # Asıl layout ve painting mantığını içeren RenderObject