Separator
- Flutter kursu
- Başlangıç
- Ders 49/99
- 4 dk
ListView.separated ile satır aralarına ayraç koymayı öğrenirsin.
ListView.separated
ListView.separated, liste öğeleri arasına ayraç (separator) koyan ListView türüdür. itemCount ve itemBuilder yanı sıra bir separatorBuilder alır; bu, her iki öğe arasına çizilecek widget'ı üretir. En yaygın ayraç Divider widget'ıdır.
ListView.separated(
itemCount: 10,
separatorBuilder: (context, index) => Divider(),
itemBuilder: (context, index) {
return ListTile(title: Text('Öğe $index'));
},
)Divider widget'ı
Divider, yatay bir çizgi çizen basit bir widget'tır. ListView.separated'ta separatorBuilder olarak sıkça kullanılır. thickness parametresi çizgi kalınlığını, color rengini, indent sol ve sağ boşluğunu belirler. Boş bir Container da ayraç olarak kullanılabilir ama Divider daha okunaklıdır.
ListView.separated(
itemCount: 5,
separatorBuilder: (context, index) => Divider(
color: Colors.grey,
thickness: 1,
indent: 16,
),
itemBuilder: (context, index) => ListTile(
title: Text('Kişi $index'),
),
)Uygulama Separator bilgisini yazdır
main içinde iki satırı print ile yazdır: separated ayrac ve divider cizgi.
Başlangıç kodu
void main() {
// iki satır yazdır:
// separated ayrac
// divider cizgi
}Örnek çözüm
void main() {
print('separated ayrac');
print('divider cizgi');
}Beklenen çıktı
separated ayrac divider cizgi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ListView.separated ne ekler?
- Öğelerin arasına ayraç Doğru cevap
- Öğelerin altına buton
- Öğelerin yanına simge
- Öğelerin üstüne başlık
Açıklama: ListView.separated, separatorBuilder ile öğelerin arasına ayraç widget'ı koyar.
2 Ayraç ekle
ListView.
____(
itemCount: 5,
separatorBuilder: (context, index) => Divider(),
itemBuilder: (context, index) => Text('$index'),
)ListView.
separated(
itemCount: 5,
separatorBuilder: (context, index) => Divider(),
itemBuilder: (context, index) => Text('$index'),
)Açıklama: separated, ListView'in ayraçlı liste üreten adlandırılmış kurucusudur.
3 Separator kavramları
| Kavram | Anlamı |
|---|---|
ListView.separated |
Ayraçlı liste |
separatorBuilder |
Ayraç üreten fonksiyon |
Divider |
Yatay çizgi widget'ı |
indent |
Çizgi kenar boşluğu |