Özet - Not uygulaması
- Flutter kursu
- Orta seviye
- Ders 85/99
- 4 dk
Tüm parçaları birleştirip çalışan not uygulamasını tamamlarsın.
Çalışan not uygulaması
Çalışan not uygulaması dört parçayı birleştirir: Note modeli veriyi taşır, ListView notları listeler, Navigator.push ve Navigator.pop ekleme/düzenleme akışını yönetir, shared_preferences notları kalıcı yapar. Her parça ayrı bir sorumluluk taşır ve birlikte tutarlı bir akış oluşturur.
final notlar = <Note>[];
// ekleme butonu
onPressed: () async {
final yeni = await Navigator.push(context,
MaterialPageRoute(builder: (_) => EklemeEkrani()));
if (yeni != null) {
notlar.add(yeni);
await notlariKaydet(notlar);
}
},Uygulama Ekleme akışını yaz
NotlarEkrani adında bir StatefulWidget tanımla. State içinde final notlar = <Note>[] listesi olsun. build metodu bir Scaffold döndürsün; gövdesi ListView.builder olsun (itemCount: notlar.length ve her satırda ListTile(title: Text(n.baslik))). floatingActionButton bir FloatingActionButton olsun ve onPressed içinde Navigator.push ile MaterialPageRoute(builder: (_) => EklemeEkrani()) çağrısı yapsı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);
}
class EklemeEkrani extends StatelessWidget {
const EklemeEkrani({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
// NotlarEkrani StatefulWidget tanımla
// State içinde final notlar = <Note>[] olsun
// build Scaffold döndürsün
// gövde ListView.builder olsun (itemCount ve ListTile)
// floatingActionButton Navigator.push ile MaterialPageRoute çağı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 EklemeEkrani extends StatelessWidget {
const EklemeEkrani({super.key});
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}
class NotlarEkrani extends StatefulWidget {
const NotlarEkrani({super.key});
@override
State<NotlarEkrani> createState() => _NotlarEkraniState();
}
class _NotlarEkraniState extends State<NotlarEkrani> {
final notlar = <Note>[];
@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));
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const EklemeEkrani()),
);
},
child: const Icon(Icons.add),
),
);
}
}
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 Not uygulamasında veri akışı hangi sırayla işler?
- shared_preferences → Navigator → ListView → Note
- Navigator → Note → shared_preferences → ListView
- ListView → shared_preferences → Note → Navigator
- Note → ListView → Navigator → shared_preferences Doğru cevap
Açıklama: Önce Note modeli veriyi taşır, ListView onu gösterir, Navigator ile ekleme/düzenleme yapılır, son olarak shared_preferences ile kalıcı saklanır. Diğer sıralar mantıksızdır.
2 Navigator ile değer bekle
final yeni = await Navigator.push(
context,
____(builder: (_) => EklemeEkrani()),
);final yeni = await Navigator.push(
context,
MaterialPageRoute(builder: (_) => EklemeEkrani()),
);Açıklama: Navigator.push MaterialPageRoute alır; bu eski Navigator 1.0 yöntemidir. GoRoute GoRouter'a aittir, Scaffold ve Container widget'tır; route tanımı değildir.
3 Özet parçaları
| Kavram | Anlamı |
|---|---|
Note |
veri modeli |
ListView |
not listesi |
Navigator |
ekran geçişleri |
shared_preferences |
kalıcı saklama |