Özet - ListView
- Flutter kursu
- Başlangıç
- Ders 50/99
- 4 dk
ListView, builder ve ListTile'ı birleştirerek kişi listesi yaparsın.
ListView özeti
ListView, kaydırılabilir liste sunar; ListView.builder büyük listeleri verimli üretir, ListView.separated öğeler arasına ayraç koyar. ListTile, başlık + alt başlık + leading + trailing ile yaygın liste satırı kalıbıdır. Bu araçları birleştirerek kişi listesi, ayarlar menüsü veya mesaj listesi yapabilirsin.
final kisiler = ['Ada', 'Bora', 'Cem', 'Deniz'];
ListView.builder(
itemCount: kisiler.length,
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(child: Text(kisiler[index][0])),
title: Text(kisiler[index]),
subtitle: Text('Kişi $index'),
trailing: Icon(Icons.arrow_forward),
);
},
)Uygulama Kişi listesi yap ve çalıştır
Önce print('liste hazir') yazdır, sonra runApp(MaterialApp(home: ListView.builder(...))) çağrısı yap. ListView.builder'ın itemCount: 3 ve itemBuilder parametresi ListTile(title: Text('Kişi $index'), leading: Icon(Icons.person)) döndürsün.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
// 'liste hazir' mesajını print ile yazdır
// runApp ile MaterialApp çağır; home bir liste olsun
}
// Liste: öğe sayısı ve öğe üretici içersin
// öğe üretici: ListTile döndürsün, title ve leading ileÖrnek çözüm
import 'package:flutter/material.dart';
void main() {
print('liste hazir');
runApp(MaterialApp(home: ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return ListTile(
title: Text('Kişi $index'),
leading: Icon(Icons.person),
);
},
)));
}Beklenen çıktı
liste hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bir kişi listesinde her satırda avatar + isim + alt bilgi göstermek için hangi widget kullanılır?
- SizedBox
- Padding
- Container
- ListTile Doğru cevap
Açıklama: Kişi listesinde her satır avatar + isim + alt bilgi gösterir; bu kalıp ListTile ile yapılır.
2 Liste öğesi başlığı
ListTile(
____: Text('Kişi adı'),
subtitle: Text('Alt bilgi'),
)ListTile(
title: Text('Kişi adı'),
subtitle: Text('Alt bilgi'),
)Açıklama: title parametresi ListTile'ın ana metnini belirler.
3 ListView birleşimi
| Kavram | Anlamı |
|---|---|
Kaydırılabilir liste |
ListView ile |
Verimli üretim |
ListView.builder ile |
Liste satırı |
ListTile ile |
Ayraçlı liste |
ListView.separated ile |