Easiest way How to add a Password TextField in Flutter (2023)

In most apps, we need to authenticate the user that's why we need to add a login module that contains an email or password field. So In this article, I am going to share with you How to add a Password TextField in Flutter.

How to add a Password TextField :

We make password TextFiled easily using obscureText​: true properties of TextFiled.We can use it like the one below.

TextField(
    obscureText: true,
 )

 

We can also make the TextFormField password field like below.

TextFormField(
   obscureText: true,
  )

 

How to add Eye Icon in Password Field in Flutter and Show Hide Password:

TextFormField(
              obscureText: isObscure,
              decoration: InputDecoration(
                labelText: 'Password',
                prefixIcon: Icon(
                  Icons.lock_outline_rounded,
                  color: Colors.red,
                ),
                suffixIcon: IconButton(
                  color: Colors.yellow,
                  icon: Icon(isObscure ? Icons.visibility:Icons.visibility_off),//Here show hide password 
                  onPressed: () {
                    setState(() {
                      isObscure = !isObscure;
                    });
                  },
                ),
              ),
            ),

 

In the above piece of code, you can see we set the eye icon as a suffixIcon according to isObscure for showing and hiding the password.

Full Code:

import 'package:flutter/material.dart';

class Errorgram extends StatefulWidget {
  const Errorgram({Key? key}) : super(key: key);

  @override
  State<Errorgram> createState() => _ErrorgramState();
}

class _ErrorgramState extends State<Errorgram> {
   bool isObscure = true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        bottom: false,
        child: Scaffold(
          appBar: AppBar(
            title: Text("Errorgram"),
          ),
          body: Padding(
            padding:  EdgeInsets.all(8.0),
            child: TextFormField(
              obscureText: isObscure,
              decoration: InputDecoration(
                labelText: 'Password',
                prefixIcon: Icon(
                  Icons.lock_outline_rounded,
                  color: Colors.red,
                ),
                suffixIcon: IconButton(
                  color: Colors.yellow,
                  icon: Icon(isObscure ? Icons.visibility:Icons.visibility_off),
                  onPressed: () {
                    setState(() {
                      isObscure = !isObscure;
                    });
                  },
                ),
              ),
            ),
          ),
        ));
  }
}

 

Output:

Conclusion:

In this article, we have seen the Easiest way How to add a Password TextField in Flutter. We also saw how to convert TextFormField into the password field. I hope this article may help you.

Tags: