Flutter TextField for Password

In this tutorial, you will learn how to prepare a TextField widget to accept password.

When user enters password into this TextField, the characters are masked with dots in UI.

Code Snippet for Flutter TextField to accept Password data

Following is a sample code snippet of TextField. obscureText is the property of TextField widget which makes the characters entered not discovered or not known.

TextField(
  obscureText: true,
  decoration: InputDecoration(
	border: OutlineInputBorder(),
	labelText: 'Name',
  ),
)

Example

This is a simple Flutter application demonstrating the working of TextField to accept passwords.

Following is the main.dart file, that is modified in the basic Flutter application created.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

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

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
      ),
      body: Padding(
        padding: EdgeInsets.all(10),
        child: Column(
          children: <Widget>[
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Password',
              ),
            )
          ],
        )
      )
    );
  }
}

When you run the application, UI appears as shown in the following picture.

Flutter TextField for Password - obscureText

When you tap on the TextField to enter some text and enter the text, it appears as dots as shown below.

Summary

In this Flutter Tutorial, we learned how to use TextField to accept passwords without being discovered.