Mobile devep application -(textfield-forms) for applied scince college stuents seiyun University , yemen class - 007

1. Mobile Application Development
class 07
Dr. Mazin Alkathiri
IT Department
Seiyun University
2023-2024

2. TextField
• A TextField or TextBox is an input element which holds the
alphanumeric data, such as name, password, address, etc.
• It is a GUI control element that enables the user to enter text
information using a programmable code.
• It can be of a single-line text field (when only one line of
information is required) or multiple-line text field (when more
than one line of information is required).

3. TextField attributes
• Some of the most common attributes used with the TextField
widget are as follows:
• decoration: It is used to show the decoration around TextField.
• border: It is used to create a default rounded rectangle border
around TextField.
• labelText: It is used to show the label text on the selection of
TextField.
• hintText: It is used to show the hint text inside TextField.
• icon: It is used to add icons directly to the TextField.

4. 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 TextField Example'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
), ), ),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
), ), ),
ElevatedButton(
//textColor: Colors.white,
//color: Colors.blue,
child: Text('Sign In'),
onPressed: (){},
) ], ) ) ); } }

5. How to retrieve the value of a TextField?
• We know that Flutter does not have an ID like in Android for
the TextField widget. Flutter allows the user to retrieve the
text in mainly two ways: First is the onChanged method, and
another is the controller method. Both are discussed below:
• 1. onChanged method: It is the easiest way to retrieve the text
field value. This method store the current value in a simple
variable and then use it in the TextField widget. Below is the
sample example: onChanged: (text) {
value = text;
print(value);
},

6. • 2. Controller method: It is a popular method to retrieve text
field value using TextEditingController. It will be attached to
the TextField widget and then listen to change and control the
widget's text value. Below is the sample code:
TextEditingController mycontroller = TextEditingController();
child: TextField(
controller: mycontroller,
),

7. Example
Let us see the second way in detail to retrieve the text field value in
Flutter application with the help of following steps:
• Create a TextEditingController.
• Attach the TextEditingController to a TextField using controller property.
• Retrieve the value of the TextField by using the text() method provided
by the TextEditingController.
Now, create a new Flutter project in your IDE and open the main.dart file.
Replace the below code in the main.dart file. In this example, we are
going to display the alert dialog with the current value of the text field
when the user taps on a button.

8. import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home: MyApp(),));
}
class MyApp extends StatefulWidget {
@override
_State createState() => _State();
}
class _State extends State<MyApp> {
void _showDialog(BuildContext context) {
// flutter defined function
showDialog(
context: context, builder: (BuildContext context) {
// return object of type Dialog
return AlertDialog(
title: Text("Alert Message"),
// Retrieve the text which the user has entered by
// using the TextEditingController.
content: Text(mycontroller.text),
actions: <Widget>[
new ElevatedButton(
child: new Text('OK'),
onPressed: () {
Navigator.of(context).pop();
}, ) ], ); }, ); }
String value = "";
TextEditingController mycontroller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
onChanged: (text) {
value = text;
print(value);
}, ), ),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
controller: mycontroller,
), ),
ElevatedButton(
child: Text('Sign In'),
onPressed: (){
print("The Username is "+value);
print("the Password is
"+mycontroller.text);
_showDialog(context);
},
)
],
)
)
);
}
}

10. • Sometimes, we want to expand a
TextField that means it can have more
than one line. Flutter can do this very
easily by adding the attributes
maxLines and set it to null, which is
one by default. We can also specify
the exact value to expand the
number of lines by default.
• TextField widget also allows us to
restrict the maximum number of
characters inside the text field. We
can do this by adding the maxLength
attributes as below:
TextField(
maxLines: 4,
),
TextField(
maxLength: 8,
),

11. Flutter Forms
• Forms are an integral part of all modern mobile and web
applications. It is mainly used to interact with the app as well
as gather information from the users. They can perform many
tasks, which depend on the nature of your business
requirements and logic, such as authentication of the user,
adding user, searching, filtering, ordering, booking, etc. A form
can contain text fields, buttons, checkboxes, radio buttons, etc.

12. Creating a Form
• Flutter provides a Form widget to create a form. The form widget
acts as a container, which allows us to group and validate the
multiple form fields. When you create a form, it is necessary to
provide the GlobalKey. This key uniquely identifies the form and
allows you to do any validation in the form fields.
• The form widget uses child widget TextFormField to provide the
users to enter the text field. This widget renders a material design
text field and also allows us to display validation errors when they
occur.

13. Creating a Form cont.
• Let us create a form. First, create a Flutter project and replace the following
code in the main.dart file.
• In this code snippet, we have created a custom class named MyCustomForm.
• Inside this class, we define a global key as _formKey.
• This key holds a FormState and can use to retrieve the form widget.
• Inside the build method of this class, we have added some custom style and
use the TextFormField widget to provide the form fields such as name, phone
number, date of birth, or just a normal field.
• Inside the TextFormField, we have used InputDecoration that provides the look
and feel of your form properties such as borders, labels, icons, hint, styles, etc.
• Finally, we have added a button to submit the form.

15. import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Flutter Form Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: Text(appTitle),
),
body: MyCustomForm(),
),
);
}
}
// Create a Form widget.
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}
// Create a corresponding State class. This class holds data related to
the form.
class MyCustomFormState extends State<MyCustomForm> {
// Create a global key that uniquely identifies the Form widget
// and allows validation of the form.
final _formKey = GlobalKey<FormState>();
@override
@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey created above.
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'Enter your name',
labelText: 'Name',
), ),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.phone),
hintText: 'Enter a phone number',
labelText: 'Phone',
), ),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.calendar_today),
hintText: 'Enter your date of birth',
labelText: 'Dob',
), ),
new Container(
padding: const EdgeInsets.only(left: 150.0, top: 40.0),
child: new ElevatedButton(
child: const Text('Submit'),
onPressed: null,
)), ], ), ); } }

16. Form validation
• Form Validation is an important part of every application. In the flutter
application, there are many ways to validate form such as using
a TextEditingController.
• handling text controller for every Input can be messy in big applications.
Hence, Form provides us a convenient way to validate user Inputs.
• In form, the input is validated in your submit function (the function
which is called once the user has entered every detail, But the condition
is applied in each TextFormField itself with a widget name validator as
shown in the below given example.
• Validation is a method, which allows us to correct or confirms a certain
standard. It ensures the authentication of the entered data.

17. Form Validation in steps
• Validating forms is a common practice in all digital interactions.
To validate a form in a flutter, we need to implement mainly
three steps.
Step 1: Use the Form widget with a global key.
Step 2: Use TextFormField to give the input field with validator
property.
Step 3: Create a button to validate form fields and display
validation errors.

18. • The Validator widget takes a function with a
parameter that contains the value of the single
input and then it checks the condition which is
given in the validator function.
• The key is used in this because there can be many
inputs so to connect the widget tree with
elementary tree key of type FormState is used.
• In the Code below if the input validation in the
form Fails, it would lead to the following:

19. import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
theme: ThemeData(
brightness: Brightness.dark,
), ); } }
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var _formKey = GlobalKey<FormState>();
var isLoading = false;
void _submit() {
final isValid = _formKey.currentState?.validate();
if (!isValid!) {
return;
}else{
print("information is Validated");
}
_formKey.currentState?.save();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Form Validation"),
leading: Icon(Icons.filter_vintage),
),
//body
//body
body: Padding(
padding: const EdgeInsets.all(16.0),
//form
child: Form(
key: _formKey,
child: Column(
children: <Widget>[
Text(
"Form-Validation In Flutter ",
style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
),
//styling
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
TextFormField(
decoration: InputDecoration(labelText: 'E-Mail'),
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (value) {
//Validator
},
validator: (value) {
if (value!.isEmpty ||
!RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-
Z0-9]+.[a-zA-Z]+")
.hasMatch(value!)) {
return 'Enter a valid email!';
}
return null;
},
),
//box styling
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
//text input
//text input
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (value) {},
obscureText: true,
validator: (value) {
if (value!.isEmpty) {
return 'Enter a valid password!';
}
return null;
},
),
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
ElevatedButton(
child: Text(
"Submit",
style: TextStyle(
fontSize: 24.0,
),
),
onPressed: () => _submit(),
)
],
),
),
),
);
}
}
//https://github.com/malkthere/Form-Validation-.git