Show/Hide Password TextField/TextFormField in Flutter

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;
Code language: JavaScript (javascript)

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), ), ), )
Code language: JavaScript (javascript)

The updateStatus() function looks like this,

void updateStatus() { setState(() { _isVisible = !_isVisible; }); }
Code language: JavaScript (javascript)

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), ), ), ),
Code language: JavaScript (javascript)

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), ), ), ), ), ), ); } }
Code language: JavaScript (javascript)