Düzenleme ekranı
- Flutter kursu
- Orta seviye
- Ders 83/99
- 4 dk
Mevcut notu düzenlemek için form ekranı yazarsın.
Düzenleme ekranı
Mevcut notu düzenlemek için bir form ekranı yazarsın. TextEditingController ile başlık ve içerik alanlarını doldurur, kullanıcı kaydettiğinde Navigator.pop(context, duzenlenmisNot) ile güncel notu geri döndürürsün.
class DuzenlemeEkrani extends StatefulWidget {
final Note not;
const DuzenlemeEkrani({super.key, required this.not});
@override
State<DuzenlemeEkrani> createState() => _DuzenlemeEkraniState();
}
class _DuzenlemeEkraniState extends State<DuzenlemeEkrani> {
late final baslikCtrl = TextEditingController(text: widget.not.baslik);
}Navigator.pop ile değer döndürme
Düzenleme ekranında kullanıcı kaydet butonuna bastığında Navigator.pop(context, yeniNot) çağrısı yaparsın. Bu, önceki ekrana geri döner ve ikinci parametre olarak verilen değeri döndürür. Çağıran tarafta await Navigator.push(...) ile bu değeri yakalarsın.
ElevatedButton(
onPressed: () {
final duzenlenmis = Note('1', baslikCtrl.text, icerikCtrl.text);
Navigator.pop(context, duzenlenmis);
},
child: const Text('Kaydet'),
)Uygulama Düzenleme ekranını kur
DuzenlemeEkrani adında StatefulWidget tanımla. final Note not alanı required olsun. State içinde baslikCtrl adında TextEditingController(text: widget.not.baslik) tanımla. build metodu bir Scaffold döndürsün; gövdesinde TextFormField(controller: baslikCtrl) ve bir ElevatedButton olsun. Butonun onPressed'ında Navigator.pop(context) ç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);
}
// DuzenlemeEkrani StatefulWidget tanımla
// final Note not (required)
// State içinde baslikCtrl adında bir controller tanımla
// build Scaffold döndürsün
// gövdede bir TextFormField ve ElevatedButton olsun
// buton onPressed geri dönmeyi sağlası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 DuzenlemeEkrani extends StatefulWidget {
final Note not;
const DuzenlemeEkrani({super.key, required this.not});
@override
State<DuzenlemeEkrani> createState() => _DuzenlemeEkraniState();
}
class _DuzenlemeEkraniState extends State<DuzenlemeEkrani> {
late final baslikCtrl = TextEditingController(text: widget.not.baslik);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Düzenle')),
body: Column(
children: [
TextFormField(controller: baslikCtrl),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: const Text('Kaydet'),
),
],
),
);
}
}
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 Düzenleme ekranında başlangıç değerini TextEditingController'a nasıl verirsin?
- onChanged parametresi ile
- text parametresi ile Doğru cevap
- style parametresi ile
- decoration parametresi ile
Açıklama: TextEditingController(text: deger) biçiminde başlangıç değeri verilir. style yazı stilidir, decoration etiket/kenarlıktır, onChanged değer değişince çağrılır; bunlar başlangıç değerini vermez.
2 pop ile değer döndür
ElevatedButton(
onPressed: () {
final duzenlenmis = Note('1', baslikCtrl.text, icerikCtrl.text);
____(context, duzenlenmis);
},
child: const Text('Kaydet'),
)ElevatedButton(
onPressed: () {
final duzenlenmis = Note('1', baslikCtrl.text, icerikCtrl.text);
Navigator.pop(context, duzenlenmis);
},
child: const Text('Kaydet'),
)Açıklama: Değer döndürerek geri dönmek için Navigator.pop kullanılır. push yeni ekran açar, context.go GoRouter metodudur, replace mevcut yolu değiştirir; değer döndürmezler.
3 Düzenleme parçaları
| Kavram | Anlamı |
|---|---|
TextEditingController |
başlangıç değeri |
TextFormField |
giriş alanı |
Navigator.pop |
değer döndürme |
ElevatedButton |
kaydet butonu |