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 !
Table of Contents
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.