Password hide and show on button click in Flutter

 Show and Hide Password with Button click in Flutter

Hi Coders,

My name is Amit, and have a knowledge of Android, Flutter, ReactJS, Python and Django and today in this article i am gonna teach you how you can add eye icon with in your password textfield and when you click on that icon the password will be shown and when you again click on that icon the password will be hide. While working on this if you stuck at any point and have some doubts then feel free to contact me in any social media or you can just comment your doubts below this article.

So let's have some learn fun...

Here is Complete source code and below will be explanation of whole code:

Here i am taking only password text field but when you use this with your login or sign up form then the code will be same and nothing will change So just understand how its works behind.

Step1:First we have to initialize a variable for obscure text in password textformfield:

bool isObscure = true;

Here isObscure is boolean value which will be our main thing 

Step 2:

TextField(
          obscureText: isObscure,
          keyboardType: TextInputType.visiblePassword,

Into TextField there is predefined characteristic given by flutter named obscureText,
and if it will be true then text present into textfield will be visible and If its false then text will be hide and only stars(*) will be shown. and here I used my own predefined variable which i already set its value to true with obscureText, 
and at another sentence you can see keyboardType which i set to be visible password but its not compulsory to use that.

Step 3: Add Icon at the end of textfield of password 

decoration: InputDecoration(
              hintText: "Enter your password",
              suffixIcon: IconButton

Now we have to add button which will work as switch type i.e. whenever user click on it the pass will show and hide and so on and in Textfield we will find this into decoration of textfield and here remember one thing that you have to use IconButton so that the icon will be work as button.

Step 4:Change icon with every click 

 icon: Icon(isObscure ? Icons.visibility : Icons.visibility_off),

 First isObscure? means if its true then Icons.visibility will run and if isObscure is false then Icons.visibility will be run 

Step 5:

onPressed: () {
                  setState(() {
                    isObscure = !isObscure;

When click on IconButton isObscure will be changed i.e. it will always be opposite of its previous state.