Meydan okuma 2
- Flutter kursu
- Başlangıç
- Ders 97/99
- 3 dk
ListView ve ListTile ile kişi listesi ekranı yaparsın.
Kişi listesi ekranı
Bir kişi listesi ekranı yapmak için ListView.builder ve ListTile kullanırsın. ListView.builder, itemCount ve itemBuilder parametreleri alır; itemBuilder her satırı oluşturur. ListTile'ın title parametresine Text widget'ı vererek kişi adını gösterirsin.
ListView.builder(
itemCount: kisiler.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(kisiler[index]),
);
},
)Uygulama Kişi listesi ekranı yap
listeGoster adında bir fonksiyon yaz; çağrılınca Liste hazir yazdırsın. ListeEkrani adında bir StatelessWidget yaz; build metodunda kisiler adında bir List<String> tanımla ve ListView.builder ile her kişiyi ListTile olarak göster. main içinde listeGoster'i çağır ve runApp ile başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// listeGoster fonksiyonu yaz
// ListeEkrani adinda StatelessWidget yaz
// kisiler adinda bir liste tanimla ve ListView.builder ile goster
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
void listeGoster() {
print('Liste hazir');
}
class ListeEkrani extends StatelessWidget {
const ListeEkrani({super.key});
@override
Widget build(BuildContext context) {
final kisiler = ['Ali', 'Veli', 'Ayse'];
return MaterialApp(
home: Scaffold(
body: ListView.builder(
itemCount: kisiler.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(kisiler[index]),
);
},
),
),
);
}
}
void main() {
listeGoster();
runApp(const ListeEkrani());
}Beklenen çıktı
Liste hazir
Uygulama Kişi modeli ile liste yap
listeyiYazdir adında bir fonksiyon yaz; çağrılınca Kisi listesi yazdırsın. Kisi adında bir sınıf yaz; ad (String) alanı ve kurucu metodu olsun. KisiListesi adında bir StatelessWidget yaz; build metodunda Kisi nesnelerinden oluşan bir liste tanımla ve ListView.builder ile her kişinin ad değerini ListTile olarak göster. main içinde listeyiYazdir'ı çağır ve runApp ile başlat.
Başlangıç kodu
import 'package:flutter/material.dart';
// Kisi adinda bir sinif yaz
// KisiListesi adinda StatelessWidget yaz
// Kisi nesnelerinden liste yap ve ListView.builder ile goster
void main() {
}Örnek çözüm
import 'package:flutter/material.dart';
class Kisi {
String ad;
Kisi({required this.ad});
}
void listeyiYazdir() {
print('Kisi listesi');
}
class KisiListesi extends StatelessWidget {
const KisiListesi({super.key});
@override
Widget build(BuildContext context) {
final kisiler = [Kisi(ad: 'Ali'), Kisi(ad: 'Veli')];
return MaterialApp(
home: Scaffold(
body: ListView.builder(
itemCount: kisiler.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(kisiler[index].ad),
);
},
),
),
);
}
}
void main() {
listeyiYazdir();
runApp(const KisiListesi());
}Beklenen çıktı
Kisi listesi
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ListView.builder'ın itemCount parametresi ne için kullanılır?
- Listenin rengini belirler
- Listenin yazı tipini değiştirir
- Listenin yüksekliğini ayarlar
- Listedeki öğe sayısını belirtir Doğru cevap
Açıklama: itemCount parametresi listedeki öğe sayısını belirtir; renk, yükseklik ve yazı tipi ile ilgili değildir.
2 itemBuilder içinde ListTile ekle
itemBuilder: (context, index) {
return ____(
title: Text(kisiler[index]),
);
},itemBuilder: (context, index) {
return ListTile(
title: Text(kisiler[index]),
);
},Açıklama: Liste satırı olarak ListTile kullanılır; Container, SizedBox ve Padding liste satırı widget'ı değildir.
3 Liste parçaları
| Kavram | Anlamı |
|---|---|
ListView.builder |
Listeyi oluşturan widget |
ListTile |
Satır widget'ı |
itemCount |
Öğe sayısı |
itemBuilder |
Her satırı oluşturan callback |