Flutter: Center Widget Detaylı Kullanımı

Center widget'ı, çocuğunu içinde bulunduğu alanın tam ortasına yerleştirmek için kullanılan basit ama güçlü bir widget'tır.

Canlı Demo: Center Widget Örnekleri

Aşağıdaki interaktif örnekte Center widget'ını farklı senaryolarda deneyebilirsiniz:

Temel Kullanım

Center, tek bir child alır ve onu hem yatay hem dikey olarak ortalar:

Center(
  child: Text('Ortadayım'),
)

Container İçinde Center

Text'i Container'a göre ortalamak:

Container(
  width: 200,
  height: 100,
  color: Colors.blue.shade100,
  child: Center(
    child: Text('Container ortasında'),
  ),
)

Bu örnekte Text, Container'ın tam ortasına yerleşir.

Row İçinde Center Kullanımı

Center'ı Row içinde kullandığınızda, Center widget'ı kendisine ayrılan alana göre çocuğunu ortalar:

Container(
  width: 300,
  height: 100,
  color: Colors.grey.shade200,
  child: Row(
    children: [
      Container(width: 50, color: Colors.red),
      Center(
        child: Text('Row içinde ortalandım'),
      ),
      Container(width: 50, color: Colors.green),
    ],
  ),
)

Önemli Not: Row içinde Center kullanıldığında, Center sadece kendisine ayrılan alanı kullanır. Tüm Row'u ortalamak için Row'un kendi mainAxisAlignment özelliğini kullanmalısınız.

Row'un Kendisini Ortalamak

Row'un tamamını ortalamak için Center'ı Row'un dışında kullanın:

Container(
  width: 300,
  height: 100,
  color: Colors.grey.shade200,
  child: Center(
    child: Row(
      mainAxisSize: MainAxisSize.min, // Önemli: Row'u kompakt tut
      children: [
        Icon(Icons.star),
        SizedBox(width: 8),
        Text('Row ortalandı'),
        SizedBox(width: 8),
        Icon(Icons.star),
      ],
    ),
  ),
)

Column İçinde Center

Column içinde yatay ortalama için Center kullanabilirsiniz:

Column(
  children: [
    Text('Üstte solda'),
    Center(
      child: Text('Yatayda ortada'),
    ),
    Text('Altta solda'),
  ],
)

Alternatif olarak Column'un crossAxisAlignment özelliğini kullanabilirsiniz:

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Hepsi'),
    Text('Ortada'),
  ],
)

Center vs mainAxisAlignment

Center Kullanımı

Container(
  height: 200,
  child: Center(
    child: Text('Center ile'),
  ),
)

mainAxisAlignment Kullanımı

Container(
  height: 200,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text('Axis ile'),
    ],
  ),
)

Fark: Center her zaman hem yatay hem dikey ortalar. mainAxisAlignment sadece ana eksen boyunca hizalar.

İç İçe Center Kullanımı

Center'ı iç içe kullanabilirsiniz:

Container(
  width: 300,
  height: 200,
  color: Colors.blue.shade50,
  child: Center(
    child: Container(
      width: 150,
      height: 100,
      color: Colors.white,
      child: Center(
        child: Text('İç içe ortalanmış'),
      ),
    ),
  ),
)

Center'ın Genişliği ve Yüksekliği

Center varsayılan olarak mevcut tüm alanı kaplar. Boyutunu sınırlamak için:

Center(
  child: Container(
    width: 200,
    height: 100,
    color: Colors.amber,
    child: Center(
      child: Text('Sınırlı alan'),
    ),
  ),
)

Responsive Düzenlerde Center

Ekran boyutuna göre ortalama:

LayoutBuilder(
  builder: (context, constraints) {
    return Center(
      child: Container(
        width: constraints.maxWidth * 0.8,
        child: Text('Ekranın %80\'i genişliğinde'),
      ),
    );
  },
)

Center ile Expanded Kullanımı

Row veya Column içinde Center ile Expanded birlikte kullanılabilir:

Row(
  children: [
    Expanded(
      child: Center(
        child: Text('Sol'),
      ),
    ),
    Expanded(
      child: Center(
        child: Text('Sağ'),
      ),
    ),
  ],
)

Ne Zaman Center, Ne Zaman Axis Alignment?

Center kullanın:

• Tek bir widget'ı tam ortaya almak için
• Hem yatay hem dikey ortalama gerektiğinde
• Basit ve hızlı çözüm istediğinizde

mainAxisAlignment/crossAxisAlignment kullanın:

• Birden fazla widget hizalarken
• Sadece bir eksende hizalama yapacaksanız
• Daha fazla kontrol gerektiğinde (spaceBetween, spaceAround, vb.)

Pratik Örnekler

Örnek 1: Loading Göstergesi

Scaffold(
  body: Center(
    child: CircularProgressIndicator(),
  ),
)

Örnek 2: Boş Durum Ekranı

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.inbox, size: 64, color: Colors.grey),
      SizedBox(height: 16),
      Text('Henüz içerik yok'),
    ],
  ),
)

Örnek 3: Kart Düzeni

Center(
  child: Card(
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Text('Ortalanmış kart'),
    ),
  ),
)

Özet

Center widget'ı:

• Çocuğunu hem yatay hem dikey ortalar
• Tek bir child alır
• Basit ve kullanımı kolaydır
• Container, Row, Column içinde farklı şekillerde çalışır
• mainAxisAlignment/crossAxisAlignment'a göre daha basittir ama daha az esnektir

Doğru senaryoda kullanıldığında Center, hızlı ve etkili bir hizalama çözümüdür.