How to show/hide password in TextFormField in flutter?

Hello Guys How are you all? Hope you all Are fine. Many times we need to make Our Password field To secure and we need to add show and hide password with one button. So today in this tutorial we are going to learn How to show/hide password in TextFormField in flutter?. Without wasting your time lets start this tutorial.

How to show/hide password in TextFormField in flutter?

• Here we will use Use TextField/TextFormField.
• To hide an entered password in a TextField/TextFormField, just set its obscureText property to true:

TextField(
   obscureText: true,
   /* ... */
),

• Screenshot:
• To show the entered password for the user to read it, set obscureText to false:

TextField(
   obscureText: false,
   /* ... */
),

• Screenshot:

A Complete Source Code

// main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'FlutterCorner.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('FlutterCorner.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;
                  });
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Output

So, It’s All About this tutorial. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• How to make a blur Background Image effect in Flutter using BackdropFilter.
• Create Rounded Corners Image in Flutter.
• set Background Image to Scaffold in Flutter.
• How To Select multiple images with Flutter
• How to Set Network Image In Circular Avatar In Flutter?