Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

How to Show/Hide Password on TextField Input in Flutter App

In this examle, we are going to show you how to add show or hide button at the end of TextFiled input in Flutter App, whenever user toggles the button, the asterisk '*' will be shown or hided. See the example below:

How to Enable Password Input on TextField:

TextField(
  obscureText: true,
)

Show/Hide Password on TextField: Full Example

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  bool passenable = true; //boolean value to track password view enable disable.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("View/Hide Password on TextField"),
              backgroundColor: Colors.purple,
          ),
          body: Container( 
                  height: 200,
                  alignment: Alignment.center,
                  padding: EdgeInsets.all(20),
                  child: Column(
                     children: [

                       TextField(
                          decoration: InputDecoration( 
                              hintText: "Enter Username Here",
                              labelText: "Username"
                          ),
                       ),

                       TextField(
                          obscureText: passenable, //if passenable == true, show **, else show password character
                          decoration: InputDecoration( 
                              hintText: "Enter Password Here",
                              labelText: "Password",
                              suffix: IconButton(onPressed: (){ //add Icon button at end of TextField
                                      setState(() { //refresh UI
                                          if(passenable){ //if passenable == true, make it false
                                             passenable = false;
                                          }else{
                                             passenable = true; //if passenable == false, make it true
                                          }
                                      });
                              }, icon: Icon(passenable == true?Icons.remove_red_eye:Icons.password))
                              //eye icon if passenable = true, else, Icon is ***__
                          ),
                          
                       ),

                     ],
                  )
          )
      );
  }
}

Output Screenshot:

Password Input with "Show Password" Icon button at End. Disable Astrisk '***' on TextField on Click on View Password Button

In this way, you can Show/Hide password on TextField Input in Flutter App.

No any Comments on this Article


Please Wait...