Ahmet Balaman LogoAhmet Balaman

Flutter: Align Widget ile İnce Hizalama İşlemleri

personAhmet Balaman
calendar_today
FlutterAlignAlignmentUIHizalama

Align widget'ı, Center'ın daha gelişmiş versiyonu olarak düşünülebilir. İçinde bulunduğu alana göre çocuğunu istediğiniz konuma hassas bir şekilde yerleştirebilirsiniz.

Align Nedir?

Align, bir widget'ı parent'ı içinde belirli bir konuma hizalamak için kullanılır. Center sadece ortaya alırken, Align herhangi bir noktaya hizalama yapabilir.

Canlı Demo: Align Widget Örnekleri

Aşağıdaki interaktif örnekte farklı alignment değerlerini deneyebilirsiniz:

Temel Kullanım

Container(
  width: 200,
  height: 200,
  color: Colors.blue.shade50,
  child: Align(
    alignment: Alignment.center,
    child: Text('Ortada'),
  ),
)

Alignment Değerleri

Flutter'da hazır tanımlı Alignment sabitleri:

Alignment.topLeft       // Sol üst
Alignment.topCenter     // Üst ortası
Alignment.topRight      // Sağ üst

Alignment.centerLeft    // Sol orta
Alignment.center        // Tam ortası
Alignment.centerRight   // Sağ orta

Alignment.bottomLeft    // Sol alt
Alignment.bottomCenter  // Alt ortası
Alignment.bottomRight   // Sağ alt

Örnekler

Sol Alt Köşeye Hizalama

Container(
  width: 300,
  height: 200,
  color: Colors.grey.shade200,
  child: Align(
    alignment: Alignment.bottomLeft,
    child: Container(
      width: 50,
      height: 50,
      color: Colors.blue,
      child: Center(child: Text('Alt Sol')),
    ),
  ),
)

Container, parent'ının sol alt köşesine hizalanır.

Sağ Üst Köşeye Hizalama

Container(
  width: 300,
  height: 200,
  color: Colors.grey.shade200,
  child: Align(
    alignment: Alignment.topRight,
    child: Icon(Icons.close, color: Colors.red),
  ),
)

Özel Alignment Değerleri

Alignment, -1.0 ile 1.0 arasında x ve y koordinatları kullanır:

Align(
  alignment: Alignment(0.0, 0.0), // Tam ortası (Alignment.center ile aynı)
  child: Text('Merkez'),
)

Align(
  alignment: Alignment(-1.0, -1.0), // Sol üst (Alignment.topLeft ile aynı)
  child: Text('Sol Üst'),
)

Align(
  alignment: Alignment(1.0, 1.0), // Sağ alt (Alignment.bottomRight ile aynı)
  child: Text('Sağ Alt'),
)

Koordinat Sistemi

  • x ekseni: -1.0 (sol) → 0.0 (ortası) → 1.0 (sağ)
  • y ekseni: -1.0 (üst) → 0.0 (ortası) → 1.0 (alt)

Özel Konumlar

// Sağa yakın, ortada
Align(
  alignment: Alignment(0.5, 0.0),
  child: Text('Sağa kayık'),
)

// Sol üst köşeye yakın, tam köşede değil
Align(
  alignment: Alignment(-0.7, -0.7),
  child: Text('Sol üste yakın'),
)

// Alt kenara yakın, yatayda ortada
Align(
  alignment: Alignment(0.0, 0.8),
  child: Text('Alta yakın'),
)

FractionalOffset (Alternatif)

FractionalOffset kullanarak 0.0 ile 1.0 arasında oransal konumlandırma yapabilirsiniz:

Align(
  alignment: FractionalOffset(0.0, 0.0), // Sol üst
  child: Text('Sol Üst'),
)

Align(
  alignment: FractionalOffset(0.5, 0.5), // Tam ortası
  child: Text('Ortası'),
)

Align(
  alignment: FractionalOffset(1.0, 1.0), // Sağ alt
  child: Text('Sağ Alt'),
)

Fark: FractionalOffset'te (0, 0) sol üsttir, (1, 1) sağ alttır. Alignment'te ise (-1, -1) sol üst, (1, 1) sağ alttır.

Pratik Kullanım Örnekleri

Örnek 1: Rozet (Badge) Oluşturma

Stack(
  children: [
    Icon(Icons.notifications, size: 32),
    Align(
      alignment: Alignment.topRight,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3', style: TextStyle(color: Colors.white, fontSize: 10)),
      ),
    ),
  ],
)

Örnek 2: Floating Action Button Benzeri

Container(
  width: 300,
  height: 400,
  color: Colors.grey.shade100,
  child: Align(
    alignment: Alignment.bottomRight,
    child: Padding(
      padding: EdgeInsets.all(16),
      child: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    ),
  ),
)

Örnek 3: Kapat Butonu

Container(
  width: 300,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Stack(
    children: [
      Padding(
        padding: EdgeInsets.all(16),
        child: Text('İçerik'),
      ),
      Align(
        alignment: Alignment.topRight,
        child: IconButton(
          icon: Icon(Icons.close),
          onPressed: () {},
        ),
      ),
    ],
  ),
)

Örnek 4: Alt Bilgi Çubuğu

Container(
  width: 300,
  height: 400,
  child: Align(
    alignment: Alignment.bottomCenter,
    child: Container(
      width: double.infinity,
      padding: EdgeInsets.all(16),
      color: Colors.blue,
      child: Text(
        'Alt Bilgi',
        style: TextStyle(color: Colors.white),
        textAlign: TextAlign.center,
      ),
    ),
  ),
)

Align vs Center vs mainAxisAlignment

Center

Center(child: Text('Ortası'))
// Her zaman tam ortalar, başka seçenek yok

Align

Align(
  alignment: Alignment.topRight,
  child: Text('Sağ üst'),
)
// Herhangi bir noktaya hizalayabilir

mainAxisAlignment (Row/Column)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [Text('Ortası')],
)
// Sadece ana eksen boyunca hizalar
// Birden fazla child ile çalışır

widthFactor ve heightFactor

Align'ın boyutunu child'a göre ayarlayabilirsiniz:

Align(
  alignment: Alignment.topLeft,
  widthFactor: 2.0,  // Child genişliğinin 2 katı
  heightFactor: 1.5, // Child yüksekliğinin 1.5 katı
  child: Container(
    width: 50,
    height: 50,
    color: Colors.blue,
  ),
)

Bu durumda Align widget'ı 100x75 piksel boyutunda olur (50x2, 50x1.5).

Responsive Hizalama

LayoutBuilder(
  builder: (context, constraints) {
    // Küçük ekranlarda alt ortada, büyük ekranlarda sağ altta
    final alignment = constraints.maxWidth < 600
        ? Alignment.bottomCenter
        : Alignment.bottomRight;
    
    return Align(
      alignment: alignment,
      child: ElevatedButton(
        onPressed: () {},
        child: Text('Dinamik Konum'),
      ),
    );
  },
)

Ne Zaman Kullanmalı?

Align kullanın:

  • Belirli bir köşeye veya kenara hizalama gerektiğinde
  • Özel konumlandırma yapmak istediğinizde
  • Stack içinde konum belirlerken
  • Center'dan daha fazla kontrol gerektiğinde

Center kullanın:

  • Sadece ortalama gerektiğinde
  • Basit ve hızlı çözüm yeterli olduğunda

mainAxisAlignment/crossAxisAlignment kullanın:

  • Birden fazla widget hizalarken
  • Row veya Column içinde çalışırken

Özet

Align widget'ı:

  • İçinde bulunduğu alana göre child'ı hizalar
  • Center'ın gelişmiş versiyonudur
  • -1.0 ile 1.0 arası koordinat sistemi kullanır
  • Önceden tanımlı 9 standart konum vardır
  • Özel konumlar için Alignment(x, y) kullanılır
  • Stack ile birlikte çok kullanışlıdır

Align, hassas konumlandırma gereken durumlarda vazgeçilmez bir araçtır.

arrow_backTüm Yazılar