Flutter: ListView Widget Kullanımı

ListView, Flutter'da kaydırılabilir listeler oluşturmak için kullanılan temel widget'tır. Dikey veya yatay olarak sıralı öğeler oluşturmanızı sağlar. Listeleme işlemlerinde en sık kullanılan widget'lardan biridir.

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

ListView(
  children: [
    Text('Öğe 1'),
    Text('Öğe 2'),
    Text('Öğe 3'),
  ],
)

Önemli Özellikler

Özellik	Açıklama
scrollDirection	Kaydırma yönü (dikey/yatay)
padding	Liste içi boşluk
reverse	Ters sıralama
physics	Kaydırma davranışı
shrinkWrap	Boyut sığdırma
itemExtent	Sabit öğe yüksekliği

ListTile ile Klasik Kullanım

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('Kullanıcı Adı'),
      subtitle: Text('Alt başlık'),
      trailing: Icon(Icons.chevron_right),
      onTap: () {},
    ),
    ListTile(
      leading: Icon(Icons.email),
      title: Text('E-posta'),
      subtitle: Text('[email protected]'),
      trailing: Icon(Icons.chevron_right),
    ),
  ],
)

Özel Satır Tasarımı (ListTile Dışında)

ListTile dışında farklı satır tasarımları da yapabilirsiniz:

ListView(
  padding: EdgeInsets.all(8),
  children: [
    Container(
      padding: EdgeInsets.all(16),
      margin: EdgeInsets.only(bottom: 8),
      decoration: BoxDecoration(
        color: Colors.blue.shade50,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(color: Colors.blue),
      ),
      child: Row(
        children: [
          CircleAvatar(
            backgroundColor: Colors.blue,
            child: Icon(Icons.star, color: Colors.white),
          ),
          SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text('Özel Başlık', style: TextStyle(fontWeight: FontWeight.bold)),
                Text('Özel alt başlık metni'),
              ],
            ),
          ),
          IconButton(
            icon: Icon(Icons.favorite_border),
            onPressed: () {},
          ),
        ],
      ),
    ),
  ],
)

Yatay ListView

scrollDirection özelliği ile listeleri yatay olarak sıralayabilirsiniz:

Container(
  height: 120, // Yatay liste için sabit yükseklik gerekli
  child: ListView(
    scrollDirection: Axis.horizontal,
    children: [
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.red,
        child: Center(child: Text('1')),
      ),
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.green,
        child: Center(child: Text('2')),
      ),
      Container(
        width: 100,
        margin: EdgeInsets.all(8),
        color: Colors.blue,
        child: Center(child: Text('3')),
      ),
    ],
  ),
)

ListView.builder ile Dinamik Listeleme

Dinamik olarak liste oluşturmak için .builder alt sınıfından yararlanılır. Bu yöntem, büyük listelerde performans açısından çok önemlidir çünkü sadece ekranda görünen öğeleri oluşturur:

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(child: Text('$index')),
      title: Text('Öğe $index'),
      subtitle: Text('Bu öğenin açıklaması'),
    );
  },
)

ListView.builder ile Özel Tasarım

final List<Map<String, dynamic>> items = [
  {'title': 'Flutter', 'icon': Icons.flutter_dash, 'color': Colors.blue},
  {'title': 'Dart', 'icon': Icons.code, 'color': Colors.teal},
  {'title': 'Firebase', 'icon': Icons.cloud, 'color': Colors.orange},
];

ListView.builder(
  itemCount: items.length,
  padding: EdgeInsets.all(16),
  itemBuilder: (context, index) {
    final item = items[index];
    return Card(
      margin: EdgeInsets.only(bottom: 12),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            Icon(item['icon'], size: 40, color: item['color']),
            SizedBox(width: 16),
            Expanded(child: Text(item['title'], style: TextStyle(fontSize: 18))),
            ElevatedButton(
              onPressed: () {},
              child: Text('Detay'),
            ),
          ],
        ),
      ),
    );
  },
)

ListView.separated ile Ayırıcılı Liste

ListView.separated(
  itemCount: 10,
  separatorBuilder: (context, index) => Divider(
    color: Colors.grey,
    height: 1,
  ),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('Öğe $index'),
    );
  },
)

Kaydırma Kontrolü

final ScrollController _scrollController = ScrollController();

ListView.builder(
  controller: _scrollController,
  itemCount: 50,
  itemBuilder: (context, index) => ListTile(title: Text('Öğe $index')),
)

// Listeyi en üste kaydır
_scrollController.animateTo(
  0,
  duration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
);

Özet

• ListView: Temel kaydırılabilir liste widget'ı
• scrollDirection: Yatay veya dikey kaydırma
• ListView.builder: Dinamik ve performanslı listeleme
• ListView.separated: Ayırıcılı listeler
• ListTile: Standart liste öğesi
• Özel tasarımlar: Container, Card ile farklı satır tasarımları

ListView, Flutter'da listeleme işlemlerinin temel yapı taşıdır ve farklı senaryolara uygun çeşitli alt sınıflar sunar.