How to show/hide password in TextFormField?

How to Show/Hide Password in TextFormField? 🔐

Are you tired of struggling with hidden passwords while trying to sign in to your favorite apps or websites? 😫 Don't worry, we've got you covered! In this blog post, we'll show you how to add a button-like interaction to your TextFormField in order to make your password visible or invisible. 🙌

Let's dive right in! 💦

The Problem 🤔

So, you have a password field implemented using the TextFormField widget in Flutter, which is great! Here's an example of how it looks like:

TextFormField(
  decoration: const InputDecoration(
      labelText: 'Password',
      icon: const Padding(
        padding: const EdgeInsets.only(top: 15.0),
        child: const Icon(Icons.lock),
      )),
  validator: (val) => val.length < 6 ? 'Password too short.' : null,
  onSaved: (val) => _password = val,
  obscureText: true,
);

But now, you want to add a button-like interaction that allows users to toggle the visibility of the password. You're wondering if you can achieve this directly inside the TextFormField or if you need to use a Stack widget to achieve the desired UI. Additionally, you're not sure how to handle the conditions for obscureText being true or false. 😕

The Solution 💡

Good news! You can add the show/hide password functionality without the need for a Stack widget. The trick is to replace the default TextFormField with a custom widget that combines a TextField and a button. Here's how:

1. Create a new stateful widget called PasswordTextField that extends StatefulWidget.

   class PasswordTextField extends StatefulWidget { @override _PasswordTextFieldState createState() => _PasswordTextFieldState(); }

2. Inside the PasswordTextField widget, create a state class called _PasswordTextFieldState that extends State<PasswordTextField>.

   class _PasswordTextFieldState extends State<PasswordTextField> { bool _obscureText = true; @override Widget build(BuildContext context) { return TextField( decoration: InputDecoration( labelText: 'Password', icon: Padding( padding: const EdgeInsets.only(top: 15.0), child: Icon(Icons.lock), ), suffixIcon: IconButton( icon: Icon(_obscureText ? Icons.visibility : Icons.visibility_off), onPressed: () { setState(() { _obscureText = !_obscureText; }); }, ), ), obscureText: _obscureText, // Add your additional properties here ); } }

   In this example, we use a _obscureText boolean variable to keep track of whether the password should be obscured or not. The suffixIcon property of the InputDecoration allows us to add an IconButton as a button-like interaction.

3. Finally, replace your original TextFormField with the PasswordTextField widget.

   PasswordTextField( validator: (val) => val.length < 6 ? 'Password too short.' : null, onSaved: (val) => _password = val, ),

Voila! Now, the password field will include a button-like icon on the right side, which users can click to toggle the visibility of their password. 😎

Conclusion 🎉

Hiding and showing the password in a TextFormField is a common requirement in many Flutter apps. By following the steps outlined in this guide, you can easily implement this functionality and allow your users to have better control over their passwords. 🚀

Try it out and let us know how it works for you! If you have any questions or other topics you'd like us to cover, leave a comment below. We'd love to hear from you! 😊