Flutter
Edit screen
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'),
)
Exercise 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.
Show example 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');
}
Test yourself
-
How do you pass the initial value to TextEditingController on the edit screen?
- With the onChanged parameter
- With the text parameter
- With the style parameter
- With the decoration parameter
Show answer
With the text parameter — 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.
-
Return a value with pop
ElevatedButton(
onPressed: () {
final duzenlenmis = Note('1', baslikCtrl.text, icerikCtrl.text);
____(context, duzenlenmis);
},
child: const Text('Kaydet'),
)
Show answer
ElevatedButton(
onPressed: () {
final duzenlenmis = Note('1', baslikCtrl.text, icerikCtrl.text);
Navigator.pop(context, duzenlenmis);
},
child: const Text('Kaydet'),
)
-
Edit parts
- TextEditingController
- Initial value
- TextFormField
- Input field
- Navigator.pop
- Returning a value
- ElevatedButton
- Save button
Next lesson: Persistent storage
