Flutter'da Temel Widget’lar: Text, Container, Row, Column, ListView

Flutter’da kullanıcı arayüzü oluşturmanın temeli widget’ları doğru kullanmaktan geçer. Bu rehberde, Flutter’ın en temel ve en sık kullanılan widget’ları olan Text, Container, Row, Column ve ListView‘ı detaylıca inceleyeceğiz. Her widget’ın kullanımını, özelliklerini ve gerçek dünya senaryolarını örneklerle açıklayacağız.

1. Text Widget

1.1. Nedir?

Metin göstermek için kullanılan temel widget’tır.

1.2. Temel Kullanım

Text(
  'Merhaba Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

1.3. Özellikleri ve Parametreler

Parametre	Açıklama	Örnek
`style`	Metin stili	`TextStyle(fontSize: 16)`
`textAlign`	Hizalama	`TextAlign.center`
`maxLines`	Maksimum satır sayısı	`maxLines: 2`
`overflow`	Taşma davranışı	`TextOverflow.ellipsis`
`textScaleFactor`	Metin ölçeklendirme	`textScaleFactor: 1.2`

1.4. Gerçek Dünya Örneği

Text(
  'Flutter ile mobil uygulama geliştirme oldukça keyiflidir. '
  'Widget tabanlı yapısı sayesinde hızlı ve etkili arayüzler oluşturabilirsiniz.',
  style: const TextStyle(
    fontSize: 16,
    height: 1.5, // Satır yüksekliği
  ),
  textAlign: TextAlign.justify,
  maxLines: 3,
  overflow: TextOverflow.ellipsis,
)

2. Container Widget

2.1. Nedir?

Diğer widget’ları sarmalayan ve dekore eden çok yönlü bir widget’tır.

2.2. Temel Kullanım

Container(
  width: 200,
  height: 100,
  margin: const EdgeInsets.all(16),
  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: const Text('Merhaba Container'),
)

2.3. Özellikleri ve Parametreler

Parametre	Açıklama	Örnek
`margin`	Dış boşluk	`EdgeInsets.all(16)`
`padding`	İç boşluk	`EdgeInsets.symmetric(horizontal: 20)`
`decoration`	Dekorasyon	`BoxDecoration(color: Colors.red)`
`constraints`	Boyut kısıtlamaları	`BoxConstraints.expand()`
`alignment`	İçerik hizalama	`Alignment.center`

2.4. Gerçek Dünya Örneği

Container(
  margin: const EdgeInsets.symmetric(vertical: 8),
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.3),
        spreadRadius: 2,
        blurRadius: 8,
        offset: const Offset(0, 2),
      ),
    ],
  ),
  child: const Row(
    children: [
      Icon(Icons.notifications, color: Colors.blue),
      SizedBox(width: 12),
      Expanded(
        child: Text('Yeni bildiriminiz var!'),
      ),
    ],
  ),
)

3. Row Widget

3.1. Nedir?

Widget’ları yatay olarak düzenler.

3.2. Temel Kullanım

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text('Sol'),
    Text('Orta'),
    Text('Sağ'),
  ],
)

3.3. Özellikleri ve Parametreler

Parametre	Açıklama	Örnek
`mainAxisAlignment`	Ana eksende hizalama	`MainAxisAlignment.spaceAround`
`crossAxisAlignment`	Çapraz eksende hizalama	`CrossAxisAlignment.start`
`mainAxisSize`	Ana eksen boyutu	`MainAxisSize.min`
`textDirection`	Metin yönü	`TextDirection.rtl`

3.4. Gerçek Dünya Örneği

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    const CircleAvatar(
      backgroundImage: NetworkImage('https://example.com/avatar.jpg'),
      radius: 20,
    ),
    const SizedBox(width: 12),
    const Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('Ahmet Yılmaz', style: TextStyle(fontWeight: FontWeight.bold)),
          Text('Son görülme: 2 dakika önce'),
        ],
      ),
    ),
    IconButton(
      icon: const Icon(Icons.message),
      onPressed: () {},
    ),
  ],
)

4. Column Widget

4.1. Nedir?

Widget’ları dikey olarak düzenler.

4.2. Temel Kullanım

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Text('Üst'),
    Text('Orta'),
    Text('Alt'),
  ],
)

4.3. Özellikleri ve Parametreler

Parametre	Açıklama	Örnek
`mainAxisAlignment`	Ana eksende hizalama	`MainAxisAlignment.spaceEvenly`
`crossAxisAlignment`	Çapraz eksende hizalama	`CrossAxisAlignment.end`
`mainAxisSize`	Ana eksen boyutu	`MainAxisSize.max`
`verticalDirection`	Dikey yön	`VerticalDirection.up`

4.4. Gerçek Dünya Örneği

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(
      height: 200,
      decoration: BoxDecoration(
        image: const DecorationImage(
          image: NetworkImage('https://example.com/image.jpg'),
          fit: BoxFit.cover,
        ),
        borderRadius: BorderRadius.circular(12),
      ),
    ),
    const SizedBox(height: 16),
    const Text(
      'Manzara Fotoğrafı',
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
    ),
    const SizedBox(height: 8),
    const Text(
      'Bu harika manzara Karadeniz bölgesinde çekilmiştir.',
      style: TextStyle(color: Colors.grey),
    ),
    const SizedBox(height: 16),
    ElevatedButton(
      onPressed: () {},
      child: const Text('Detayları Gör'),
    ),
  ],
)

5. ListView Widget

5.1. Nedir?

Kaydırılabilir liste oluşturur.

5.2. Temel Kullanım

ListView(
  padding: const EdgeInsets.all(16),
  children: [
    ListTile(title: Text('Öğe 1')),
    ListTile(title: Text('Öğe 2')),
    ListTile(title: Text('Öğe 3')),
  ],
)

5.3. Çeşitleri ve Parametreler

Tür	Açıklama	Örnek
`ListView`	Statik liste	`ListView(children: [...])`
`ListView.builder`	Dinamik liste	`ListView.builder(itemBuilder: ...)`
`ListView.separated`	Ayraçlı liste	`ListView.separated(separatorBuilder: ...)`
`ListView.custom`	Özel liste	`ListView.custom(childrenDelegate: ...)`

5.4. Gerçek Dünya Örneği

ListView.builder(
  itemCount: 20,
  itemBuilder: (context, index) {
    return Card(
      margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
      child: ListTile(
        leading: CircleAvatar(
          child: Text('${index + 1}'),
        ),
        title: Text('Kullanıcı ${index + 1}'),
        subtitle: Text('kullanici${index + 1}@email.com'),
        trailing: const Icon(Icons.arrow_forward),
        onTap: () {
          print('Kullanıcı ${index + 1} tıklandı');
        },
      ),
    );
  },
)

6. Birlikte Kullanım Örneği

Column(
  children: [
    Container(
      padding: const EdgeInsets.all(16),
      color: Colors.blue,
      child: const Text(
        'Başlık',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
    Expanded(
      child: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          for (int i = 0; i &lt; 10; i++)
            Container(
              margin: const EdgeInsets.only(bottom: 12),
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.2),
                    blurRadius: 4,
                    offset: const Offset(0, 2),
                  ),
                ],
              ),
              child: Row(
                children: [
                  Container(
                    width: 50,
                    height: 50,
                    color: Colors.blue,
                    child: Center(
                      child: Text(
                        '${i + 1}',
                        style: const TextStyle(color: Colors.white),
                      ),
                    ),
                  ),
                  const SizedBox(width: 16),
                  Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'Başlık ${i + 1}',
                          style: const TextStyle(fontWeight: FontWeight.bold),
                        ),
                        Text('Açıklama ${i + 1}'),
                      ],
                    ),
                  ),
                ],
              ),
            ),
        ],
      ),
    ),
  ],
)

7. Performans İpuçları

ListView.builder kullanarak sadece görünür öğeleri oluşturun.
const widget’ları kullanarak gereksiz rebuild’leri önleyin.
SizedBox ile sabit boyutlar belirleyin.
Flexible ve Expanded ile responsive tasarım yapın.

Sonuç

Text: Metin gösterimi için temel widget
Container: Dekorasyon ve layout için çok yönlü widget
Row/Column: Yatay/dikey düzenleme için
ListView: Kaydırılabilir listeler için