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 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')),
      ),
    ],
  );

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 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) ?? ''),
    ),
  );

Sonsuz elemanlı ListView

ListView.builder(
    itemBuilder: (BuildContext context, int i) => Container(
      height: 100,
      child: Text('Widget: $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 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.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 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;
}

const ListView.custom(
    childrenDelegate: YazilimBloguCustomDelegate(liste: [
      'yazilimblogu',
      'flutter listView kullanımı',
      'flutter listView nedir?',
    ]),
  );

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

Sorularınızı ve isteklerinizi yorum bölümünden iletebilirsiniz.

• flutter.dev