Flutter'da widget ağacı ve ekran yerleşimi: Row, Column ve kısıtlamalar

Flutter’da her şey widget’tır

Flutter belgeleri yerleşimin merkezinde widget’ları gösterir: widget’lar arayüzü kuran sınıflardır; görünen metin, simge ve görseller widget’tır, ama görünmeyen satır, sütun ve ızgara gibi düzenleyiciler de widget’tır. Basit widget’ları iç içe koyarak karmaşık arayüzler kurarsınız.

Bu yüzden Flutter’da ekran bir ağaç olarak düşünülür. Kökte uygulamayı ya da sayfayı taşıyan bir widget, altında düzenleyici widget’lar, en uçta ise metin ve görsel gibi yaprak widget’lar bulunur. Bir ekranı yazmadan önce bu ağacı kâğıda çizmek, kodun yapısını netleştirir: hangi bölüm yatay, hangi bölüm dikey, hangi parça kaydırılabilir?

Adım adım: tek widget’tan ekrana

Belgelerde önerilen akış şöyle özetlenebilir:

• Bir düzenleyici widget seçin: örneğin Center, içeriğini yatay ve dikey ortalar.
• Görünür bir widget oluşturun: Text, Icon ya da Image.
• Görünür widget’ı düzenleyiciye çocuk olarak ekleyin.
• Düzenleyiciyi sayfaya ekleyin ve uygulamayı çalıştırın.
• Birden fazla öğe gerektiğinde Row ya da Column kullanıp çocuk listesi verin.

Örnek:

Column( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Text(baslik), Icon(Icons.star), Text(aciklama) ], )

Bu kod çocukları dikey dizer ve boş alanı öğelerin arasına, üstüne ve altına eşit paylaştırır. Her çocuk kendisi de Row ya da Column olabilir; karmaşık yerleşimler bu iç içe geçmeden doğar.

Küçük bir uygulama alıştırması: bir profil kartı kurun. En dışta Card, içinde dolgu veren bir Padding, onun içinde yatay bir Row; solda yuvarlak görsel, sağda Expanded ile sarılmış bir Column (ad ve unvan metni) olsun. Ad uzun olduğunda satır taşıyorsa Expanded’ın görevi devreye girer. Bu yapı çoğu liste öğesinin ve kart ekranının iskeletidir.

Row ve Column: hizalama, boyutlandırma, paketleme

Row yatay, Column dikey dizilim yapar. Hizalama ana ve çapraz eksende yönetilir: ana eksen (Row’da yatay, Column’da dikey) mainAxisAlignment ile, çapraz eksen ise crossAxisAlignment ile ayarlanır. Belgeler, spaceEvenly değerinin boş alanı öğelerin arası, öncesi ve sonrası arasında eşit bölüştürdüğünü örneklerle gösterir.

Boyutlandırma: Bir satır içeriğine sığmayacak kadar genişse kenarında sarı-siyah çizgili bir uyarı belirir. Çözüm, çocukları Expanded ile sarmaktır; Expanded, çocuğun kalan alana sığmasını sağlar. flex özelliği ise bir çocuğun kardeşlerine göre kaç kat alan alacağını belirler; varsayılan oran birdir.

Paketleme: Varsayılan olarak Row ya da Column ana eksende mümkün olduğunca çok yer kaplar. Çocukları birbirine yakın tutmak için mainAxisSize değerini MainAxisSize.min yapmak gerekir. Hizalama, boyutlandırma ve paketleme ayarlarının birleşimi, günlük ekranların büyük kısmını çözer.

Kısıtlama kuralı: Constraints go down, sizes go up

Flutter yerleşimini HTML’den ayıran en önemli kavram kısıtlamalardır. Flutter belgeleri bunu şu kuralla özetler: kısıtlamalar aşağı iner, boyutlar yukarı çıkar, konumu ise ebeveyn belirler. Bir widget kısıtlamalarını ebeveyninden alır; kısıtlama, en küçük ve en büyük genişlik ile yükseklikten oluşur. Widget bu kısıtlamaları çocuklarına iletir, her çocuktan ne kadar yer istediğini öğrenir, onları konumlandırır ve kendi boyutunu yine ebeveynine bildirir.

Bu kuralı anlamak sık karşılaşılan şaşırtıcı durumları açıklar. Örneğin bir widget’a belirli bir genişlik vermenize rağmen ebeveyni sıkı bir kısıtlama uyguluyorsa verdiğiniz genişlik dikkate alınmaz. Belgeler, bu durumda sorunu “Center içine koy” ile geçiştirmemeyi, kuralı öğrenmeyi önerir. Bir yerleşim beklediğiniz gibi görünmüyorsa şu soruyu sorun: bu widget’ın ebeveyni ona hangi kısıtlamayı verdi?

Sık kullanılan yerleşim widget’ları

Container, bir widget’a dolgu, kenar boşluğu, kenarlık, arka plan rengi veya görseli ekler ve tek çocuk taşır. Yerleşimde ayrım bırakmak için sık kullanılır.

ListView, widget’ları kaydırılabilir liste olarak dizer; içerik ekrana sığmazsa otomatik kayar. Column’un kaydırılabilir kardeşi gibi düşünülebilir. GridView aynı mantıkla ızgara kurar.

Stack, bir widget’ı diğerinin üzerine bindirir; görsel üzerine metin ya da rozet koymak için kullanılır.

Card ilişkili bilgiyi yuvarlak köşeli ve gölgeli bir kutuda toplar. ListTile ise başta ve sonda simge, ortada birkaç satır metin taşıyan hazır bir satırdır; Row ile elle kurmaktansa çoğunlukla ListTile daha pratiktir.

Scaffold ve AppBar gibi Material widget’ları uygulama iskeletini hazır verir; iOS tarzı arayüz için Cupertino karşılıkları vardır. Material’a özgü widget’ları yalnızca Material uygulamalar kullanır.

Taşma hatası ve yerleşim sorunlarını ayıklamak

En sık karşılaşılan yerleşim sorunu taşmadır: Row ya da Column içeriği ekrana sığmaz ve kenarda sarı-siyah çizgili şerit belirir. Çözüm yolları: çocukları Expanded ile sarmak, uzun içerik için ListView kullanmak, metinde taşmayı kısaltma veya satır sınırıyla yönetmek.

Bir diğer sorun, sınırsız alan veren bir ebeveynin içine kaydırılabilir ya da genişleyen bir widget koymaktır; örneğin Column içine doğrudan ListView koymak. Burada ListView’ı Expanded ile sarmak kısıtlamayı netleştirir.

Görsel ayıklama için belgeler debugPaintSizeEnabled bayrağını tanıtır; açıldığında her widget’ın sınırları çizilir ve düzenin nasıl kurulduğu görünür hale gelir. Geliştirme araçlarındaki widget denetçisi de ağaç yapısını ve her widget’ın aldığı kısıtlamaları incelemek için kullanılır. Birden çok ekran boyutunda test etmek, yerleşimin esnekliğini doğrulamanın en güvenilir yoludur.

Yerleşimi esnek tutmanın pratik kuralları: sabit piksel genişlikleri yerine oranlı alan tercih edin, uzun metinler için satır sınırı ve taşma davranışı belirleyin, kaydırma gerektiren içerikleri ListView içine alın ve klavye açıldığında alanın küçüldüğünü hesaba katın. Küçük telefon, büyük telefon, tablet ve yatay yön gibi farklı senaryolarda ekranı gözle kontrol etmek, bu kuralların uygulanıp uygulanmadığını gösterir.

Bu beceri Mindset programlarında nerede çalışılır?

Flutter ile Mobil Geliştirme eğitiminde Flutter ve Dart temellerinden sonra Widget Sistemi ve Yerleşim modülü geliyor; ardından state yönetimi, navigasyon, ağ ve veri kalıcılığı, animasyon ve performans, test ve mağaza dağıtımı işleniyor. Yerleşim modülü, arayüz kurma becerisinin temelini oluşturuyor.

Bu eğitim, mobil uygulama geliştirmeye başlayan yazılımcılar veya mevcut arayüzlerini Flutter’a taşımak isteyen ekipler için uygun görünüyor. Kurum içi mobil ekip için uyarlanmış içerik gerekiyorsa kurumsal eğitim talebi üzerinden görüşebilirsiniz.