Edit screen
- Flutter course
- Intermediate
- Lesson 83/99
- 4 min
Write a form screen to edit an existing note.
The edit screen
To edit an existing note you write a form screen. You fill the title and content fields with TextEditingController, and when the user saves you return the updated note with Navigator.pop(context, editedNote).
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);
}Returning a value with Navigator.pop
When the user taps the save button on the edit screen, you call Navigator.pop(context, newNote). This returns to the previous screen and passes the second parameter as a return value. On the caller side you catch this value with await Navigator.push(...).
ElevatedButton(
onPressed: () {
final duzenlenmis = Note('1', baslikCtrl.text, icerikCtrl.text);
Navigator.pop(context, duzenlenmis);
},
child: const Text('Kaydet'),
)Practice Build the edit screen
Define a StatefulWidget named DuzenlemeEkrani with a required final Note not field. In its State define baslikCtrl as TextEditingController(text: widget.not.baslik). The build method should return a Scaffold whose body contains a TextFormField(controller: baslikCtrl) and an ElevatedButton. The button's onPressed should call Navigator.pop(context). Print 'hazir' in main.
Starter code
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
}Sample solution
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');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How do you pass the initial value to TextEditingController on the edit screen?
- With the onChanged parameter
- With the text parameter Correct answer
- With the style parameter
- With the decoration parameter
Explanation: You provide an initial value with TextEditingController(text: value). style is a text style, decoration is label/border, and onChanged is called when the value changes; none of these set the initial value.
2 Return a value with pop
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'),
)Explanation: To return a value and go back you use Navigator.pop. push opens a new screen, context.go is a GoRouter method, and replace replaces the current route; none return a value.
3 Edit parts
| Term | Meaning |
|---|---|
TextEditingController |
Initial value |
TextFormField |
Input field |
Navigator.pop |
Returning a value |
ElevatedButton |
Save button |