Summary - TextFormField
- Flutter course
- Beginner
- Lesson 70/99
- 4 min
Combine TextFormField and controller to make an input form.
Combine three parts
To make an input form, you combine three parts: the TextFormField widget, a TextEditingController (to manage the input), and an InputDecoration (for label and hint). The controller is created in State, disposed, and wired to the TextFormField. The decoration is given to the same field.
TextFormField(
controller: controller,
decoration: InputDecoration(
labelText: 'Name',
),
)Practice Make an input form
Write a function register that prints Kayit. In main call register. Write a StatefulWidget named KayitFormu; in its State, create a TextEditingController, dispose it, and wire it as controller along with a decoration to a TextFormField. Set labelText to 'Ad'.
Starter code
import 'package:flutter/material.dart';
// kayit fonksiyonu yaz: "Kayit" yazdirsin
// KayitFormu adinda StatefulWidget yaz
// State icinde controller olustur ve dispose et
// TextFormField'a controller ve decoration bagla
void main() {
// kayit'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// KayitFormu'nu ekle
child: SizedBox(),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void kayit() {
print('Kayit');
}
void main() {
kayit();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: KayitFormu(),
),
),
);
}
}
class KayitFormu extends StatefulWidget {
const KayitFormu({super.key});
@override
State<KayitFormu> createState() => _KayitFormuState();
}
class _KayitFormuState extends State<KayitFormu> {
final TextEditingController _controller = TextEditingController();
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return TextFormField(
controller: _controller,
decoration: InputDecoration(
labelText: 'Ad',
),
);
}
}Expected output
Kayit
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parts are used together for an input form?
- ListView + ListTile + Separator
- Column + Row + SizedBox
- Text + Padding + Center
- TextFormField + TextEditingController + InputDecoration Correct answer
Explanation: For an input form, TextFormField (input widget), TextEditingController (managing the input) and InputDecoration (label and hint) are used together.
2 Add the decoration parameter
TextFormField(
controller: myController,
____: InputDecoration(
labelText: 'Ad',
),
)TextFormField(
controller: myController,
decoration: InputDecoration(
labelText: 'Ad',
),
)Explanation: To wire an InputDecoration, the decoration parameter is used; there is no parameter named style, theme or label.
3 Form summary
| Term | Meaning |
|---|---|
TextFormField |
Text input widget |
TextEditingController |
Class controlling the input |
InputDecoration |
Provides label and hint |
dispose |
Cleans up the controller |