Set TextField Text Input type Password in Flutter using obscureText

obscureText parameter is used in TextField widget to automatically convert all the entered text into U+2022 BULLET characters. They look like bullet DOT inside Text Field widget. This parameter is mostly used to hide typed text inside Text Field like password typing. This would make the typing secure. obscureText cannot be set to null or empty you should have to pass Boolean true or false in it. So in this tutorial we would Set TextField Text Input type Password in Flutter using obscureText Android iOS example tutorial.

Contents in this project Set TextField Text Input type Password in Flutter using obscureText Android iOS Example:

1. Import material.dart package in your app’s main.dart file.

import 'package:flutter/material.dart';

1	import 'package:flutter/material.dart';

2. Call our main class MyApp using void main runApp() function.

void main() => runApp(MyApp());

1	void main() => runApp(MyApp());

3. Create our main class named as MyApp extends with State less widget.

class MyApp extends StatelessWidget {


}

class MyApp extends StatelessWidget {

}

4. Create Scaffold widget with Center widget in Widget build area.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child:  

               

              )
            )
          );
  }
}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

body: Center(

child:

)

);

}

5. Create a Container parent widget and Put the TextField widget inside it.

obscureText: true : Hiding the typed text in Text Input widget.

Container(
           width: 300,
           child: TextField(
               decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Enter Password Here',
                ),
                autofocus: false,
                obscureText: true,
                  )
                )

Container(

width: 300,

child: TextField(

decoration: InputDecoration(

border: OutlineInputBorder(),

hintText: 'Enter Password Here',

autofocus: false,

obscureText: true,

)

6. Complete source code for main.dart file:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
              child:  

               Container(
                width: 300,
                child: TextField(
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'Enter Password Here',
                      ),
                      autofocus: false,
                      obscureText: true,
                    )
                  )

              )
            )
          );
  }
}