04
Jan

Creating a form with validation

0

Now a days in general we are filling online forms for applying any post in general govt or private sector. Forms are verified before submitting and if any field left blank that will also be notified when we submit the form. Today we are going to discuss validating the form by providing some input text field. If input is blank then it show please enter some value it displays as error message.

Creating a form with validation in Flutter:

Follow the below steps to create a form and validate it.

 

  • Create a Form with a GlobalKey
  • Add a TextFormField with validation logic
  • Create a button to validate and submit the for

 

By using  GlobalKey We are Create a Form :

 

To create a form  we are using  Form Widget and it acts as a container to group and validate multiple form fields.

we are using  GlobalKey. The Globalkey identify the Form , and it allow us to validate the form in a later step.

The below code used to create a form with GlobalKey.

// Define a Custom Form Widget
class MyCustomForm extends StatefulWidget {
@override
MyCustomFormState createState() {
return MyCustomFormState();
}
}

// Define a corresponding State class. This class will hold the data related to
// the form.
class MyCustomFormState extends State {
// Create a global key that will uniquely identify the Form widget and allow
// us to validate the form
//
// Note: This is a `GlobalKey`, not a GlobalKey!
final _formKey = GlobalKey();

@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey we created above
return Form(
key: _formKey,
child: // We'll build this out in the next steps!
);
}
}

Create a TextFormField with validation logic code:

Now we created a form , to enter some input text by  users here we use   aTextFormField. The TextFormField Widget renders a material design text input and knows how to display validation errors when they occur.

We can validate the input by using  a validator function to the TextFormField. If there is an error with the information the user has provided, the validator function must return a String containing an error message. If there are no errors, the function should not return anything.

In this example, we are using  a validator  method that ensures the TextFormField isn’t empty. If it is empty, we will return a friendly error message that is please enter some text here.

TextFormField(
// The validator receives the text the user has typed in
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
},
);

Create a button to validate and submit the form

We have a form with a text field, we have to create a button the user can tap to submit the information. When the user  submit the form, we  have to check if the form is valid. If it is valid then , we will show a success message. If the text field has no content means empty, then we  want to display an error message.

RaisedButton(
onPressed: () {
// Validate will return true if the form is valid, or false if
// the form is invalid.
if (_formKey.currentState.validate()) {
// If the form is valid, display a snackbar. In the real world, you'd
// often want to call a server or save the information in a database
Scaffold
.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
);

Description of above code:

We are using  _formKey to validate the form . formKey has currentState() method _formKey.currentState method to access the FormState, which is automatically created by Flutter when we build a Form.

The FormState class contains the validate method. When the validate method is called, it will run the validator function for each text field in the form. If everything looks good, the method returns true. If any text field contains errors, it will display the error message for each invalid text field and return false.

Below is the Complete Example code for Creating a form with validation in Flutter App:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final appTitle = 'Form Validation 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 will hold the data related to
// the form.
class MyCustomFormState extends State {
// Create a global key that will uniquely identify the Form widget and allow
// us to validate the form
//
// Note: This is a GlobalKey, not a GlobalKey!
final _formKey = GlobalKey();

@override
Widget build(BuildContext context) {
// Build a Form widget using the _formKey we created above
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
},
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: RaisedButton(
onPressed: () {
// Validate will return true if the form is valid, or false if
// the form is invalid.
if (_formKey.currentState.validate()) {
// If the form is valid, we want to show a Snackbar
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Processing Data')));
}
},
child: Text('Submit'),
),
),
],
),
);
}
}

Congratulations You Have Learned Creating a form with validation In Flutter….!!!

If it is Helpful Share It With Your Friends….!!!

If You Have Any Query Make A Comment….!!!

Leave a Reply

Categories