Flutter Dersleri #3 - ListView Kullanımı

Flutter ListView Kullanımı

ListView Flutter'da bilinmesi gereken en önemli widgetlardan biridir. Ayrıca en çok kullanılan scroll edilebilen widgetların başında gelir.

ListView kendisine verilen widget listesini; tanımlanan scrollDirection'a göre alt alta ya da yan yana sıralar ve scroll edilebilir bir kullanımda oluşturur.

ListView oluşturmak için 4 seçenek vardır:

1 - ListView(...), varsayılan constructor

ListView - varsayılan constructor, children widget listesi alır ve bu listeyi basit bir şekilde sıralar. Bütün child widgetları ram üzerinde tuttuğu için, az sayıda child içeren ekranlar için uygundur ve child sayısı sabittir.

ListView({
    Axis scrollDirection = Axis.vertical,
    Key key,
    ScrollController controller,
    bool reverse = false,
    ScrollPhysics physics,
    bool primary,
    EdgeInsetsGeometry padding,
    bool shrinkWrap = false,
    bool addAutomaticKeepAlives = true,
    this.itemExtent,
    Clip clipBehavior = Clip.hardEdge,
    bool addSemanticIndexes = true,
    bool addRepaintBoundaries = true,
    List <&Widget> children = const <&Widget>[],
    double cacheExtent,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    int semanticChildCount,
    String restorationId,
  })
ListView'a ait constructor.
 

ListView kullanımı

ListView(
    padding: const EdgeInsets.all(16),
    children: <Widget>[
      Container(
        height: 400,
        color: Colors.amber,
        child: const Center(child: Text('Amber')),
      ),
      Container(
        height: 500,
        color: Colors.red,
        child: const Center(child: Text('Red')),
      ),
      Container(
        height: 200,
        color: Colors.blue,
        child: const Center(child: Text('Blue')),
      ),
    ],
  );
3 Container'ı alt alta sıralayacak şekilde bir ListView kullanımı.
 

2 - ListView.builder(..)

ListView.builder yapısı bir liste alır ve o listeyi sırayla widget'a dönüştürüp, liste görünümüne kavuşturur.
Bu kullanım çok sayıda child içerecek liste yapıları için uygundur. Sadece ekranın görünün kısmındaki child widgetlar render edildiği için, ram'de fazla yer kaplamaz. Hatta sonsuz sayıda child içeren listeler bile yapılabilir, child sayısı değişken olabilir.

ListView.builder({
    bool reverse = false,
    Axis scrollDirection = Axis.vertical,
    Key key,
    bool primary,
    ScrollController controller,
    bool shrinkWrap = false,
    ScrollPhysics physics,
    this.itemExtent,
    EdgeInsetsGeometry padding,
    int itemCount,
    @required IndexedWidgetBuilder itemBuilder,
    bool addRepaintBoundaries = true,
    Clip clipBehavior = Clip.hardEdge,
    bool addAutomaticKeepAlives = true,
    double cacheExtent,
    int semanticChildCount,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    bool addSemanticIndexes = true,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String restorationId,
  })
ListView.builder'a ait constructor.
 

ListView.builder kullanımı

const List<String> stringListesi = [
    'yazilimblogu',
    'flutter listView kullanımı',
    'flutter listView nedir?',
  ];

  ListView.builder(
    itemCount: stringListesi.length,
    itemBuilder: (BuildContext context, int i) => Container(
      height: 100,
      child: Text(stringListesi?.elementAt(i) ?? ''),
    ),
  );
ListView.builder ile basit bir liste örneği.
 

Sonsuz elemanlı ListView

ListView.builder(
    itemBuilder: (BuildContext context, int i) => Container(
      height: 100,
      child: Text('Widget: $i'),
    ),
  );
ListView.builder ile sonsuz elemanlı liste örneği.
 

ListView.builder ile dinamik listeleri scroll edilebilir widget'a çevirmek çok kolaydır.

ListView.builder iki parametre bekler:

  • itemCount, listView'ın kaç elemanlı olacağını belirtir. Boş bırakılırsa, listView sonsuz sayıda child ile oluşur.
  • itemBuilder, bu fonksiyon Widget return edilmesini bekler. Return edilen widget itemCount sayısı kadar tekrar tekrar oluşturulur.

 

 

3 - ListView.separated(...)

ListView.separated, bu yapı ListView.builder ile benzerdir ancak separated ile üretilen widget bütün child widgetların arasına eklenir. Bu widget sıklıkla kullanılan bir divider yani düz çizgi de olabilir; karmaşık bir widget da olabilir.

ListView.separated({
    bool primary,
    Axis scrollDirection = Axis.vertical,
    Key key,
    ScrollController controller,
    ScrollPhysics physics,
    bool shrinkWrap = false,
    @required IndexedWidgetBuilder itemBuilder,
    bool reverse = false,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    @required int itemCount,
    EdgeInsetsGeometry padding,
    String restorationId,
    bool addRepaintBoundaries = true,
    @required IndexedWidgetBuilder separatorBuilder,
    double cacheExtent,
    bool addAutomaticKeepAlives = true,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    bool addSemanticIndexes = true,
    Clip clipBehavior = Clip.hardEdge,
  })
ListView.separated'a ait constructor.
 

ListView.separated kullanımı

const List<String> stringListesi = [
    'yazilimblogu',
    'flutter listView kullanımı',
    'flutter listView nedir?',
  ];

  ListView.separated(
    itemCount: stringListesi.length,
    itemBuilder: (BuildContext context, int i) => Container(
      height: 100,
      child: Text(stringListesi?.elementAt(i) ?? ''),
    ),
    separatorBuilder: (_contex, int i) => Divider(),
  );
ListView.separated ile basit bir liste örneği.
 

ListView.custom 3 parametre bekler:

  • itemCount, listView'ın kaç elemanlı olacağını belirtir. Boş bırakılırsa, listView -tıpkı builder constructor'ı gibi- sonsuz sayıda child ile oluşur.
  • itemBuilder, bu fonksiyon Widget return edilmesini bekler. Return edilen widgetitemCount sayısı kadar tekrar tekrar oluşturulur.
  • separatorBuilder, bu fonksiyonda return edilen widget ise, itemBuilder'ın eklediği widget'dan sonra listView'a eklenir. Yani önce itemBuilder sonra separatorBuilder çalışır.

 

 

4 - ListView.custom(...)

ListView.custom ile custom SliverChildDelegate yapıları kolayca kullanılabilir. Üstteki kullanımlara göre biraz daha farklı bir şekilde oluşturularak kullanılır.

ListView.custom({
    bool reverse = false,
    Axis scrollDirection = Axis.vertical,
    Key key,
    EdgeInsetsGeometry padding,
    ScrollController controller,
    ScrollPhysics physics,
    bool primary,
    @required this.childrenDelegate,
    bool shrinkWrap = false,
    DragStartBehavior dragStartBehavior = DragStartBehavior.start,
    this.itemExtent,
    Clip clipBehavior = Clip.hardEdge,
    int semanticChildCount,
    double cacheExtent,
    ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
    String restorationId,
  })
ListView.custom'a ait constructor.

ListView.custom kullanımı

class YazilimBloguCustomDelegate extends SliverChildDelegate {
  const YazilimBloguCustomDelegate({this.liste});

  List liste;

  @override
  int get estimatedChildCount => liste?.length;

  @override
  bool shouldRebuild(SliverChildDelegate old) => true;

  @override
  Widget build(BuildContext context, int index) => index < estimatedChildCount
      ? Container(
          child: Text(liste?.elementAt(index) ?? ''),
        )
      : null;
}
YazilimBloguCustomDelegate sınıfı.
const ListView.custom(
    childrenDelegate: YazilimBloguCustomDelegate(liste: [
      'yazilimblogu',
      'flutter listView kullanımı',
      'flutter listView nedir?',
    ]),
  );
Basit bir ListView.custom kullanımı.
 

Flutter ListView kullanımı ile ilgili önemli noktalara değinmeye çalıştık.

 
Sorularınızı ve isteklerinizi yorum bölümünden iletebilirsiniz.
Kaynak:
Bu postu paylaş:

0 yorum

Yorum yapmak için giriş yapmanız gerekmektedir. Giriş yap
Henüz hesabınız yoksa 20 saniyenizi ayırıp kayıt olabilirsiniz. Kaydol