How to Create Text Input for Password in Flutter

Published October 18, 2021


In this flutter TextInput example tutorial we will cover how to create a password field with TextInput field. When we create a form inside any mobile application there will be an option like enter password, this password could be make invisible. So how could we add this password invisible in flutter application. For this we will use obscureText: true property.

 

TextField(
  obscureText: true,
  controller: myController,
)

 

Let's create a simple example to create a Textfield with Password

 

import 'package:flutter/material.dart';


class PasswordExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Text Input Password Example',
      home: MyInput(),
    );
  }
}

// Define a custom Form widget.
class MyInput extends StatefulWidget {
  @override
  _MyInputState createState() => _MyInputState();
}

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyInputState extends State<MyInput> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Password Text Input Tutorial'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(child: Column(children: <Widget>[TextField(
          obscureText: true,
          controller: myController,
        ),
          MaterialButton(
            child: Text('Show the password Text'),
            onPressed: (){
               showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    // Retrieve the text the that user has entered by using the
                    // TextEditingController.
                    content: Text(myController.text),
                  );
                },
              );
            },
          ),]
        ),
        ),
      ),
    );
  }
}

 

Output:

How to create textinput for password field in flutter

 

Conclusion: In this flutter TextInput tutorial series we have covered how to create Password field with textInput field.

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

32 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions