Flutter: mainAxisSize ile Row ve Column Alignment Kontrolü
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.minile 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.