Liste ve ekleme
- Flutter kursu
- Orta seviye
- Ders 82/99
- 4 dk
ListView ve FloatingActionButton ile ekleme akışı yazarsın.
ListView ile not listesi
Notları ekranda listelemek için ListView.builder kullanırsın. itemCount notların sayısını, itemBuilder ise her sıra için gösterilecek widget'ı üretir. Her not için genellikle bir ListTile gösterirsin.
ListView.builder(
itemCount: notlar.length,
itemBuilder: (context, index) {
final n = notlar[index];
return ListTile(title: Text(n.baslik));
},
)FloatingActionButton ile ekleme
Yeni not ekleme akışını başlatmak için FloatingActionButton kullanırsın. onPressed içinde Navigator.push ile ekleme ekranına geçersin; bu ekran geri döndüğünde yeni notu listeye eklersin.
FloatingActionButton(
onPressed: () async {
final yeniNot = await Navigator.push(
context,
MaterialPageRoute(builder: (_) => EklemeEkrani()),
);
if (yeniNot != null) {
// listeye ekle
}
},
child: const Icon(Icons.add),
)Uygulama ListView ile notları listele
NotlarEkrani adında bir StatelessWidget tanımla. final List<Note> notlar alanı required olsun. build metodu bir Scaffold döndürsün; gövdesi ListView.builder olsun ve itemCount notlar.length, itemBuilder her satırda ListTile(title: Text(n.baslik)) döndürsün. main içinde 'hazir' yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
class Note {
final String id;
final String baslik;
final String icerik;
Note(this.id, this.baslik, this.icerik);
}
// NotlarEkrani StatelessWidget tanımla
// final List<Note> notlar (required)
// build Scaffold döndürsün
// gövde ListView.builder olsun
// itemCount notlar.length, itemBuilder ListTile döndürsün
void main() {
// 'hazir' yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class Note {
final String id;
final String baslik;
final String icerik;
Note(this.id, this.baslik, this.icerik);
}
class NotlarEkrani extends StatelessWidget {
final List<Note> notlar;
const NotlarEkrani({super.key, required this.notlar});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Notlar')),
body: ListView.builder(
itemCount: notlar.length,
itemBuilder: (context, index) {
final n = notlar[index];
return ListTile(title: Text(n.baslik));
},
),
);
}
}
void main() {
print('hazir');
}Beklenen çıktı
hazir
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 ListView.builder'ın itemCount parametresi neyi belirtir?
- Her satırın yazı boyutunu
- Animasyon süresini
- Notların sayısını Doğru cevap
- Listenin yüksekliğini
Açıklama: itemCount, listede kaç satır gösterileceğini belirtir. Yükseklik, yazı boyutu ve animasyon süresi itemCount ile ilgili değildir.
2 Navigator.push çağrısı
final sonuc = await Navigator.____(
context,
MaterialPageRoute(builder: (_) => EklemeEkrani()),
);final sonuc = await Navigator.push(
context,
MaterialPageRoute(builder: (_) => EklemeEkrani()),
);Açıklama: Yeni ekran açmak için Navigator.push kullanılır. pop geri dönmek içindir, go ve replace GoRouter'ın metodlarıdır ama burada Navigator kullanılıyor.
3 Liste ve ekleme parçaları
| Kavram | Anlamı |
|---|---|
ListView.builder |
not listesi |
itemCount |
satır sayısı |
FloatingActionButton |
ekleme butonu |
Navigator.push |
yeni ekran açma |