Flutter form validation :
Flutter form validation is a basic process which every app needs to have as a initial criteria, so lets see in the flutter way of doing it.
In this part of the tutorial you will learn a basic flutter form validation in a simple steps so even a novice can easily understand and know the flutter way of dealing a form.
In general you might have been worked on android form’s previously where the first step is to design an xml file before getting on to the main logical java coding.
Now in flutter this is a combination of design as well as logic together which will help you in further stages of app development where you deal with multiple screens in android.
Flutter form validation
main.dart:
As you all are well aware of the MainActivity in android and this file is same compared.
Let’s begin
This is the basic step, import the flutter package its the initial step towards app development
import 'package:flutter/material.dart';
Declare a void main and this is where the execution of the file begins
void main() => runApp(MyApp());
Declare a class MyApp which extends StatelessWidget
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return null; } }
Now instead of returning null return a material theme
return MaterialApp( );
Add a title and design it with using Scaffold and add body using a class called MyCustomForm().
return MaterialApp( title: appTitle, home: Scaffold( appBar: AppBar( title: Text(appTitle), ), body: MyCustomForm(), ), );
This class comprises of the body, extends StatefulWidget
class MyCustomForm extends StatefulWidget { @override FirstPage createState() { return FirstPage(); } }
Creating a TextFormField
Within textformfield we have InputDecoration using which we can design the textfield according to our requirement, currently we use “hints” to show the field name to the user
decoration: InputDecoration( hintText: 'enter username' ),
And then the validaton of the field using a validator, here i am just checking for empty condition
validator: (value) { if (value.isEmpty) { return 'Please enter username'; }
TextFormField With both attributes
TextFormField( decoration: InputDecoration( hintText: 'enter username' ), validator: (value) { if (value.isEmpty) { return 'Please enter username'; } }, ),
Now we will add some padding in between two text fields username and password in vertical
Padding( padding: const EdgeInsets.symmetric(vertical: 10.0), ),
then a simple button to process the inputs and show a snack bar
snack bar
showSnackBar(SnackBar(content: Text('Login-in')))
Add some padding from text fields and declared raised button as shown below
padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 100.0),
We have initially declared a form key in the FirstPageĀ class on validating the form s a snack bar is show
key: _formKey,
if (_formKey.currentState.validate()) { Scaffold.of(context) .showSnackBar(SnackBar(content: Text('Login-in'))); }
This validation is done on clicking the button using
onPressed: () { },
as
Padding( padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 100.0), child: RaisedButton( onPressed: () { if (_formKey.currentState.validate()) { Scaffold.of(context) .showSnackBar(SnackBar(content: Text('Login-in'))); } }, child: Text('Submit'), ),
Full Code:
Providing the full code for flutter form validation implementation
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { final appTitle = 'Simple Form Validation'; return MaterialApp( title: appTitle, home: Scaffold( appBar: AppBar( title: Text(appTitle), ), body: MyCustomForm(), ), ); } } // Create a Form Widget class MyCustomForm extends StatefulWidget { @override FirstPage createState() { return FirstPage(); } } class FirstPage extends State<MyCustomForm> { final _formKey = GlobalKey<FormState>(); @override Widget build(BuildContext context) { return Form( key: _formKey, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: const EdgeInsets.symmetric(vertical: 10.0), ), // Username Field TextFormField( decoration: InputDecoration( hintText: 'enter username' ), validator: (value) { if (value.isEmpty) { return 'Please enter username'; } }, ), // Adding a padding in between username and padding Padding( padding: const EdgeInsets.symmetric(vertical: 2.0), ), // Adding a padding in between username and padding // Password Field TextFormField( decoration: InputDecoration( hintText: 'enter password' ), validator: (value) { if (value.isEmpty) { return 'Please enter password'; } }, ), // Adding a button to validate form Padding( padding: const EdgeInsets.symmetric(vertical: 100, horizontal: 120.0), child: RaisedButton( onPressed: () { }, child: Text('Submit'), ), ), ], ), ); } }
Output :
This screen depicts the implementation of flutter form validation
If there is any query in this tutorial on flutter form validation do let us know in the comment section, do like and share this tutorial for more interesting updates.