Flutter: mainAxisSize ile Alan Kontrolü

mainAxisSize, Row veya Column widget'larının ana eksen boyunca ne kadar alan kaplayacağını belirler. Görünmez bir sınır çizer ve widget'ın sonsuz genişlemesini önler.

mainAxisSize Nedir?

Row veya Column oluşturduğunuzda, varsayılan olarak mümkün olan tüm alanı kaplamaya çalışır. mainAxisSize ile bu davranışı değiştirebilirsiniz.

Canlı Demo: mainAxisSize Örnekleri

mainAxisSize.max ve mainAxisSize.min arasındaki farkı görün:

mainAxisSize Değerleri

MainAxisSize.max (Varsayılan)

Row veya Column, ana eksen boyunca mevcut olan tüm alanı kaplar:

Row(
  mainAxisSize: MainAxisSize.max, // Varsayılan
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Text('Maksimum genişlik'),
    Icon(Icons.star),
  ],
)

Bu durumda Row, yatay olarak mevcut tüm genişliği kullanır.

MainAxisSize.min

Row veya Column, sadece çocuklarının ihtiyaç duyduğu kadar alan kaplar:

Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Text('Minimum genişlik'),
    Icon(Icons.star),
  ],
)

Bu durumda Row, sadece içindeki widget'ların toplamı kadar yer kaplar.

Column ile Kullanımı

Column'da mainAxisSize dikey eksende çalışır:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Birinci satır'),
    Text('İkinci satır'),
    ElevatedButton(
      onPressed: () {},
      child: Text('Buton'),
    ),
  ],
)

MainAxisSize.min kullanıldığında Column sadece içeriği kadar dikey alan kaplar.

Pratik Kullanım Örnekleri

Örnek 1: Kart İçinde Kompakt Düzen

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      mainAxisSize: MainAxisSize.min, // Kartı gerektiği kadar büyüt
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Başlık', style: TextStyle(fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('İçerik metni'),
      ],
    ),
  ),
)

Örnek 2: Dialog İçeriği

AlertDialog(
  content: Column(
    mainAxisSize: MainAxisSize.min, // Dialog içeriğini kompakt tut
    children: [
      Icon(Icons.warning, size: 48, color: Colors.orange),
      SizedBox(height: 16),
      Text('Uyarı mesajı'),
    ],
  ),
  actions: [
    TextButton(
      onPressed: () {},
      child: Text('Tamam'),
    ),
  ],
)

Örnek 3: Row ile Buton Grubu

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

MainAxisSize.max vs MainAxisSize.min

Özellik	MainAxisSize.max	MainAxisSize.min
Alan kullanımı	Tüm mevcut alan	Sadece gerekli alan
Varsayılan	Evet	Hayır
mainAxisAlignment etkisi	Tam genişlikte dağıtır	Sadece içerik genişliğinde
Kullanım durumu	Tam genişlik istenen yerler	Kompakt düzenler, dialog'lar

mainAxisAlignment ile İlişkisi

MainAxisSize.min kullanırken mainAxisAlignment etkisi daha belirgindir:

// max ile - tüm genişliği kullanır
Row(
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Icon(Icons.home),
    Icon(Icons.settings),
  ],
)

// min ile - sadece içerik kadar genişlik
Row(
  mainAxisSize: MainAxisSize.min,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Icon(Icons.home),
    Icon(Icons.settings),
  ],
)

Ne Zaman Kullanmalı?

MainAxisSize.max kullanın:

• Tam genişlik/yükseklik istediğinizde
• Öğeleri geniş alana yaymak istediğinizde
• Varsayılan davranış yeterli olduğunda

MainAxisSize.min kullanın:

• Dialog içeriklerinde
• Kart ve kartpostal düzenlerinde
• Buton gruplarında
• İçeriğe sıkı sarılması gereken yerlerde
• Gereksiz boşlukları önlemek istediğinizde

Özet

mainAxisSize, Row ve Column'un alan kullanımını kontrol eden önemli bir özelliktir:

• max: Tüm mevcut alanı kullan (varsayılan)
• min: Sadece gerekli kadar alan kullan

Bu özelliği doğru kullanarak daha kompakt ve profesyonel görünümlü düzenler oluşturabilirsiniz.