Flutter: Toggle Show Hide Password
I know all you know about this feature which toggle 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 and why the app is not accepting my password.
Get Started #
I am going to start form scratch which means you cna 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 show/hide password button with Input Field and make it working. Also make you understand the Logic and implementation behind that.
If you ar here only for code then you can get that the end of this article step 5 - final .
Step 1 #
Here is my main.dart file where you can see I have removed all the boilerplate code. I have wrote 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.
main.dartimport '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
);
}
}
I don’t want to bring you back to this file aging that why I added those line also which throws error.
Step 2 #
In 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 show/hide password.
Working Principle #
Input filed and password input field are same except for one arguments (obscureText).
obscureText: This argument give us power to hide the data entered in input field. The default of this is false, which makes it visible to us. If we make this as true, the actual text will be invisible.
login.dartimport '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 then 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.
login.dartimport '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 argument between true and false.
login.dartimport '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 a interesting logic for you. This code basically change 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 right hand side into the let hand side.
So technically we are toggling the value between true and false using exclamation mark.
void _togglePasswordView() {
setState(() {
_isHidden = !_isHidden;
});
}
Step 5 - Final #
In this step, I will update the icon of 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.
login.dartimport '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 the small parts and tried to add some code in each step. This helps entry level developer a lot in understanding. I also added the same code in each step because sometime entry level developer face problem in understanding.
When I was 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
Tweet this article