Flutter’da ListView Kullanımı

Bir önceki yazıda hatırlarsanız FutureBuilder kullanımını incelemiştik. Bu yazının konusu ise ListView ve özellikleri.

ListView, çoklu verilerinizin düzenli bir şekilde görünmesini sağlar. Bir ScrollView içerisinde yer almasına gerek yoktur çünkü ListView’in kendisi kaydırılabilirdir. 🙂

ListView, forEach yapısında verilerin ekrana basılması şeklinde de özetleyebiliriz. Genellikle bir builder’ı vardır, eğer yoksa bir children olarak bu verileri içerisine alabilir.

Bu veri tipleri arasında özellikle bir padding eklemeye gerek yoktur. ListView, bu işi sizin için halledecek bir Widget’tır. Eğer isterseniz seperated ListView oluşturarak, liste içerisindeki elementlerin birbirleri arasında bulunacak boşluk, ikon gibi şeyleri ayarlayabilirsiniz.

Normal bir ListView şu şekilde oluşturulur:

ListView(
  padding: const EdgeInsets.all(8),
  children: <Widget>[
    Container(
      height: 50,
      color: Colors.amber[600],
      child: const Center(child: Text('Entry A')),
    ),
    Container(
      height: 50,
      color: Colors.amber[500],
      child: const Center(child: Text('Entry B')),
    ),
    Container(
      height: 50,
      color: Colors.amber[100],
      child: const Center(child: Text('Entry C')),
    ),
  ],
)

Diyelim verileriniz dinamik ve değişken. Bu durumda ListView.builder kullanarak verilerinizi gösterebilirsiniz.

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  }
);

Peki ya ListView içerisinde elementlerin birbiri arasında çizgiler, ikonlar veya boşluk olmasını istiyorsunuz? O zaman ListView seperated bu iş için uygun.

final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];

ListView.separated(
  padding: const EdgeInsets.all(8),
  itemCount: entries.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      color: Colors.amber[colorCodes[index]],
      child: Center(child: Text('Entry ${entries[index]}')),
    );
  },
  separatorBuilder: (BuildContext context, int index) => const Divider(),
);

Yazımızın sonuna geldik. Eğer ListView ve FutureBuilder’ın birlikte nasıl kullanıldığını merak ediyorsanız bu örneğimi inceleyebilirsiniz. Normal bir ListView nasıl oluşturulur diye merak ediyorsanız ise bu örneğimi inceleyebilirsiniz. Ayrıca özel list itemlar’ı nasıl oluşturulur diye merak ediyorsanız basit bir uygulama yapmıştım. Son proje içerisinde de ListView ve FutureBuilder’ın birlikte kullanımı var. Hepsinin faydalı olacağını düşünüyorum örneklendirme açısından. 🙂 Herkese iyi kodlamalar!