What is TextFormField?
- Flutter course
- Beginner
- Lesson 66/99
- 4 min
Learn to capture form input with TextFormField.
What is TextFormField?
TextFormField is a widget used for text input inside a form. As the user types with the keyboard, it holds the entered text. It is usually placed inside a Form widget so that form-level validation and batch operations can be performed.
Form(
child: TextFormField(),
)The Form widget
TextFormField sits in the child hierarchy of the Form widget. Form treats all fields beneath it as a single group and provides information about the form state. You can add a TextFormField without Form, but then you cannot perform collective validation.
Practice Add a TextFormField inside a Form
Write a function loginDone that prints Giris yapildi. In main call loginDone. Add a TextFormField inside a Form.
Starter code
import 'package:flutter/material.dart';
// girisYapildi fonksiyonu yaz: "Giris yapildi" yazdirsin
void main() {
// girisYapildi'yi cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// Form ve TextFormField ekle
child: SizedBox(),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void girisYapildi() {
print('Giris yapildi');
}
void main() {
girisYapildi();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Form(
child: TextFormField(),
),
),
),
);
}
}Expected output
Giris yapildi
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which widget is used to collectively manage TextFormField's in a form?
- Column
- SizedBox
- Form Correct answer
- ListView
Explanation: The Form widget brings together all TextFormField's beneath it and allows collective validation; ListView, Column and SizedBox are not for this purpose.
2 Add the TextFormField widget
Form(
child: ____(),
)Form(
child: TextFormField(),
)Explanation: The widget used for text input inside Form is TextFormField; TextField performs a similar function but does not provide Form integration.
3 Form parts
| Term | Meaning |
|---|---|
TextFormField |
Text input widget inside Form |
Form |
Groups TextFormField's |
input |
Text entered by the user |
child |
Form's child widget |