obscureText
- Flutter course
- Beginner
- Lesson 69/99
- 4 min
Mask password fields with obscureText.
obscureText
When the obscureText parameter is set to true, the characters typed into TextFormField are masked with dot-like symbols. This is used for entering sensitive information such as passwords. The controller still holds the text in plain form even when masking is on.
TextFormField(
obscureText: true,
)The controller keeps plain text
With obscureText: true, every typed character appears as a dot on screen. However, the controller still stores the actually entered text in plain form; that is, controller.text still returns the text typed by the user. The masking is only visual.
Practice Make a password field
Write a function login that prints Giris. In main call login. Add a TextFormField and set obscureText to true.
Starter code
import 'package:flutter/material.dart';
// giris fonksiyonu yaz: "Giris" yazdirsin
// TextFormField'a obscureText ekle
void main() {
// giris'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 giris() {
print('Giris');
}
void main() {
giris();
runApp(const Uygulama());
}
class Uygulama extends StatelessWidget {
const Uygulama({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: TextFormField(
obscureText: true,
),
),
),
);
}
}Expected output
Giris
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does obscureText: true do?
- Disables the field
- Changes the font
- Masks the typed characters with dots Correct answer
- Makes the text bold
Explanation: When obscureText: true is set, typed characters are shown as dots; the text does not become bold, the field is not disabled, and the font does not change.
2 Add the obscureText parameter
TextFormField(
____: true,
)TextFormField(
obscureText: true,
)Explanation: To mask characters, the obscureText parameter is set to true; there is no parameter named hidden, masked or password.
3 obscureText parts
| Term | Meaning |
|---|---|
obscureText |
Parameter that masks characters |
true |
Active value of obscureText |
password |
Typical use for obscureText |
nokta |
Symbol shown when obscureText is on |