Flutter: Toggle Show Hide Password

This article was originally written at nstack.in.

I know all you know about this feature which toggles the password show and hide. This is super cool because sometimes we want to see the password anyway.

Sometimes we get so frustrated while filling the form that we wanted to what password I am filling in and why the app is not accepting my password.

Get Started

I am going to start from scratch which means you can copy and past the code in your brand new project and it will work.

The AIM of this article is to teach you how to make a show/hide password button with Input Field and make it work. Also, make you understand the Logic and implementation behind that.

Step 1

Here is my main.dart file where you can see I have removed all the boilerplate code. I have written everything from scratch for your better understanding.

I am trying to keep it as simple as I could. So, we can only focus on the actual thing and No new things will come in between.

import 'package:flutter/material.dart';
import 'package:demo_app/login.dart';   // I will create this fill in step
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginForm(),    // This will widget will be created in next step
    );
  }
}

You will get two error in this file and both will be fixed in next step. We will fix them by creating a new file (login.dart) which will contain LoginForm Widget code.

I don’t want to bring you back to this file aging that why I added those lines also which throws an error.

Step 2

This step will create a file login.dart and this file will have StatefulWidget called LoginForm. I will keep this widget very so simple and try to make you understand the logic behind the show/hide password.

Working Principle

Input filed and password input fields are the same except for one arguments (obscureText).

obscureText: This argument gives us the power to hide the data entered in the input field. The default of this is false, which makes it visible to us. If we make this true, the actual text will be invisible.

import 'package:flutter/material.dart';
class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
  bool _isHidden = true;
@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      body: Center(
        child: TextField(
            obscureText: _isHidden,
            decoration: InputDecoration(
                hintText: 'Password',
            ),    
        ),
      ),
    );
  }
}

Step 3

In this step, we will add a button at the end of the field. Luckily there is a suffix property in flutter which helps us in add widget to the end.

We can do a lot using that suffix icon i.e When you change username in Instagram, You see there is check box which in text field, that indicated if the username is available or not.

import 'package:flutter/material.dart';
class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
  bool _isHidden = true;
@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      body: Center(
        child: TextField(
            obscureText: _isHidden,
            decoration: InputDecoration(
                hintText: 'Password',
                suffix: Icon(Icons.visibility),
            ),
        ),
      ),
    );
  }
}

Step 4

This is the magical step where all the magic is going to happen. We will make the icon clickable and see/hide the password.

Now I will wrap the icon with InkWell which will make it clickable. So, when we will click on that it will toggle the obscureText the argument between true and false.

import 'package:flutter/material.dart';
class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
  bool _isHidden = true;
@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      body: Center(
        child: TextField(
            obscureText: _isHidden,
            decoration: InputDecoration(
                hintText: 'Password',
                suffix: InkWell(
                    onTap: _togglePasswordView,
                    child: Icon( Icons.visibility),
                ),
            ),
        ),
      ),
    );
  }
void _togglePasswordView() {
    setState(() {
      _isHidden = !_isHidden;
    });
  }
}

If you are not familiar with this code then this might be an interesting logic for you. This code basically changes the by adding not it’s original value.

Suppose the _isHidden is true then when we add !(exclamation) before it then it will make it false. As the programming fundamental, we store the value of the right-hand side into the left hand side.

So technically we are toggling the value between true and false using an exclamation mark.

void _togglePasswordView() {
    setState(() {
        _isHidden = !_isHidden;
    });
}

Step 5 — Final

In this step, I will update the icon of the suffix. I mean to say when the password is visible we want to show visibility hide/off icon and when the password is hidden we want to show visibility on icon.

import 'package:flutter/material.dart';
class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
  bool _isHidden = true;
@override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).secondaryHeaderColor,
      body: Center(
        child: TextField(
            obscureText: _isHidden,
            decoration: InputDecoration(
            hintText: 'Password',
            suffix: InkWell(
                onTap: _togglePasswordView,
                child: Icon(
                        _isHidden 
                        ? Icons.visibility 
                        : Icons.visibility_off,
                    ),
                ),
            ),
        ),
      ),
    );
  }
void _togglePasswordView() {
    setState(() {
      _isHidden = !_isHidden;
    });
  }
}

Conclusion

I hope you got the complete logic and implementation. I tried to break it into small parts and tried to add some code in each step. This helps entry-level developers a lot in understanding. I also added the same code in each step because sometimes entry-level developers face problems in understanding.

When I was an entry-level developer, I faced a lot of difficulties but somehow I almost covered the hard path, and today sharing them in easy language.

Thanks