How to add Password Input TextField in Flutter

In this example, we are going to show you the easiest to add password input type text field in Flutter app. Password filed is very important to get secret data like in login form. See the example below:

TextField(
  obscureText: true,
)

You need to pass "true" on "obscureText" property in TextField to enable Password input.

TextFormField(
  obscureText: true,
)

You can do same with TextFormField.

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

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

class _MyAppState extends State<MyApp> {
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Password TextField Input"),
              backgroundColor: Colors.redAccent,
          ),
          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: true,
                          decoration: InputDecoration( 
                              hintText: "Enter Password Here",
                              labelText: "Password"
                          ),
                       ),

                     ],
                  )
          )
      );
  }
}