CODEWITHSUNDEEP
passwordsflutter
naivor
naivor

Reputation: 1643

How to add a Password input type in flutter makes the password user input is not visible , just like Android Native EditText 's inputtype:password?

i meet a problem that Flutter 's TextInputType do not have a password type:

/// All possible enum values.

static const List<TextInputType> values = const <TextInputType>[
  text, multiline, number, phone, datetime, emailAddress, url,
];

how to make the password user input not visible? any one has a good idea ?

Upvotes: 164

Views: 189672

Answers (4)

Maurits van Beusekom
Maurits van Beusekom

Reputation: 6009

In case you are using the TextField widget (or something that derives from this widget), you can use the obscureText property and set it to true. More details can be found here.

Additionally, consider adding these properties to prevent input suggestions because they risk revealing at least part of the password input to screen viewers.

obscureText: true,
enableSuggestions: false,
autocorrect: false,

Upvotes: 394

Zeeshan Ansari
Zeeshan Ansari

Reputation: 1483

Just add obscureText: true in TextFormField:

 TextFormField(
   obscureText: true,
   decoration: const InputDecoration(
     labelText: 'Password',
   ),
   validator: (String value) {
     if (value.trim().isEmpty) {
       return 'Password is required';
     }
     return null;
   },
 ),

Upvotes: 47

Muhammad Qamar Iqbal
Muhammad Qamar Iqbal

Reputation: 353

Using TextField

obscuringCharacter: "*",

 TextField(
        obscureText: true,
        onChanged: (){},
        obscuringCharacter: "*",
        decoration: InputDecoration(
            hintText: "Enter password",
            icon: Icon(Icons.lock,color: kPrimaryColor,),
        ),
      ),

Upvotes: 16

Jitesh Mohite
Jitesh Mohite

Reputation: 34250

There are only two places where we can hide the password.

1. Using TextFormField

   TextFormField(
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: 'Password',
                ),
              ),

2. Using TextField

              TextField(
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: 'Password',
                ),
              )

Upvotes: 19

Related Questions