Flutter: Toggle Password Visibility
Tags: dart, flutter, programming, appdev
Published: 2021-04-30 12:39:10

<p>You might have seen an eye button that toggles the password visibility in Signup or Login forms on various websites. This button is important since there are many criteria to be followed while setting a password, so we might need to see if our password matches the pattern. This feature is quite popular and can be added to Flutter App as well.</p>

<p>Let&#39;s look at the final output first to have an idea about what we are going to build :</p>

<p><img alt="" src="https://res.cloudinary.com/dlomjljb6/image/upload/v1/media/blog/uploads/2021/04/30/output_t0kqsj" /></p>

<p>&nbsp;</p>

<h1><strong>Get Started</strong></h1>

<p>We will be starting right from scratch. First, we are going to create a flutter project and remove all the boilerplate code from the <strong>main.dart</strong>&nbsp;file. We are not going to add a lot of things in this app. We&#39;ll just have a screen with a password field.<br />
So, here is my<strong> main.dart</strong> file :&nbsp;</p>

{% gist https://gist.github.com/ashutoshkrris/f1d1c3dbfd0f3332b0f173be89b303e7 %}

<div style="background:#f3d9d9; border:1px solid #cccccc; padding:5px 10px">
<p><span style="font-family:Comic Sans MS,cursive">You will get two errors in this file and both will be fixed in next step. We will fix them by creating&nbsp;<u>a new file (login.dart)</u>&nbsp;which will contain&nbsp;<u>LoginForm</u>&nbsp;Widget code. You can ignore them for now.</span></p>
</div>

<h1><strong>Adding Login Form</strong></h1>

<p>In this step, we are going to create a <strong>login.dart</strong> file which will contain a <em>Stateful Widget</em> called <strong>LoginForm</strong>. This will be a simple widget and will just contain a <strong>Password Input Field</strong> and <strong>Toggle Button</strong>.</p>

<p>Password Field has an argument called <strong>obsecureText&nbsp;</strong>that hides the password visibility if set to <span style="color:#16a085"><em>true</em></span>. The default value is <span style="color:#e74c3c"><em>false&nbsp;</em></span></p>

<p>Let&#39;s start by creating a login.dart file first and adding the below code :</p>

{% gist https://gist.github.com/ashutoshkrris/5db1ab3bdec4469fcb98e87362092ae1 %}

<p>In the above code, we have just created a <strong>TextField </strong>and set the <strong>obsecureText</strong> argument to <em>_isHidden</em>. <strong>_isHidden </strong>is boolean variable set to <em>true </em>by default.</p>

<h1><strong>Adding Toggle Button</strong></h1>

<p>Next, we are going to add the toggle button to change the visibility of the password. We can do this easily using the <strong>suffixIcon </strong>property in <strong>InputDecoration</strong>. This will add an icon at the end of the input field.</p>

{% gist https://gist.github.com/ashutoshkrris/1fb5477905ba3fc862fcd8043a44bc88 %}

<h1><strong>Adding Gesture Detector</strong></h1>

<p>In this step, we will make the icon clickable so that when user clicks on it, it hides or shows the password. This is where the real logic comes. We will be using a method to toggle the password visibility, i.e., changing the obsecureText from true to false and vice-versa easily.</p>

{% gist https://gist.github.com/ashutoshkrris/710f9cdb0aa2bd42f47110166c35a147 %}

<p>To make the icon clickable, we can use <strong>GestureDetector</strong> or <strong>InkWell</strong>. We have wrapped the Icon with <em>GestureDetector </em>which has an <strong>onTap</strong> property. <em>onTap </em>takes a method which will be called when the icon is tapped. Notice that we have defined a method below called <strong>_togglePasswordView</strong>(also passed to onTap) which calls the <em>setState </em>method. Within that. we have used a very popular logic for toggling a boolean value using the <strong>not(!)</strong> operator. Suppose, <em>isHidden </em>was first <em>true</em>, then when the method is called, it will be set to <em>!true</em>, i.e., <em>false </em>and vice-versa.</p>

<h1><strong>Toggling the icon</strong></h1>

<p>We are all set now. We just need to make one simple change, i.e., changing the password visibility icon according to the password text visibility. If the text is visible, we can show an icon to make the text invisible. If the text is hidden, we can show another icon to make it visible. For this we have two icons - <strong>visibility</strong>(eye) and&nbsp;<strong>visibility_off</strong>(slashed-eye).</p>

{% gist https://gist.github.com/ashutoshkrris/f187910272f538451a96f6d7e9ef6c3d %}

<p>&nbsp;We have used <em>conditional operator</em> to check if <strong>_isHidden</strong> is <strong>true</strong>, i.e., <em>password is visible</em>, then we would to like to show the <strong>visibility </strong>icon to <em>hide the password</em> else <strong>visibility_off </strong>will be used to <em>show the password</em>.</p>

<h1><strong>Conclusion</strong></h1>

<p>I hope all the above steps were clear and easy to understand for a beginner as well. Hope you liked the post.&nbsp;<br />
Thanks!</p>
<p>You can connect with me <a href="https://ashutoshkrris.tk">here</a>.</p>
<p>This post was originally published on my own blog <a href="https://iread.ga"><strong>iRead</strong></a> and can be found <a href="https://iread.ga/posts/flutter-toggle-password-visibility">here</a>.</p>