close

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?

  1. How to show/hide password in TextFormField in flutter?

    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. To show the entered password for the user to read it, set obscureText to false.

  2. show/hide password in TextFormField in flutter

    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. To show the entered password for the user to read it, set obscureText to false.

  • 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

How to show/hide password in TextFormField in flutter,
hide password in TextFormField in flutter,
password in textformfield in flutter,
show/hide password in textformfield,
password in textformfield

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

Leave a Comment