Challenge 4
- Flutter course
- Beginner
- Lesson 99/99
- 3 min
Build a form validation screen with Form and TextFormField.
Validation with Form and TextFormField
To make an input validation screen, you use Form and TextFormField. The validator parameter of TextFormField checks the entered text and returns a String if there is an error. If there is no error, null is returned. Form groups all fields beneath it and allows collective validation.
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Cannot be empty';
}
return null;
},
)Practice Make a simple form screen
Write a function formHazir that prints Form hazir. Write a StatelessWidget named FormEkrani; in its build method, have a Form containing a TextFormField. The validator of TextFormField should give the error 'Bos birakilamaz' when the value is empty. In main call formHazir and start with runApp.
Starter code
import 'package:flutter/material.dart';
// formHazir fonksiyonu yaz
// FormEkrani adinda StatelessWidget yaz
// Form ve TextFormField ekle, validator ile bos kontrolu yap
void main() {
}Sample solution
import 'package:flutter/material.dart';
void formHazir() {
print('Form hazir');
}
class FormEkrani extends StatelessWidget {
const FormEkrani({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Form(
child: TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
),
),
),
),
);
}
}
void main() {
formHazir();
runApp(const FormEkrani());
}Expected output
Form hazir
Practice Make a validated input form
Write a function dogrulamaBaslat that prints Dogrulama basladi. Write a StatefulWidget named DogrulamaEkrani; in its build method, have a Form containing a Column. The Column should have a TextFormField (with a validator for empty check) and an ElevatedButton. In main call dogrulamaBaslat and start with runApp.
Starter code
import 'package:flutter/material.dart';
// dogrulamaBaslat fonksiyonu yaz
// DogrulamaEkrani adinda StatefulWidget yaz
// Form icinde Column: TextFormField (validator ile) ve ElevatedButton olsun
void main() {
}Sample solution
import 'package:flutter/material.dart';
void dogrulamaBaslat() {
print('Dogrulama basladi');
}
class DogrulamaEkrani extends StatefulWidget {
const DogrulamaEkrani({super.key});
@override
State<DogrulamaEkrani> createState() => _DogrulamaEkraniState();
}
class _DogrulamaEkraniState extends State<DogrulamaEkrani> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Form(
child: Column(
children: [
TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
),
ElevatedButton(
onPressed: () {},
child: Text('Gonder'),
),
],
),
),
),
),
);
}
}
void main() {
dogrulamaBaslat();
runApp(const DogrulamaEkrani());
}Expected output
Dogrulama basladi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does the validator function return when there is no error?
- true
- false
- null Correct answer
- An error message
Explanation: The validator function returns null when there is no error; it does not return true, false or an error message.
2 Add the validator parameter
TextFormField(
____: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
)TextFormField(
validator: (value) {
if (value == null || value.isEmpty) {
return 'Bos birakilamaz';
}
return null;
},
)Explanation: To validate the input, the validator parameter is used; onChanged, onSaved or onTap are not used for validation.
3 Form parts
| Term | Meaning |
|---|---|
Form |
Groups TextFormField's |
TextFormField |
Text input field |
validator |
Callback that validates input |
null |
Return value when no error |