autovalidateMode
- Flutter course
- Intermediate
- Lesson 34/99
- 4 min
Validate on the fly with autovalidateMode.
What is autovalidateMode?
autovalidateMode determines when the form runs the validator. It takes three values: disabled (off), always (always) and onUserInteraction (on user interaction).
Form(
autovalidateMode: AutovalidateMode.always,
child: ...,
)This way error messages are shown instantly.
always and onUserInteraction
AutovalidateMode.always runs the validator every time the form is built. AutovalidateMode.onUserInteraction starts running after the user changes a field.
Form(
autovalidateMode: AutovalidateMode.onUserInteraction,
child: ...,
)always is more aggressive, onUserInteraction is more user-friendly.
Practice Instant validation with autovalidateMode
In Ekrani stateful widget, declare _formKey. Give the Form autovalidateMode: AutovalidateMode.always. Place a TextFormField inside; the validator should return 'Boş' for empty value. In main, call print('form açıldı').
Starter code
import 'package:flutter/material.dart';
void main() {
print('form açıldı');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
// _formKey ekle
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
// autovalidateMode ekle
child: Column(
children: [
// validator ile TextFormField ekle
TextFormField(),
],
),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void main() {
print('form açıldı');
runApp(MaterialApp(home: Ekrani()));
}
class Ekrani extends StatefulWidget {
@override
_EkraniState createState() => _EkraniState();
}
class _EkraniState extends State<Ekrani> {
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(16),
child: Form(
key: _formKey,
autovalidateMode: AutovalidateMode.always,
child: Column(
children: [
TextFormField(
validator: (deger) {
if (deger!.isEmpty) {
return 'Boş';
}
return null;
},
),
],
),
),
),
);
}
}Expected output
form açıldı
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When does autovalidateMode.onUserInteraction run the validator?
- Never runs
- After the user touches the field, on every change Correct answer
- Only on page open
- Only when the button is pressed
Explanation: onUserInteraction runs the validator on every change after the user first touches the field; this gives instant feedback.
2 Set autovalidateMode to always
Form(
autovalidateMode: AutovalidateMode.____,
child: ...,
)Form(
autovalidateMode: AutovalidateMode.always,
child: ...,
)Explanation: autovalidateMode: AutovalidateMode.always runs the validator every time the form is built; errors are shown instantly.
3 autovalidateMode parts
| Term | Meaning |
|---|---|
autovalidateMode |
Determines when validator runs |
always |
Validator runs on every build |
onUserInteraction |
Runs after user touches |
disabled |
Validator is off |