Flutter: Card Widget ve Tasarım Kullanımı

Card, tasarım üzerinde kullanabileceğimiz kart etkisi yaratan bir Material Design widget'ıdır. Listeleme ve sayfa üzerinde sabit tasarımlarda kullanılabilir. Gölge efekti ve köşe yuvarlaklığı ile içeriği ön plana çıkarır.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ı deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Temel Kullanım

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('Kart İçeriği'),
  ),
)

Önemli Özellikler

Özellik	Açıklama
elevation	Gölge yüksekliği
shadowColor	Gölge rengi
shape	Kart şekli (köşe yuvarlaklığı)
color	Arka plan rengi
margin	Dış boşluk
clipBehavior	İçerik kırpma davranışı

Özelleştirilmiş Card

Card(
  elevation: 8,
  shadowColor: Colors.blue.withOpacity(0.5),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16),
  ),
  color: Colors.white,
  margin: EdgeInsets.all(8),
  child: ...
)

Kenarlıklı Card (Gölgesiz)

Card(
  elevation: 0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
    side: BorderSide(color: Colors.grey, width: 1),
  ),
  child: ...
)

Resimli Card

Card(
  clipBehavior: Clip.antiAlias, // Resmin köşeleri kırpılsın
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Column(
    children: [
      Image.network(
        'https://example.com/image.jpg',
        height: 150,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
      Padding(
        padding: EdgeInsets.all(16),
        child: Text('Kart Başlığı'),
      ),
    ],
  ),
)

ListTile ile Kullanım

Card(
  child: ListTile(
    leading: CircleAvatar(child: Icon(Icons.person)),
    title: Text('Kullanıcı Adı'),
    subtitle: Text('Alt başlık'),
    trailing: Icon(Icons.chevron_right),
    onTap: () {},
  ),
)

InkWell ile Tıklanabilir Card

Card(
  child: InkWell(
    onTap: () {
      print('Kart tıklandı');
    },
    borderRadius: BorderRadius.circular(12),
    child: Padding(
      padding: EdgeInsets.all(16),
      child: Text('Tıklanabilir Kart'),
    ),
  ),
)

Özet

• Card: Material Design kart widget'ı
• elevation: Gölge derinliği
• shape: Köşe yuvarlaklığı ve kenarlık
• clipBehavior: Resim kırpma için önemli
• ListTile: Kart içinde liste öğesi

Card, içeriği görsel olarak gruplamak için mükemmel bir araçtır.