Flutter TextField/TextFormField has a lot of customization. In this tutorial, you will learn how to implement the password show/hide button in the flutter.
Also read, how to show/hide widgets programmatically.
The main concept of showing and hiding passwords is when a user clicks the button we setting the obscureText property value as true and if the user again clicks the button we setting the obscureText property value as false.
We archive this functionality by using the obscureText property. Let’s see the example,
First, create a text field or text from field.
TextFormField()Then declare a variable inside the class called _isvisible or anything you want and set the value false.
bool _isVisible = false;In TextFormField/TextField use decoration property and supply the InputDecoraction class . InputDecoraction class has a suffixIcon property. In the suffix icon use IconButton Widget. Icon button onpressed event call the updateStatus() function. The code is given below,
TextFormField(
decoration: InputDecoration(
hintText: "Enter password",
suffixIcon: IconButton(
onPressed: () => updateStatus(),
icon:
Icon(_isVisible ? Icons.visibility : Icons.visibility_off),
),
),
)The updateStatus() function looks like this,
void updateStatus() {
setState(() {
_isVisible = !_isVisible;
});
}To avoid white space use inputformatters property and show or hide passwords use obscureText property. The obscureText property, give the _isVisible variable.
The complete text filed/ TextFormField looks like this,
TextFormField(
keyboardType: TextInputType.text,
obscureText: _isVisible ? false : true,
inputFormatters: [
FilteringTextInputFormatter.deny(RegExp(r"\s\b|\b\s"))
],
decoration: InputDecoration(
hintText: "Enter password",
suffixIcon: IconButton(
onPressed: () => updateStatus(),
icon:
Icon(_isVisible ? Icons.visibility : Icons.visibility_off),
),
),
),Full source code
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(
title: 'Show/Hide password TextField in Flutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _isVisible = false;
void updateStatus() {
setState(() {
_isVisible = !_isVisible;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Show/Hide password TextField"),
),
body: Center(
child: Form(
child: TextFormField(
keyboardType: TextInputType.text,
controller: textEditingController,
obscureText: _isVisible ? false : true,
inputFormatters: [
FilteringTextInputFormatter.deny(RegExp(r"\s\b|\b\s"))
],
decoration: InputDecoration(
hintText: "Enter password",
suffixIcon: IconButton(
onPressed: () => updateStatus(),
icon:
Icon(_isVisible ? Icons.visibility : Icons.visibility_off),
),
),
),
),
),
);
}
}
