Flutter ListView Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda ListView widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter, Google tarafından geliştirilen bir mobil uygulama geliştirme framework’üdür. Listview, Flutter’da sıklıkla kullanılan bir widget’tır ve dinamik olarak genişleyebilen listeler oluşturmak için kullanılır. Bu makalede, Flutter’da Listview widgeti özellikleri ve kullanımı hakkında bilgi edineceksiniz ve örnek kodlarla nasıl kullanabileceğinizi öğreneceksiniz.

Listview Widgeti Özellikleri

Listview widgeti, diğer widgetlerin listesini görüntülemek için kullanılır. Listview’in en önemli özellikleri şunlardır:

• ScrollDirection: Liste, yukarı veya aşağı doğru kaydırılabilir. Bu özellik, scrollDirection parametresi kullanılarak belirlenir.
• ShrinkWrap: Liste içeriğine göre boyutunu otomatik olarak ayarlar. Bu özellik, shrinkWrap parametresi kullanılarak belirlenir.
• ItemExtent: Her öğenin sabit bir yüksekliği vardır. Bu özellik, itemExtent parametresi kullanılarak belirlenir.
• Padding: Liste öğeleri arasındaki boşlukları ayarlar. Bu özellik, padding parametresi kullanılarak belirlenir.

Listview Kullanımı

Listview widgeti kullanmak için, öncelikle bir liste oluşturmanız gerekir. Bu liste, genellikle bir List<Widget> türündedir. Sonra, bu liste, ListView.builder veya ListView.separated constructor’ı kullanılarak listeye dönüştürülür

ListView.builder Kullanımı

ListView.builder, sayısız liste öğesi oluşturmak için kullanılır. Bu constructor, öğeleri dinamik olarak oluşturmanıza olanak tanır ve yalnızca mevcut görüntülenen öğeleri oluşturur.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
);

Bu örnekte, items adlı bir liste kullanarak, öğeleri gösteren bir liste oluşturuluyor. ListView.builder kullanarak, her bir öğe için ListTile widgeti oluşturulur ve listede görüntülenir.

ListView.separated Kullanımı

ListView.separated, öğeler arasında ayraç oluşturmak için kullanılır. Bu constructor, itemCount, separatorBuilder ve itemBuilder parametrelerini alır.

ListView.separated(
  itemCount: items.length,
  separatorBuilder: (context, index) => Divider(),
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
);

Bu örnekte, items adlı bir liste kullanarak, öğeleri gösteren bir liste oluşturuluyor. ListView.separated kullanarak, her bir öğe için ListTile widgeti oluşturulur ve Divider widgeti, öğeler arasında görüntülenir.

Listview Örnek Kod

Aşağıdaki örnek kod, ListView.builder kullanarak bir liste oluşturur ve her bir öğe için ListTile widgeti oluşturur.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final List items = List.generate(10000, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ListView Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter ListView Demo'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

Bu örnek kodda, ListView.builder widgeti kullanılarak items adlı bir liste oluşturuluyor ve öğeleri gösteren bir liste oluşturmak için kullanılıyor. Listview.builder, itemBuilder fonksiyonunu kullanarak her bir öğe için ListTile widgeti oluşturuyor.

Sonuç

Sonuç olarak, ListView widgeti, Flutter’da listeler oluşturmak için kullanılan en önemli widgetlerden biridir. ListView.builder ve ListView.separated constructor’ları kullanarak, liste öğelerini oluşturabilir ve özelleştirebilirsiniz. ListView, ShrinkWrap, ItemExtent ve Padding gibi özelliklerle birlikte kullanılarak, listeleri tam olarak ihtiyacınız olan şekilde düzenleyebilirsiniz.

Evet ListView widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.