Flutter Widget Tree #1 — Widget Nedir? Flutter Ekranı Nasıl Oluşturur?

Flutter öğrenmeye başlayan hemen hemen herkes ilk gün şu cümleyi duyar:

Everything is a Widget.

İlk bakışta bu cümle oldukça anlaşılır görünür. Sonuçta ekrana yazı yazdırmak için Text, bir buton eklemek için ElevatedButton, sayfa düzeni oluşturmak için ise Column, Row veya Scaffold kullanıyoruz.

Peki gerçekten her şey bir widget mı?

Daha da önemlisi, bir Text widget'ı gerçekten ekrana yazı mı çizer?

İlk başta çoğumuzun cevabı evet olur. Çünkü aşağıdaki kodu yazdığımızda ekranda gerçekten “Merhaba Flutter” yazısını görürüz.

Text("Merhaba Flutter")

Ancak Flutter’ın çalışma mantığı düşündüğümüzden biraz farklıdır. Aslında bu satır ekrana hiçbir şey çizmez. Evet, yanlış okumadınız. Text widget'ı tek başına ekrana yazı yazamaz. Bu satır yalnızca Flutter’a şunu söyler:

“Bu noktada ‘Merhaba Flutter’ yazan bir metin olmalı.”

İşte Widget Tree konusunu anlamaya başlamanın ilk adımı tam olarak budur.

Flutter’dan Önce UI Nasıl Geliştiriliyordu?

Flutter’ın neden widget tabanlı bir mimari kullandığını anlayabilmek için önce geleneksel UI geliştirme yaklaşımına kısa bir göz atalım.

Android tarafında yıllarca uygulamalar XML dosyaları ve View yapıları kullanılarak geliştirildi.

Örneğin ekranda bulunan bir yazıyı değiştirmek istediğimizde önce o nesneyi bulur, daha sonra üzerinde işlem yapardık. TextView title = findViewById(R.id.title); title.setText("Merhaba");

TextView title = findViewById(R.id.title);
title.sebtText("Merhaba");

Burada yaptığımız işlem oldukça basittir. Önce ekrandaki gerçek nesneyi buluyoruz. Ardından o nesnenin metnini değiştiriyoruz. Yani doğrudan ekranda bulunan UI elemanına müdahale ediyoruz. Aynı mantık iOS tarafında da geçerlidir.

Aynı mantık iOS tarafında da geçerlidir.

label.text = "Merhaba"

Bu yaklaşımda geliştirici sürekli olarak mevcut UI üzerinde değişiklik yapar. Süreç kabaca şu şekilde ilerler:

UI elemanını bul
        ↓
Özelliğini değiştir
        ↓
Ekranı güncelle

Bu yaklaşım Imperative UI (Emir Vererek UI Oluşturma) olarak adlandırılır.

Çünkü geliştirici bilgisayara adım adım ne yapması gerektiğini söyler.

• Git bu yazıyı bul.
• Metnini değiştir.
• Rengini değiştir.
• Gizle.
• Tekrar göster.

Yani sürekli olarak mevcut ekran üzerinde işlem yapılır.

Flutter Farklı Düşünüyor

Flutter ise bu yaklaşımı tamamen değiştirdi. Flutter hiçbir zaman bize şunu söylemez:

Git ekrandaki yazıyı bul ve değiştir.

Bunun yerine çok daha farklı bir soru sorar:

“Ekran şu anda nasıl görünmeli?”

İşte Flutter’ın en önemli tasarım kararlarından biri budur. Flutter’a tek tek hangi nesnenin nasıl değişeceğini söylemeyiz. Onun yerine ekranın son halini tarif ederiz.

Örneğin:

Column(
  children: [
    Text("Merhaba"),
    ElevatedButton(
      onPressed: () {},
      child: Text("Devam Et"),
    ),
  ],
)

Bu kod Flutter’a şu talimatı vermez:

• Önce bir yazı oluştur.
• Sonra altına bir buton ekle.

Bunun yerine sadece şunu söyler:

“Ben ekranın bu şekilde görünmesini istiyorum.”

Nasıl oluşturulacağı, nasıl yerleştirileceği ve nasıl çizileceği ise tamamen Flutter’ın sorumluluğundadır. Bu yaklaşıma Declarative UI (Tanımlayıcı UI) adı verilir. Yani geliştirici olarak artık şu soruyla ilgilenmeyiz:

“Ekranı nasıl değiştireceğim?”

Onun yerine şu soruya cevap veririz:

“Ekran şu anda nasıl görünmeli?”

İşte Flutter’ın widget sistemi de tam olarak bu düşüncenin üzerine kurulmuştur.

Widget Gerçekte Nedir?

Buraya kadar widget’ların ekranı oluşturmak için kullanıldığını gördük.Fakat burada çok önemli bir yanılgı vardır.Çoğu Flutter geliştiricisi widget’ı, ekranda gördüğü gerçek nesne olarak düşünür.

Örneğin aşağıdaki kodu tekrar ele alalım.

Text("Merhaba Flutter")

Bu kod gerçekten ekrandaki yazının kendisi midir?

Hayır.

Bu kod yalnızca Flutter’a verilen bir tariftir. Yani Flutter’a şunu söyler:

Burada "Merhaba Flutter" yazan bir metin olmalı.

Benzer şekilde aşağıdaki widget’a bakalım.

Container(
  width: 120,
  height: 120,
  color: Colors.red,
)

Bu kod da ekrana doğrudan kırmızı bir kutu çizmez.

Sadece Flutter’a şu bilgileri verir:

• Genişlik 120 piksel olsun.
• Yükseklik 120 piksel olsun.
• Rengi kırmızı olsun.

Yani widget aslında yalnızca özellikleri taşıyan bir tanımdır. Flutter bu tanımı alır ve daha sonra ekrana nasıl çizileceğine kendisi karar verir.

Widget Neden “Configuration Object” Olarak Tanımlanır?

Flutter dokümantasyonunda widget’lar için sık sık şu ifadeyi görürsünüz:

Widgets are immutable configuration objects.

İlk bakışta bu cümle oldukça teknik gelebilir. Aslında anlatmak istediği şey oldukça basittir. Bir widget’ın görevi ekrana bir şey çizmek değildir. Widget’ın görevi Flutter’a “Nasıl görünmesini istediğimizi” söylemektir.

Örneğin aşağıdaki Text widget'ını inceleyelim.

Text(
  "Merhaba Flutter",
  style: TextStyle(
    fontSize: 24,
    color: Colors.blue,
    fontWeight: FontWeight.bold,
  ),
)

Burada Flutter’a verilen bilgiler şunlardır:

• Yazılacak metin
• Yazı boyutu
• Yazı rengi
• Yazı kalınlığı

Yani widget yalnızca bir konfigürasyon taşır. Gerçek çizim işlemini yapan yapı widget değildir. Bu yüzden widget’lara configuration object denir.

Widget Neden Immutable’dır?

Flutter dokümantasyonunda widget’lar için sıkça şu ifadeyi görürsünüz:

Widgets are immutable configuration objects.

Buraya kadar widget’ın bir configuration object olduğunu öğrendik. Peki neden immutable (değiştirilemez) olmak zorunda?

Bunu küçük bir örnek üzerinden düşünelim. Aşağıdaki widget oluşturulduktan sonra:

const Text("Merhaba Flutter")

onun içerisindeki metni sonradan değiştiremeyiz. Örneğin aşağıdaki gibi bir kullanım Flutter’da mümkün değildir.

final text = const Text("Merhaba Flutter");

// Böyle bir kullanım yoktur.
text.data = "Merhaba";

Çünkü Flutter’da oluşturulan bir widget’ın özellikleri daha sonradan değiştirilmez. Bunun yerine ihtiyaç duyulan yeni özelliklerle yeni bir widget oluşturulur. Örneğin ilk durumda Flutter’a şu tarif verilir:

const Text("Merhaba Flutter")

Daha sonra metin değiştiğinde ise mevcut widget değiştirilmez. Bunun yerine Flutter’a yeni bir tarif gönderilir.

const Text("Merhaba")

İlk bakışta bu yaklaşım verimsiz gibi görünebilir.

“Her değişiklikte yeni widget oluşturuluyorsa Flutter nasıl bu kadar hızlı çalışıyor?”

Aslında bu, Flutter’ın en güçlü tasarım kararlarından biridir. Bu sorunun cevabı ise Widget Tree’nin arkasında çalışan Element Tree ve Render Tree yapılarında saklıdır. Bu yapıları serimizin ikinci bölümünde detaylı olarak inceleyeceğiz.

Widget Tree’ye İlk Bakış

Artık widget’ın ne olduğunu biliyoruz.

Peki uygulamamızdaki onlarca hatta yüzlerce widget Flutter tarafından nasıl organize ediliyor?

Cevap oldukça basit. Flutter, yazdığımız tüm widget’ları hiyerarşik bir yapı içerisinde tutar. Bu yapıya Widget Tree adı verilir.

Örneğin aşağıdaki ekranı ele alalım.

Scaffold(
  appBar: AppBar(
    title: const Text("Ana Sayfa"),
  ),
  body: Center(
    child: const Text("Merhaba Flutter"),
  ),
)

Flutter bu kodu bizim gördüğümüz gibi satır satır değil, bir ağaç yapısı olarak değerlendirir.

Scaffold
├── AppBar
│   └── Text
└── Center
    └── Text

Aslında Flutter’da yazdığımız her ekran, birbirinin içine yerleşmiş widget’lardan oluşan büyük bir ağaçtır. İşte bu yapıya Widget Tree denir. Bu yazıda yalnızca Widget Tree’nin ne olduğunu ve neden var olduğunu öğrendik.Ancak Flutter’ın asıl sihri burada başlamıyor.

Asıl ilginç kısım, Flutter’ın bu Widget Tree’yi nasıl yönettiği ve her değişiklikte neden tüm ekranı yeniden çizmeden bu kadar yüksek performans sunabildiğidir.

Sonuç

Bu yazıda Flutter’ın en temel kavramlarından biri olan Widget kavramını incelemeye çalıştık.

Özetlemek gerekirse;

• Flutter, Imperative UI yerine Declarative UI yaklaşımını benimser.
• Widget, ekranda gördüğümüz gerçek nesne değildir.
• Widget, kullanıcı arayüzünün nasıl görünmesi gerektiğini tarif eden bir configuration object’tir.
• Widget’lar immutable yapıdadır ve değiştirilmek yerine yeniden oluşturulurlar.
• Flutter’da yazdığımız her ekran, birbirinin içine yerleşmiş widget’lardan oluşan bir Widget Tree olarak temsil edilir.

Ancak bu noktada hâlâ cevaplanması gereken önemli bir soru var.

Flutter her değişiklikte yeni widget’lar oluşturuyorsa bunu performans kaybı yaşamadan nasıl başarabiliyor?

İşte bu sorunun cevabı, Widget Tree’nin arkasında çalışan Element Tree ve Render Tree yapılarında gizli. Serinin bir sonraki bölümünde, Flutter’ın görünmeyen tarafına geçecek ve Widget Tree’nin arkasında neler olduğunu birlikte inceleyeceğiz.

Serinin Devamında

Bir sonraki yazıda şu konulara değineceğiz:

• Widget Tree, Element Tree ve Render Tree arasındaki farklar
• Flutter neden üç farklı ağaç yapısı kullanıyor?
• Build süreci nasıl çalışıyor?
• setState() çağrıldığında arka planda neler oluyor?
• Flutter neden her build işleminde yeni widget oluşturmasına rağmen yüksek performans sunabiliyor?

Teşekkürler

Buraya kadar okuduğunuz için teşekkür ederim. Umarım bu yazı Flutter’ın en temel kavramlarından biri olan Widget konusunu daha anlaşılır hale getirmiştir. Eğer yazıyı faydalı bulduysanız, serinin devamını kaçırmamak için beni Medium üzerinden takip edebilirsiniz.

Ayrıca yazıda yer alan tüm örnek kodları ve bu seri için hazırladığım demo projeleri GitHub hesabımda paylaşacağım. İncelemek veya katkıda bulunmak isterseniz beklerim.