decoration and label
- Flutter course
- Beginner
- Lesson 68/99
- 4 min
Add labels and hints with InputDecoration.
InputDecoration
InputDecoration is the object that customizes the appearance of a TextFormField. The labelText parameter sets a label that appears above the field; the hintText parameter is a hint shown before the user types. An InputDecoration is passed to the decoration parameter.
TextFormField(
decoration: InputDecoration(
labelText: 'Name',
hintText: 'Enter your name',
),
)Difference between labelText and hintText
labelText slides up when the field is focused and remains visible; even after the user starts typing, the label stays. hintText disappears once the user starts typing. Therefore labelText is used as a permanent label, while hintText is a temporary hint.
Practice Make a labeled TextFormField
Write a function showLabel that prints Etiket. In main call showLabel. Add a TextFormField; with decoration set labelText to 'Ad'.
Starter code
import 'package:flutter/material.dart';
// etiketGoster fonksiyonu yaz: "Etiket" yazdirsin
// TextFormField'a decoration ver
// labelText 'Ad' olsun
void main() {
// etiketGoster'i cagir
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
// TextFormField ekle
child: SizedBox(),
),
),
);
}
}Sample solution
import 'package:flutter/material.dart';
void etiketGoster() {
print('Etiket');
}
void main() {
etiketGoster();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: TextFormField(
decoration: InputDecoration(
labelText: 'Ad',
),
),
),
),
);
}
}Expected output
Etiket
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does labelText do?
- Sets the background color
- Sets the label text appearing above the field Correct answer
- Sets the keyboard type
- Sets the corner shape of the button
Explanation: labelText is the label text appearing above the field; background color, keyboard type or corner shape are unrelated to labelText.
2 Add the labelText parameter
TextFormField(
decoration: InputDecoration(
____: 'Ad',
),
)TextFormField(
decoration: InputDecoration(
labelText: 'Ad',
),
)Explanation: The label text is given with the labelText parameter; label, title or name are not valid parameter names.
3 Decoration parts
| Term | Meaning |
|---|---|
InputDecoration |
Decoration object |
labelText |
Top label text |
hintText |
Hint text |
decoration |
Parameter given to TextFormField |