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 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:

How to add Password Input TextField:

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.

Full Code 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> {
 
  @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"
                          ),
                       ),

                     ],
                  )
          )
      );
  }
}

Output Screenshot:

In this way, you can add Password Input TextFiled in Flutter App.

No any Comments on this Article


Please Wait...