Form and TextFormField in Flutter

What is Form?

Flutter provides a Form widget to create a form in which we can get the data from users. The form is widget acts as a container for grouping and validating multiple form fields. the form can contain TextFormField, buttons, text, images, and many more.

When creating the form, provide a GlobalKey. This uniquely identifies the Form and allows validation of the form in a later step. Inside this class, we define a global key as _formKey. This key holds a FormState and can use to retrieve the form widget. 

What is TextFormField ?

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. So, here we are creating an example of form validation with the use of  TextFormField. 

Now, let's start with an example we are doing step by step implementation for Form and TextFormField.

1. Create the Form widget with a global key. 

Here we are creating a Form widget and column as a child widget. in the form, we will create a variable named _formKey type of GlobalKey<FormState> and set the global key in the given property Key in form.

	final _formKey = GlobalKey<FormState>();
	body: Container(
	padding: EdgeInsets.all(20),
	child: Form(
	key: _formKey,
	child: Column(
	children: [],
	),
	),
	),

view raw main.dart hosted with ❤ by GitHub

2. Create TextFormField with validator property. 

In this step, we are creating TextFormField for Email, Username, and Password. We are applying different types of validation in these three TextFormField.First is Email TextFormField in this we are validating if it contains "@" in the email id. The second is the username in this we are doing basic validation that isn't empty. In the third TextFormField, we are validating the Password in which we are giving the condition that the Password should be more than 6 characters. 

	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(
	Icons.email_rounded,
	),
	hintText: 'Enter your Email Id',
	labelText: 'Email *',
	),
	validator: (value) {
	if (value!.isEmpty || !value.contains("@")) {
	return 'Enter a valid email';
	}
	return null;
	},
	textInputAction: TextInputAction.next,
	),
	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(
	Icons.person,
	),
	hintText: 'Enter your Username',
	labelText: 'Username',
	),
	validator: (value) {
	if (value!.isEmpty) {
	return 'Enter a Username';
	}
	return null;
	},
	textInputAction: TextInputAction.next,
	),
	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(
	Icons.lock,
	),
	hintText: 'Enter your Password',
	labelText: 'Password',
	),
	obscureText: true,
	obscuringCharacter: '*',
	textInputAction: TextInputAction.done,
	validator: (value) {
	if (value!.isEmpty) {
	return 'Enter a valid Password';
	}
	if (value.length < 6) {
	return 'Password should be more then 6 character';
	}
	return null;
	},
	),

view raw main.dart hosted with ❤ by GitHub

3. Create a button to validate form fields and display validation errors. 

In the last step in this, we are creating a button and on top of that, we are set the validations for TextFormField.For that we are creating one _submit() function and in that we are set the currentState like_formKey.currentState!.validate().After that we are going to save that state using _formKey.currentState!.save(). we are calling this function in ElevatedButton.

	void _submit() {
	final isValid = _formKey.currentState!.validate();
	if (!isValid) {
	return;
	}
	_formKey.currentState!.save();
	}
	ElevatedButton(
	onPressed: () {
	_submit();
	},
	child: Text("Signin"),
	style: ElevatedButton.styleFrom(
	padding:
	EdgeInsets.symmetric(horizontal: 10, vertical: 10),
	textStyle:
	TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
	)

view raw main.dart hosted with ❤ by GitHub

Whole Code

	import 'package:flutter/material.dart';
	void main() {
	runApp(FormField());
	}
	class FormField extends StatefulWidget {
	@override
	_FormFieldState createState() => _FormFieldState();
	}
	class _FormFieldState extends State<FormField> {
	final _formKey = GlobalKey<FormState>();
	void _submit() {
	final isValid = _formKey.currentState!.validate();
	if (!isValid) {
	return;
	}
	_formKey.currentState!.save();
	}
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	debugShowCheckedModeBanner: false,
	theme: ThemeData(
	primaryColor: Colors.purple[800],
	),
	home: Scaffold(
	appBar: AppBar(
	title: Text("Example FormField"),
	),
	body: Container(
	padding: EdgeInsets.all(20),
	child: Form(
	key: _formKey,
	child: Column(
	children: [
	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(
	Icons.email_rounded,
	),
	hintText: 'Enter your Email Id',
	labelText: 'Email *',
	),
	validator: (value) {
	if (value!.isEmpty || !value.contains("@")) {
	return 'Enter a valid email';
	}
	return null;
	},
	textInputAction: TextInputAction.next,
	),
	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(
	Icons.person,
	),
	hintText: 'Enter your Username',
	labelText: 'Username',
	),
	validator: (value) {
	if (value!.isEmpty) {
	return 'Enter a Username';
	}
	return null;
	},
	textInputAction: TextInputAction.next,
	),
	TextFormField(
	decoration: const InputDecoration(
	icon: Icon(
	Icons.lock,
	),
	hintText: 'Enter your Password',
	labelText: 'Password',
	),
	obscureText: true,
	obscuringCharacter: '*',
	textInputAction: TextInputAction.done,
	validator: (value) {
	if (value!.isEmpty) {
	return 'Enter a valid Password';
	}
	if (value.length < 6) {
	return 'Password should be more then 6 character';
	}
	return null;
	},
	),
	SizedBox(
	height: 50,
	),
	ElevatedButton(
	onPressed: () {
	_submit();
	},
	child: Text("Signin"),
	style: ElevatedButton.styleFrom(
	padding:
	EdgeInsets.symmetric(horizontal: 10, vertical: 10),
	textStyle:
	TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
	),
	],
	),
	),
	),
	),
	);
	}
	}

view raw main.dart hosted with ❤ by GitHub