Flutter how to show/hide password tutorial

Flutter Show / Hide Password :

Flutter Show / Hide Password is a functionality where user can see the password as it is protected while entering so as to maintain privacy related issues.

Sometimes when you are trying to do any screen cast then using this feature will enable you to cover the password and enter the password as usually without any privacy issue.

We sometimes feel difficulty while entering the password and enter wrong passwords multiple times which may some times lead to block for the day depending upon the service.

So as to avoid these difficulties we prefer this functionality where the user can see the password when he is entering by tapping on a button.

Flutter Show / Hide Password Video Tutorial :

Go through the below tutorial for more detailed implementation.

main.dart :

Initialize with the void main considering the default class MyApp extending StatelessWidget

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

We need to return a MaterialApp and provide the Password() class in home.

return MaterialApp(
  home: Password(),
);

Create a state for the app

@override
_PasswordState createState() => _PasswordState();

Using the Password class as state to fetch the data as the user enters

class _PasswordState extends State<Password> {
 
}

Declare boolean variables to show password and confirm password

bool showPassword = true;
bool showConfirmPassword = true;

Also focus nodes for these parameters, FocusNode is used to know the keyboard events and fetch the values as the user enters.

FocusNode passwordFocusNode;
FocusNode confirmPasswordFocusNode;

Initialize them in init() block of code

@override
void initState() {
  super.initState();
  passwordFocusNode = FocusNode();
  confirmPasswordFocusNode = FocusNode();
}

And dispose them properly using dispose() after usage

@override
void dispose() {
  super.dispose();
  passwordFocusNode.dispose();
  confirmPasswordFocusNode.dispose();
}

Declare the text field here we are specifying the focusNode

focusNode: passwordFocusNode,

onTap set focus using setState() which is used unfocus the previous text field and set the focus to the next text field by passing the  password focus node as parameter for requestFocus.

onTap: () {
  setState(() {
    FocusScope.of(context).unfocus();
    FocusScope.of(context).requestFocus(passwordFocusNode);
  });
},

Add a icon button to display a icon to enable and disable show/hide password when clicked on it.

IconButton(
    icon: Icon(Icons.remove_red_eye),
    onPressed: () => setState(() {
      showPassword = !showPassword;
    })
),

TextField :

Add a textfield with below parameters

TextField(
  focusNode: passwordFocusNode,
  onTap: () {
    setState(() {
      FocusScope.of(context).unfocus();
      FocusScope.of(context).requestFocus(passwordFocusNode);
    });
  },
  obscureText: showPassword,
  decoration: InputDecoration(
    hintText: 'Password',
    suffixIcon: IconButton(
        icon: Icon(Icons.remove_red_eye),
        onPressed: () => setState(() {
          showPassword = !showPassword;
        })
    ),
  ),
),

Full Code :

Providing the full code below to show / hide password

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Password(),
    );
  }
}

class Password extends StatefulWidget {
  @override
  _PasswordState createState() => _PasswordState();
}

class _PasswordState extends State<Password> {
  bool showPassword = true;
  bool showConfirmPassword = true;

  FocusNode passwordFocusNode;
  FocusNode confirmPasswordFocusNode;

  @override
  void initState() {
    super.initState();
    passwordFocusNode = FocusNode();
    confirmPasswordFocusNode = FocusNode();
  }

  @override
  void dispose() {
    super.dispose();
    passwordFocusNode.dispose();
    confirmPasswordFocusNode.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Show Password'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            TextField(
              focusNode: passwordFocusNode,
              onTap: () {
                setState(() {
                  FocusScope.of(context).unfocus();
                  FocusScope.of(context).requestFocus(passwordFocusNode);
                });
              },
              obscureText: showPassword,
              decoration: InputDecoration(
                hintText: 'Password',
                suffixIcon: IconButton(
                    icon: Icon(Icons.remove_red_eye),
                    onPressed: () => setState(() {
                      showPassword = !showPassword;
                    })
                ),
              ),
            ),

            TextField(
              focusNode: confirmPasswordFocusNode,
              onTap: () {
                setState(() {
                  FocusScope.of(context).unfocus();
                  FocusScope.of(context).requestFocus(confirmPasswordFocusNode);
                });
              },
              obscureText: showConfirmPassword,
              decoration: InputDecoration(
                hintText: 'Confirm password',
                suffixIcon: IconButton(
                  icon: Icon(Icons.remove_red_eye),
                    onPressed: () => setState(() {
                      showConfirmPassword = !showConfirmPassword;
                    })
                ),
              ),
            )

          ],
        ),
      ),
    );
  }
}

Output :

This screen depicts the usage of flutter show / hide password functionality in your app.