onSaved
- Flutter course
- Intermediate
- Lesson 33/99
- 4 min
Collect form data with the onSaved callback.
What is onSaved?
onSaved is a callback given to a TextFormField. It is called when the form is saved, letting you take the field's value and store it in a variable.
String? _name;
TextFormField(
onSaved: (value) {
_name = value;
},
)onSaved is triggered when the save method is called.
FormState.save
When _formKey.currentState!.save() is called, the onSaved callback of every TextFormField in the form runs. This way you transfer all field values to variables.
String? _name;
String? _email;
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
print('Name: $_name');
}save is called after validate succeeds.
Practice Collect data with onSaved
In Ekrani stateful widget, declare _formKey and _isim variable. Place a TextFormField inside a Form; with onSaved assign the value to _isim. On button press, if validate succeeds, call save and print 'isim: $_isim'. In main, call print('form başladı').
Starter code
import 'package:flutter/material.dart';
void main() {
print('form başladı');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
// _formKey ve _isim ekle
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
// onSaved ekle
),
ElevatedButton(
onPressed: () {
// validate ve save çağır
},
child: Text('Kaydet'),
),
],
),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void main() {
print('form başladı');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
final _formKey = GlobalKey<FormState>();
String? _isim;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
onSaved: (deger) {
_isim = deger;
},
),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
print('isim: $_isim');
}
},
child: Text('Kaydet'),
),
],
),
),
),
);
}
}Expected output
form başladı
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When is the onSaved callback called?
- Every time the user presses a key
- When the form is built
- When the form's save method is called Correct answer
- Only in initState
Explanation: The onSaved callback is triggered for each TextFormField when FormState.save is called; this way field values are collected.
2 Add the FormState.save call
if (_formKey.currentState!.validate()) {
_formKey.currentState!.____();
print('kaydedildi');
}if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
print('kaydedildi');
}Explanation: When FormState.save() is called, each TextFormField's onSaved callback runs; field values are transferred to variables.
3 onSaved parts
| Term | Meaning |
|---|---|
onSaved |
Callback to collect field value |
save |
Method triggering all onSaved |
FormState |
State where save is called |
validate |
Validation done before save |