Ahmet Balaman LogoAhmet Balaman

Flutter: mainAxisSize ile Row ve Column Alignment Kontrolü

personAhmet Balaman
calendar_today
FluttermainAxisSizeRowColumnAlignmentLayout

mainAxisSize, Row ve Column içinde alan kullanımını doğrudan etkiler. Özellikle alignment davranışını anlamak ve kompakt düzenler kurmak için önemli bir ayardır.

Live Demo

Aşağıdaki interaktif örnekte mainAxisSize kullanımını deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

mainAxisSize Neyi Değiştirir?

Varsayılan olarak Row ve Column, ana eksende mümkün olduğunca genişler. mainAxisSize: MainAxisSize.min kullanıldığında ise yalnızca içeriğin ihtiyaç duyduğu alanı kaplar.

Bu konu, "flutter mainAxisSize row column", "alignment control" ve "compact layout flutter" aramalarıyla iyi eşleşir.

Basit Örnek

Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children: const [
    Icon(Icons.star),
    SizedBox(width: 8),
    Text('Compact'),
  ],
)

Alignment ile Etkileşim

mainAxisSize.max ile mainAxisAlignment.spaceBetween gibi davranışlar daha görünür olur çünkü dağıtılacak daha fazla alan vardır. mainAxisSize.min ile alan küçüldüğü için alignment etkisi daha sınırlı ama daha kontrollü görünür.

Column İçinde Kullanım

Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text('Title'),
    SizedBox(height: 8),
    Text('Subtitle'),
  ],
)

En İyi Kullanım Alanları

  • Buton grupları
  • Dialog içerikleri
  • Chip ve ikon satırları
  • Kart içinde kompakt metin blokları

Sık Yapılan Hatalar

  • Her yerde varsayılan davranışa güvenmek
  • Row ve Column'un ana eksen farkını karıştırmak
  • mainAxisSize.min ile yatay ve dikey alanı aynı sanmak

Sık Sorulan Sorular

mainAxisSize neden alignment ile birlikte düşünülmeli?

Çünkü kullanılabilir alan miktarı alignment sonucunu doğrudan değiştirir.

min mi max mı seçmeliyim?

İçeriğin sıkı kalması gerekiyorsa min, alanı doldurması gerekiyorsa max.

Bu ayar performansı etkiler mi?

Doğrudan performansdan çok layout davranışını etkiler.

Özet

mainAxisSize, Row ve Column düzenlerinde alan paylaşımını anlamanın temel parçalarından biridir. Alignment ile birlikte doğru kullanıldığında daha net, kompakt ve profesyonel arayüzler üretir.

Yorumlar