Flutter: Column / Row Kullanımı

Unvef · Ağu 12, 2024, 02:25 ÖS

Flutter Nedir?
Flutter, Google tarafından geliştirilen açık kaynaklı bir UI framework'üdür. Android ve iOS gibi farklı platformlar için hızlı ve etkili uygulamalar geliştirmeyi mümkün kılar. Yüksek performansı ve kullanıcı dostu arayüz bileşenleri ile Flutter, modern mobil uygulama geliştirme sürecinin vazgeçilmez bir parçası haline geldi.

Temel Widgetlar
Flutter, uygulamalarınızı oluşturan temel yapı taşlarını "widget" olarak tanımlar. Widget'lar, hem görsel öğeleri hem de yapılandırmaları temsil eder. Flutter'da birçok temel widget türü bulunmaktadır; bunlar arasında Column ve Row, en sık kullanılanlardan biridir.

Column Widget
Column, çocuklarını dikey olarak düzenleyen bir widget'tır. Farklı UI bileşenlerini yatay eksende gruplamak istediğinizde kullanılır.

Column Özellikleri

Main Axis Alignment: Çocukları dikey eksende nasıl hizalayacağınızı belirler.
Cross Axis Alignment: Çocukların yatay eksende nasıl hizalanacağını ayarlar.
Children: Column içine yerleştirilecek widget'ları liste halinde alır.

Row Widget
Row, çocuklarını yatay olarak düzenleyen bir widget'tır. Farklı bileşenleri dikey eksende gruplamak istediğinizde kullanılır.

Row Özellikleri

Main Axis Alignment: Çocukları yatay eksende nasıl hizalayacağınızı belirler.
Cross Axis Alignment: Çocukların dikey eksende nasıl hizalanacağını ayarlar.
Children: Row içine yerleştirilecek widget'ları liste halinde alır.

Layout Sisteminin Temelleri
Flutter'da UI yapıları, "layout" sistemine dayanır. Bu sistemde, widget'ların nasıl yerleştirileceği ve hizalanacağı belirlenir. Column ve Row gibi widget'lar, layout sisteminin temel bileşenleridir.

Main Axis ve Cross Axis

Main Axis: Widget'ların yerleştiği ana eksendir. Column için bu dikey eksenken, Row için yatay eksendir.
Cross Axis: Widget'ların ana eksene dik olan eksendir. Column'da yatay, Row'da dikeydir. Yani bir Column widget'ı için çocuklar yan yana yer alırken, Row widget'ı için dikey sırayla yer alır.

Column ve Row Kullanım Örnekleri
Column ve Row widget'larını kullanırken, basit örnekler üzerinden başlayarak daha karmaşık yapılar oluşturabilirsiniz.

Basit Bir Column Kullanımı

Kod Seç

1Column(
2  children: <Widget>[
3    Text('Birinci Satır'),
4    Text('İkinci Satır'),
5    Text('Üçüncü Satır'),
6  ],
7)
8

Bu örnekte, üç metin widget'ı dikey olarak yerleştirildi.

Basit Bir Row Kullanımı

Kod Seç

1Row(
2  children: <Widget>[
3    Text('Solda'),
4    Text('Ortada'),
5    Text('Sağda'),
6  ],
7)
8

Burada da, üç metin widget'ı yatay olarak yerleştirildi.

Column ve Row ile İlgili İpuçları
Column ve Row kullanırken bazı pratik ipuçları, uygulamanızın görünümünü ve düzenini geliştirir.

Eşit Boşluklar Oluşturma
Column veya Row'da, çocuklar arasında eşit boşluklar oluşturmak için

Kod Seç

MainAxisAlignment.spaceEvenly veya

Kod Seç

MainAxisAlignment.spaceBetween seçeneklerini kullanabilirsiniz.

Kod Seç

1Column(
2  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
3  children: <Widget>[
4    Text('Bir'),
5    Text('İki'),
6    Text('Üç'),
7  ],
8)
9

Dikey ve Yatay Oynatma
Widget'ların hizalanması, uygulamanızın görünümünü önemli ölçüde etkiler.

Kod Seç

MainAxisAlignment ve

Kod Seç

CrossAxisAlignment özelliklerini kullanarak widget'larınızı düzenli bir şekilde hizalayabilirsiniz.

Column ve Row Arasındaki Farklar
Column ve Row, kullanıcı arayüzleri için iki temel yapıdır, ancak kullanım senaryolarına göre farklı alanlar sunar.

Kullanım Senaryoları

Column: Özellikle dikey olarak birden fazla widget yerleştirirken kullanılır. Örneğin, bir formun çeşitli alanlarını yerleştirmek için idealdir.
Row: Genellikle düğmeler gibi yan yana yerleştirilmesi gereken bileşenler için tercih edilmelidir.

Sonuç
Flutter'ın Column ve Row widget'ları, uygulama gelişiminizi büyük ölçüde kolaylaştırır. Bu iki temel yapı, kullanıcı arayüzünüzü düzenlemenize olanak tanır ve görsel hiyerarşiyi korur. Hangi widget'ı kullanacağınızı belirlerken, ihtiyaçlarınıza göre dikey veya yatay düzenlemeyi seçmelisiniz.

Sıkça Sorulan Sorular (SSS)

Column ve Row arasındaki temel fark nedir? Column, çocukları dikey olarak hizalarken, Row yatay olarak hizalar.
Column widget'ında çocuklar arasında nasıl eşit boşluk oluşturabilirim? MainAxisAlignment.spaceEvenly veya MainAxisAlignment.spaceBetween kullanarak boşluklar oluşturabilirsiniz.
Row widget'ında çocukları nasıl hizalayabilirim? MainAxisAlignment ve CrossAxisAlignment özelliklerini kullanarak hizalama yapabilirsiniz.
Column ve Row kullanmanın avantajları nedir? Bu widget'lar, UI bileşenlerinizi düzenli ve okunabilir hale getirir.
Bir widget'ı Column veya Row içinde nasıl yerleştirebilirim? children listesi içerisine istediğiniz widget'ları ekleyerek yerleştirebilirsiniz.

Flutter: Column / Row Kullanımı

Unvef