Flutter Column Kullanımı - Örneklerle Detaylı Rehber

[Uytar]

Flutter'da kullanıcı arayüzü oluştururken widget'lar temel yapı taşlarıdır. Column, widget'ları dikey bir şekilde hizalamak için kullanılan en yaygın düzen (layout) widget'larından biridir. Bu rehberde, Flutter'da Column widget'ının nasıl kullanıldığını, temel özelliklerini ve pratik örneklerle nasıl uygulanacağını detaylı bir şekilde ele alacağız. Ayrıca, sıkça sorulan sorular (FAQs) bölümüyle yaygın sorunlara çözümler sunacağız.

Column Widget'ı Nedir?​

Column, Flutter'da birden fazla widget'ı dikey eksende (yukarıdan aşağıya) sıralamak için kullanılan bir widget'tır. Çocuk widget'ları (children) bir liste olarak alır ve bunları belirtilen hizalamalara göre düzenler. Column, Row widget'ının dikey karşılığı olarak düşünülebilir.

Temel Özellikleri​

• children: Column içinde yer alacak widget'ların listesi. Örneğin, Text, Image, Button gibi widget'lar buraya eklenir.
• mainAxisAlignment: Ana eksen (dikey) boyunca widget'ların hizalanmasını kontrol eder (ör. üst, orta, alt).
• crossAxisAlignment: Çapraz eksen (yatay) boyunca widget'ların hizalanmasını belirler.
• mainAxisSize: Column'un ana eksen boyunca kapladığı alanı kontrol eder (minimum veya maksimum).

Column Widget'ının Kullanımı​

Column widget'ını kullanmak için Flutter projenizde bir Column oluşturmanız ve içine çocuk widget'lar eklemeniz yeterlidir. Aşağıda basit bir örnek verilmiştir:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Column Örneği')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Üst Widget', style: TextStyle(fontSize: 20)),
              SizedBox(height: 20), // Widget'lar arasında boşluk
              Icon(Icons.star, size: 50, color: Colors.yellow),
              ElevatedButton(
                onPressed: () {},
                child: Text('Tıkla'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Bu kod, üç widget'ı (Text, Icon ve ElevatedButton) dikey olarak hizalar ve bunları ekranın ortasında konumlandırır.

MainAxisAlignment Değerleri​

Column'da widget'ların dikey hizalanmasını kontrol etmek için mainAxisAlignment kullanılır. Yaygın değerler şunlardır:

• MainAxisAlignment.start: Widget'lar üstte hizalanır (varsayılan).
• MainAxisAlignment.center: Widget'lar ortada hizalanır.
• MainAxisAlignment.end: Widget'lar altta hizalanır.
• MainAxisAlignment.spaceBetween: Widget'lar arasında eşit boşluk bırakılır, kenarlarda boşluk olmaz.
• MainAxisAlignment.spaceAround: Widget'ların etrafında eşit boşluk bırakılır.
• MainAxisAlignment.spaceEvenly: Widget'lar ve kenarlar arasında eşit boşluk bırakılır.

Örnek:

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Birinci'),
    Text('İkinci'),
    Text('Üçüncü'),
  ],
)

CrossAxisAlignment Değerleri​

crossAxisAlignment, widget'ların yatay eksende nasıl hizalanacağını belirler:

• CrossAxisAlignment.start: Widget'lar sola hizalanır.
• CrossAxisAlignment.center: Widget'lar ortaya hizalanır (varsayılan).
• CrossAxisAlignment.end: Widget'lar sağa hizalanır.
• CrossAxisAlignment.stretch: Widget'lar yatayda tüm alanı kaplar.

Örnek:

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(
      color: Colors.blue,
      child: Text('Tam Genişlik'),
    ),
  ],
)

Pratik Örnek: Kullanıcı Profili Kartı​

Aşağıda, Column kullanarak basit bir kullanıcı profili kartı örneği verilmiştir:

class ProfileCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          padding: EdgeInsets.all(16),
          margin: EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 50,
                backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
              ),
              SizedBox(height: 16),
              Text(
                'Ahmet Yılmaz',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 8),
              Text(
                'Flutter Geliştiricisi',
                style: TextStyle(fontSize: 16, color: Colors.grey),
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {},
                child: Text('Profili Görüntüle'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Bu örnekte:

• CircleAvatar bir profil resmi gösterir.
• Text widget'ları isim ve unvanı belirtir.
• ElevatedButton bir aksiyon butonudur.
• SizedBox widget'ları, elemanlar arasında boşluk bırakır.

Column ile İlgili İpuçları​

Boşluk Kontrolü: Widget'lar arasında boşluk bırakmak için SizedBox kullanın veya mainAxisAlignment ile otomatik boşluk ayarlayın.

Esneklik için Expanded: Eğer bir widget'ın kalan alanı kaplaması gerekiyorsa, Expanded veya Flexible kullanabilirsiniz.

Kaydırma Desteği: Çok sayıda widget varsa, Column'u SingleChildScrollView içine sararak kaydırılabilir hale getirin:

SingleChildScrollView(
child: Column(
children: List.generate(20, (index) => Text('Öğe $index')),
),
)

Hata Önleme: Column'un boyutları sınırsız olabilir, bu yüzden genellikle Container, Center veya Scaffold gibi sınırlayıcı widget'lar içinde kullanın.

FAQs (Sıkça Sorulan Sorular)​

1. Column widget'ı neden hata veriyor (Unbounded Height)?​

Column, dikey eksende sınırsız alan kaplayabilir. Eğer Column bir sınırlayıcı widget (ör. Container, SizedBox) içinde değilse, Flutter "Unbounded Height" hatası verebilir. Çözüm:

• Column'u bir Container veya SizedBox içine alın ve yükseklik belirtin.
• Alternatif olarak, SingleChildScrollView kullanın.

2. Column içindeki widget'lar nasıl eşit aralıklarla hizalanır?​

mainAxisAlignment: MainAxisAlignment.spaceEvenly kullanarak widget'lar ve kenarlar arasında eşit boşluk bırakabilirsiniz.

3. Column'daki widget'ları yatayda nasıl sola hizalarım?​

crossAxisAlignment: CrossAxisAlignment.start kullanın.

4. Column'un içindeki bir widget tüm alanı kaplasın istiyorum, nasıl yaparım?​

İlgili widget'ı Expanded ile sarın:

Column(
  children: [
    Expanded(child: Container(color: Colors.blue)),
    Text('Diğer Widget'),
  ],
)

5. Column ve Row farkı nedir?​

• Column: Widget'ları dikey (yukarıdan aşağıya) hizalar.
• Row: Widget'ları yatay (soldan sağa) hizalar.

6. Column çok uzun olduğunda nasıl kaydırılabilir yaparım?​

Column'u SingleChildScrollView içine sarın:

SingleChildScrollView(
  child: Column(
    children: [
      // Uzun widget listesi
    ],
  ),
)

Sonuç​

Flutter'da Column widget'ı, dikey düzenlemeler için güçlü ve esnek bir araçtır. mainAxisAlignment ve crossAxisAlignment gibi özelliklerle widget'ların hizalanmasını kolayca özelleştirebilirsiniz. Pratik örnekler ve ipuçlarıyla, Column kullanarak kullanıcı dostu arayüzler oluşturmak oldukça basittir. Eğer karmaşık düzenler oluşturmanız gerekiyorsa, Column'u Row, Stack veya diğer layout widget'larıyla birleştirerek daha zengin tasarımlar elde edebilirsiniz.