Flutter: mainAxisSize ile Kompakt Dialog ve Buton Grupları

mainAxisSize, Row ve Column widget'larının ana eksende ne kadar alan kaplayacağını belirler. Özellikle dialog, buton grubu ve kompakt kart tasarımlarında doğru kullanıldığında arayüzü daha temiz gösterir.

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.

Neden Kompakt Layout Önemli?

Bazı ekranlarda amaç alanı maksimum doldurmak değil, içeriği sıkı ve kontrollü tutmaktır. Dialoglar, küçük kontrol grupları ve ikonlu satırlar buna örnektir.

Bu konu, "flutter mainAxisSize", "compact row column" ve "flutter dialog layout" gibi aramalar için iyi bir eşleşme sağlar.

mainAxisSize.max ve mainAxisSize.min

• MainAxisSize.max: Mümkün olan tüm alanı kullanır.
• MainAxisSize.min: Sadece içeriğin ihtiyacı kadar alan kaplar.

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

Dialog İçin Neden İdeal?

Dialog içeriğinin ekran boyunca gereksiz genişlemesi çoğu zaman kötü görünür. mainAxisSize: MainAxisSize.min ile içeriği daha dengeli tutabilirsiniz.

AlertDialog(
  content: Column(
    mainAxisSize: MainAxisSize.min,
    children: const [
      Icon(Icons.warning, size: 48, color: Colors.orange),
      SizedBox(height: 16),
      Text('Warning message'),
    ],
  ),
)

Buton Gruplarında Kullanım

İki veya üç butonlu küçük kontrollerde Row(mainAxisSize: MainAxisSize.min) çok işe yarar.

Row(
  mainAxisSize: MainAxisSize.min,
  children: [
    IconButton(onPressed: () {}, icon: const Icon(Icons.remove)),
    const Text('0'),
    IconButton(onPressed: () {}, icon: const Icon(Icons.add)),
  ],
)

Card İçinde Kompakt Düzen

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text('Title'),
        SizedBox(height: 8),
        Text('Short description'),
      ],
    ),
  ),
)

Sık Yapılan Hatalar

• Her durumda MainAxisSize.min kullanmak
• Alanı doldurması gereken layout'ta min seçmek
• mainAxisAlignment etkisini yanlış yorumlamak
• Column ve Row davranışını aynı sanmak

mainAxisAlignment ile İlişkisi

mainAxisSize.min kullandığınızda mainAxisAlignment çoğu durumda daha sınırlı ve daha belirgin çalışır. Çünkü dağıtılacak alan doğal olarak azalır.

Sık Sorulan Sorular

mainAxisSize.min neden dialoglarda tercih edilir?

Çünkü dialog içeriği kadar alan kaplayarak daha kompakt ve doğal bir görünüm sağlar.

mainAxisSize.max ne zaman kullanılmalı?

Bir widget'ın ana eksende mümkün olan tüm alanı kullanması gerektiğinde.

Row ve Column için davranış aynı mı?

Prensip aynı, ama Row yatay eksende, Column dikey eksende çalışır.

Özet

mainAxisSize, Flutter'da kompakt ve kontrollü düzenler kurmanın temel ayarlarından biridir. Özellikle dialog, buton grubu ve kart yapılarında doğru kullanıldığında hem görsel kaliteyi hem de alan kullanımını iyileştirir.