Flutter TextField: Show/Hide Password

Passwords can be displayed or hidden in a TextField for users in Flutter.

Users have the option of displaying the entered password for security reasons or hiding it for purposes of verification.

In this tutorial, we’ll look at how to use Flutter’s TextField to build the show/hide password functionality.

Create a Toggleable Visibility State

To enable the show/hide password functionality, you need to create a toggleable visibility state.

This state will determine whether the password should be shown or hidden. You can use a bool variable to track the visibility state. Here’s an example:

bool _isPasswordVisible = false;

Update the TextField Widget

Next, you need to update the TextField widget to include an eye icon or a toggle button that allows users to switch between showing and hiding the password.

You can use the suffixIcon property of the TextField widget to add an icon or button at the end of the input field. Here’s an example:

TextField(
  obscureText: !_isPasswordVisible,
  decoration: InputDecoration(
    labelText: 'Password',
    suffixIcon: IconButton(
      icon: Icon(
        _isPasswordVisible ? Icons.visibility : Icons.visibility_off,
      ),
      onPressed: () {
        setState(() {
          _isPasswordVisible = !_isPasswordVisible;
        });
      },
    ),
  ),
)

State Management

To manage the visibility state and ensure that the UI reflects the changes, you need to use the setState() method. This method triggers a rebuild of the widget tree whenever the visibility state changes.

By encapsulating the TextField widget inside a StatefulWidget and calling setState() when the visibility state changes, the UI will be updated accordingly.

Final Example

import 'package:flutter/material.dart';

class TextFieldMainDetails extends StatefulWidget {
  @override
  TextFieldDisplayState createState() => TextFieldDisplayState();
}

class TextFieldDisplayState extends State<TextFieldMainDetails> {
  bool _isPasswordVisible = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TextField Password Demo'),
          automaticallyImplyLeading: false,
        ),
        body: Center(
            child: Column(
          children: [
            Container(
              padding: EdgeInsets.fromLTRB(5, 0, 5, 0),
              margin: EdgeInsets.fromLTRB(5, 5, 5, 0),
              child: TextField(
                obscureText: !_isPasswordVisible,
                decoration: InputDecoration(
                  labelText: 'Password',
                  suffixIcon: IconButton(
                    icon: Icon(
                      _isPasswordVisible
                          ? Icons.visibility
                          : Icons.visibility_off,
                    ),
                    onPressed: () {
                      setState(() {
                        _isPasswordVisible = !_isPasswordVisible;
                      });
                    },
                  ),
                ),
              ),
            ),
          ],
        )));
  }
}

Conclusion

The show/hide password functionality in a TextField is a valuable feature that enhances user experience and provides necessary verification capabilities. By following the steps outlined in this blog post, you can easily implement this functionality in your Flutter applications.

Remember to strike a balance between convenience and security when implementing password visibility options. Empower your users with the ability to verify their input while prioritizing data privacy and protection.

With Flutter’s flexibility and powerful widgets, you can create a seamless and secure user experience that meets the demands of your application’s password input fields.

Related Posts

Retrieving the Value of a TextField

Multiline TextField in Flutter

Clearing a TextField in Flutter

The DropdownButton Widget in Flutter

Card Widget in Flutter

TextField Widget in Flutter