Flutter - Show/Hide Password in TextField

In this article, we will Implement how to show/hide the password in the Textfield. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the material package that gives us the important method to use and call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';

void main() {
 runApp(RunMyApp());
}

Step 3: Now we have to make a stateful widget RunMyApp Because our application does change its state and then return the materialApp widget which allows us the set the title and theme and have many more properties.

class RunMyApp extends StatefulWidget {
 const RunMyApp({super.key});
 @override
 State<RunMyApp> createState() => _RunMyAppState();
}
class _RunMyAppState extends State<RunMyApp> {
  bool passwordVisible=false;   
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     theme: ThemeData(primarySwatch: Colors.green),
     home:
   );
 }
}

Step 4: Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar has the title property to set the title of the application. Body contains a Container that has TextField as a child. TextField has many parameters like decoration, obscureText. Here is the point obscureText takes the true and false values. If true that means the Password is visible otherwise not. We can use the Suffix icon button to change the state of the obscureText value. When we press the suffix icon button the setState method is called and the variable value of the passwordVisible is changed. decoration parameter generally used to customize the textField. It set the border, hint text, label text, helper text, suffix Icon, prefix Icon, onpressed method.

Scaffold(
       appBar: AppBar(title: Text('Show or Hide Password in TextField'),),
       body: Container(
               padding: EdgeInsets.all(20.0),
               child: TextField(
                 obscureText: passwordVisible,
                 decoration: InputDecoration(
                   border: UnderlineInputBorder(),
                   hintText: "Password",
                   labelText: "Password",
                   helperText:"Password must contain special character",
                   helperStyle:TextStyle(color:Colors.green),
                   suffixIcon: IconButton(
                     icon: Icon(passwordVisible
                         ? Icons.visibility
                         : Icons.visibility_off),
                     onPressed: () {
                       setState(
                         () {
                           passwordVisible = !passwordVisible;
                         },
                       );
                     },
                   ),
                   alignLabelWithHint: false,
                   filled: true,
                 ),
                 keyboardType: TextInputType.visiblePassword,
                 textInputAction: TextInputAction.done,
               ),
             ), 
     ),

Final Code

import 'package:flutter/material.dart';

void main() {
  runApp(RunMyApp());
}

class RunMyApp extends StatefulWidget {
  const RunMyApp({super.key});

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp> {
   bool passwordVisible=false;
    
   @override
    void initState(){
      super.initState();
      passwordVisible=true;
    }    
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(title: Text('Show or Hide Password in TextField'),),
        body: Container(
                padding: EdgeInsets.all(20.0),
                child: TextField(
                  obscureText: passwordVisible,
                  decoration: InputDecoration(
                    border: UnderlineInputBorder(),
                    hintText: "Password",
                    labelText: "Password",
                    helperText:"Password must contain special character",
                    helperStyle:TextStyle(color:Colors.green),
                    suffixIcon: IconButton(
                      icon: Icon(passwordVisible
                          ? Icons.visibility
                          : Icons.visibility_off),
                      onPressed: () {
                        setState(
                          () {
                            passwordVisible = !passwordVisible;
                          },
                        );
                      },
                    ),
                    alignLabelWithHint: false,
                    filled: true,
                  ),
                  keyboardType: TextInputType.visiblePassword,
                  textInputAction: TextInputAction.done,
                ),
              ), 
      ),
    );
  }
}

Output UI

Output