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:
 |
Conclusion: In this flutter TextInput tutorial series we have covered how to create Password field with textInput field.
|
Article Contributed By :
|
|
|
|
|
531 Views |
|