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