
To shroud an entered secret key in a TextField/TextFormField, just set its obscureText property to valid:
TextField(
obscureText: true,
/* ... */
),
Screenshot:

To show the entered secret word for the client to understand it, set obscureText to bogus:
TextField(
obscureText: false,
/* ... */
),
Screenshot:

A Complete Example
We’ll make a straightforward Flutter application that contains a TextField gadget (you can utilize TextFormField too) at the focal point of the screen. This content field lets the client type a secret key in and has an eye-symbol catch to show/shroud the entered secret key. Here’s the means by which it works:
The full code:
// main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 'Kindacode.com',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _isObscure = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Kindacode.com'),
),
body: Padding(
padding: const EdgeInsets.all(25),
child: Center(
child: TextField(
obscureText: _isObscure,
decoration: InputDecoration(
labelText: 'Password',
suffixIcon: IconButton(
icon: Icon(
_isObscure ? Icons.visibility : Icons.visibility_off),
onPressed: () {
setState(() {
_isObscure = !_isObscure;
});
})),
),
),
),
);
}
}
That is it. Cheerful Fluttering 🙂