In this post, you will learn how to make a Password TextField. It’s really simple. So we will cover TextFormField too.

okay… Let’s start.

How To Make A Password Field In Flutter Using TextField?

TextField and TextFormField both have a property called obscureText. This property helps to show asterick sign while we typing on TextField. By default obscureText value is false. You need to change it to true then only it will show “*“.

For example, the code will be like below.
TextField(obscureText: true)

Let’s create a simple example.

Flutter TextField & TextFormField – Password Field Example

In this example, decoration is used to show the labelText. You don’t need to use it for making a password TextField.
You can comment decoration property if you want.

  TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: 'TextField'),
                ),
                TextFormField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: 'TextFormField'),
                ),

Full source code is given below.

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TextField & TextFormField Password Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter TextField & TextFormField Password Example'),
        ),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: 'TextField'),
                ),
                TextFormField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: 'TextFormField'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

• Flutter TextFormField PlaceHolder Example
• Flutter StadiumBorder Example
• Flutter HyperLink Text Example

How To Show/Hide Password With Visibility Icon

Let’s create a simple UI with hide/show password feature. Create a Flutter project in Android Studio. If you are using visual Studio, Ctrl + Shift + P and create New Flutter Project.

• 7 Flutter Commands You Must Know

• For showing a Lock icon inside TextField, you can use prefixIcon property of InputDecoration.
• Use suffixIcon to show visibility/eye icon.
• Use OutlineInputBorder for making rounded corners of TextField with BorderRadius.
• textAlign: TextAlign.left: It aligns the text to left side.
• When the visibility icon is tapped, it changes the value of hidePassword. Based on that obscureText value also changes.
• SizedBox makes an empty space between TextField and Text.

import 'package:flutter/material.dart';

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

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

class _MyAppState extends State<MyApp> {
  bool hidePassword = true;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TextField Password Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter TextField Password Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Type your password below...',
                  style: TextStyle(fontSize: 15), textAlign: TextAlign.left),
              SizedBox(
                height: 8,
              ),
              TextField(
                onChanged: (value) {
                  print(value);
                },
                obscureText: hidePassword,//show/hide password
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.lock),
                  suffixIcon: IconButton(
                    icon: hidePassword
                        ? Icon(Icons.visibility_off)
                        : Icon(Icons.visibility),
                    onPressed: () {
                      setState(() {
                        hidePassword = !hidePassword;
                      });
                    },
                  ),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10),//circular border for TextField.
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter Login Page (Other Post)

Actually, this login page is from this post. If you are trying to make a login form with validation. It’s recommended to use Form and TextFormField. Using both you can create a better login form. You will also learn how to validate username and password.

So just check it out.

If you like this post, please share it with your family and friends.
Sharing is Caring…

• ObscureText property
• Flutter TextFormField Docs
• Flutter Form Docs