# CollectionView
## Giriş
**CollectionView** widget'ı, Nylo projelerinizde veri listelerini görüntülemek için güçlü, tip güvenli bir sarıcıdır. `ListView`, `ListView.separated` ve grid düzenleri ile çalışmayı kolaylaştırırken şunlar için yerleşik destek sağlar:
- Otomatik yükleme durumları ile asenkron veri yükleme
- Çekerek yenileme ve sayfalama
- Konum yardımcıları ile tip güvenli öğe oluşturucular
- Boş durum yönetimi
- Veri sıralama ve dönüştürme
## Temel Kullanım
Öğe listesi görüntüleyen basit bir örnek:
``` dart
@override
Widget build(BuildContext context) {
return Scaffold(
body: CollectionView(
data: () => ['Item 1', 'Item 2', 'Item 3'],
builder: (context, item) {
return ListTile(
title: Text(item.data),
);
},
),
);
}
```
API'den asenkron veri ile:
``` dart
CollectionView(
data: () async {
return await api((request) =>
request.get('https://jsonplaceholder.typicode.com/todos')
);
},
builder: (context, item) {
return ListTile(
title: Text(item.data.title),
subtitle: Text(item.data.completed ? 'Done' : 'Pending'),
);
},
)
```
## CollectionItem Yardımcısı
`builder` callback'i, verilerinizi kullanışlı konum yardımcıları ile saran bir `CollectionItem` nesnesi alır:
``` dart
CollectionView(
data: () => ['First', 'Second', 'Third', 'Fourth'],
builder: (context, item) {
return Container(
color: item.isEven ? Colors.grey[100] : Colors.white,
child: ListTile(
title: Text('${item.data} (index: ${item.index})'),
subtitle: Text('Progress: ${(item.progress * 100).toInt()}%'),
),
);
},
)
```
### CollectionItem Özellikleri
| Özellik | Tür | Açıklama |
|----------|------|-------------|
| `data` | `T` | Gerçek öğe verisi |
| `index` | `int` | Listedeki mevcut indeks |
| `totalItems` | `int` | Toplam öğe sayısı |
| `isFirst` | `bool` | İlk öğe ise true |
| `isLast` | `bool` | Son öğe ise true |
| `isOdd` | `bool` | İndeks tek sayı ise true |
| `isEven` | `bool` | İndeks çift sayı ise true |
| `progress` | `double` | Liste içindeki ilerleme (0.0 - 1.0) |
### CollectionItem Metotları
| Metot | Açıklama |
|--------|-------------|
| `isAt(int position)` | Öğenin belirli bir konumda olup olmadığını kontrol eder |
| `isInRange(int start, int end)` | İndeksin aralık içinde olup olmadığını kontrol eder (dahil) |
| `isMultipleOf(int divisor)` | İndeksin bölenın katı olup olmadığını kontrol eder |
## CollectionView
Varsayılan kurucu standart bir liste görünümü oluşturur:
``` dart
CollectionView>(
data: () async {
return [
{"title": "Clean Room"},
{"title": "Go shopping"},
{"title": "Buy groceries"},
];
},
builder: (context, item) {
return ListTile(title: Text(item.data['title']));
},
spacing: 8.0, // Add spacing between items
padding: EdgeInsets.all(16),
)
```
## CollectionView.separated
Öğeler arasında ayırıcıları olan bir liste oluşturur:
``` dart
CollectionView.separated(
data: () async => await fetchUsers(),
builder: (context, item) {
return ListTile(
title: Text(item.data.name),
subtitle: Text(item.data.email),
);
},
separatorBuilder: (context, index) {
return Divider(height: 1);
},
)
```
## CollectionView.grid
Kademeli grid kullanarak bir grid düzeni oluşturur:
``` dart
CollectionView.grid(
data: () async => await fetchProducts(),
builder: (context, item) {
return ProductCard(product: item.data);
},
crossAxisCount: 2,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
padding: EdgeInsets.all(16),
)
```
## CollectionView.pullable
Çekerek yenileme ve sonsuz kaydırma sayfalaması ile bir liste oluşturur:
``` dart
CollectionView.pullable(
data: (int iteration) async {
// iteration starts at 1 and increments on each load
return await api((request) =>
request.get('/posts?page=$iteration')
);
},
builder: (context, item) {
return PostCard(post: item.data);
},
onRefresh: () {
print('List was refreshed!');
},
headerStyle: 'WaterDropHeader', // Pull indicator style
)
```
### Başlık Stilleri
`headerStyle` parametresi şunları kabul eder:
- `'WaterDropHeader'` (varsayılan) - Su damlası animasyonu
- `'ClassicHeader'` - Klasik çekme göstergesi
- `'MaterialClassicHeader'` - Material tasarım stili
- `'WaterDropMaterialHeader'` - Material su damlası
- `'BezierHeader'` - Bezier eğri animasyonu
### Sayfalama Callback'leri
| Callback | Açıklama |
|----------|-------------|
| `beforeRefresh` | Yenileme başlamadan önce çağrılır |
| `onRefresh` | Yenileme tamamlandığında çağrılır |
| `afterRefresh` | Veri yüklendikten sonra çağrılır, dönüştürme için veri alır |
## CollectionView.pullableSeparated
Çekerek yenilemeyi ayırıcılı liste ile birleştirir:
``` dart
CollectionView.pullableSeparated(
data: (iteration) async => await fetchMessages(page: iteration),
builder: (context, item) {
return MessageTile(message: item.data);
},
separatorBuilder: (context, index) => Divider(),
)
```
## CollectionView.pullableGrid
Çekerek yenilemeyi grid düzeni ile birleştirir:
``` dart
CollectionView.pullableGrid(
data: (iteration) async => await fetchPhotos(page: iteration),
builder: (context, item) {
return Image.network(item.data.url);
},
crossAxisCount: 3,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
)
```
## Yükleme Stilleri
`loadingStyle` kullanarak yükleme göstergesini özelleştirin:
``` dart
// Normal loading with custom widget
CollectionView- (
data: () async => await fetchItems(),
builder: (context, item) => ItemTile(item: item.data),
loadingStyle: LoadingStyle.normal(
child: Text("Loading items..."),
),
)
// Skeletonizer loading effect
CollectionView(
data: () async => await fetchUsers(),
builder: (context, item) => UserCard(user: item.data),
loadingStyle: LoadingStyle.skeletonizer(
child: UserCard(user: User.placeholder()),
effect: SkeletonizerEffect.shimmer,
),
)
```
## Boş Durum
Liste boş olduğunda özel bir widget görüntüleyin:
``` dart
CollectionView
- (
data: () async => await fetchItems(),
builder: (context, item) => ItemTile(item: item.data),
empty: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.inbox, size: 64, color: Colors.grey),
SizedBox(height: 16),
Text('No items found'),
],
),
),
)
```
## Veri Sıralama ve Dönüştürme
### Sıralama
Öğeleri görüntülemeden önce sıralayın:
``` dart
CollectionView(
data: () async => await fetchTasks(),
builder: (context, item) => TaskTile(task: item.data),
sort: (List items) {
items.sort((a, b) => a.dueDate.compareTo(b.dueDate));
return items;
},
)
```
### Dönüştürme
Yükleme sonrasında verileri dönüştürün:
``` dart
CollectionView(
data: () async => await fetchUsers(),
builder: (context, item) => UserTile(user: item.data),
transform: (List users) {
// Filter to only active users
return users.where((u) => u.isActive).toList();
},
)
```
## Durumu Güncelleme
Bir CollectionView'a `stateName` vererek güncelleyebilir veya sıfırlayabilirsiniz:
``` dart
CollectionView(
stateName: "my_todo_list",
data: () async => await fetchTodos(),
builder: (context, item) => TodoTile(todo: item.data),
)
```
### Listeyi sıfırlama
``` dart
// Resets and reloads data from scratch
CollectionView.stateReset("my_todo_list");
```
### Bir öğeyi kaldırma
``` dart
// Remove item at index 2
CollectionView.removeFromIndex("my_todo_list", 2);
```
### Genel güncelleme tetikleme
``` dart
// Using the global updateState helper
updateState("my_todo_list");
```
## Parametre Referansı
### Ortak Parametreler
| Parametre | Tür | Açıklama |
|-----------|------|-------------|
| `data` | `Function()` | `List` veya `Future>` döndüren fonksiyon |
| `builder` | `CollectionItemBuilder` | Her öğe için oluşturucu fonksiyon |
| `empty` | `Widget?` | Liste boş olduğunda gösterilen widget |
| `loadingStyle` | `LoadingStyle?` | Yükleme göstergesini özelleştirme |
| `header` | `Widget?` | Listenin üstündeki başlık widget'ı |
| `stateName` | `String?` | Durum yönetimi için ad |
| `sort` | `Function(List)?` | Öğeler için sıralama fonksiyonu |
| `transform` | `Function(List)?` | Veri için dönüştürme fonksiyonu |
| `spacing` | `double?` | Öğeler arası boşluk |
### Çekilebilir Özel Parametreler
| Parametre | Tür | Açıklama |
|-----------|------|-------------|
| `data` | `Function(int iteration)` | Sayfalanmış veri fonksiyonu |
| `onRefresh` | `Function()?` | Yenileme tamamlandığında callback |
| `beforeRefresh` | `Function()?` | Yenilemeden önce callback |
| `afterRefresh` | `Function(dynamic)?` | Veri yüklendikten sonra callback |
| `headerStyle` | `String?` | Çekme göstergesi stili |
| `footerLoadingIcon` | `Widget?` | Sayfalama için özel yükleme göstergesi |
### Grid Özel Parametreleri
| Parametre | Tür | Açıklama |
|-----------|------|-------------|
| `crossAxisCount` | `int` | Sütun sayısı (varsayılan: 2) |
| `mainAxisSpacing` | `double` | Öğeler arası dikey boşluk |
| `crossAxisSpacing` | `double` | Öğeler arası yatay boşluk |
### ListView Parametreleri
Tüm standart `ListView` parametreleri de desteklenir: `scrollDirection`, `reverse`, `controller`, `physics`, `shrinkWrap`, `padding`, `cacheExtent` ve daha fazlası.