Before we start simple login form, let me tell you some basic scenario what types of main widgets and GlobalKey we are using here
- Form widget :: Actually form widget is container controller or we can said it’s group for form fields. When we use form widget also we have to set GlobalKey for uniquely identify current form and you can access other property of the form.
- TextFormField Widget :: Form without input field? We can’t visualize. We are creating form because end-user can input some data so here we are using TextFormField for get input from the end-use. It’s material design text input and it has validate method that will help us for validate this text field.
- RaisedButton Widget :: It’s simple material design button and has click method that we will help us to execute another action.
In our demo we will use GlobalKey for access Form and Scaffold Widgets and its property. For more information click on GlobalKey I already attached link on that.
Example:
import 'package:flutter/material.dart';
void main() => runApp(new FormValidation());
class FormValidation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Form validation",
home: LoginScreen(),
);
}
}
class LoginScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return LoginScreenState();
}
}
class LoginScreenState extends State <LoginScreen> {
final _formKey = GlobalKey<FormState>();
final _scaffoldKey = GlobalKey<ScaffoldState>();
String _email;
String _password;
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
key: _scaffoldKey,
appBar: new AppBar(
title: new Text("Login")
),
body: new Container(
padding: const EdgeInsets.all(20.0),
child: formSetup(context)
),
);
}
Widget formSetup(BuildContext context){
return new Form(
key: _formKey,
child: new Column(
children: <Widget>[
new TextFormField(
decoration: InputDecoration(
hintText: "aa@bb.com",
labelText: "Email"
),
keyboardType: TextInputType.emailAddress,
validator: (val){
if (val.length == 0)
return "Please enter email";
else if (!val.contains("@"))
return "Please enter valid email";
else
return null;
},
onSaved: (val)=>_email=val,
),
new TextFormField(
decoration: InputDecoration(
hintText: "Password",
labelText: "Password"
),
obscureText: true,
validator: (val){
if (val.length == 0)
return "Please enter password";
else if (val.length <= 5)
return "Your password should be more then 6 char long";
else
return null;
},
onSaved: (val)=>_password=val,
),
new Padding(
padding: const EdgeInsets.only(top: 20.0),
),
new RaisedButton(
child: new Text("Submit"),
onPressed: (){
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
_scaffoldKey.currentState.showSnackBar(new SnackBar(
content: new Text("Your email: $_email and Password: $_password"),
));
}
},
color: Colors.blue,
highlightColor: Colors.blueGrey,
)
],
),
);
}
}
Here in that above demo we are using StatefulWidget and below GlobalKeys
final _formKey = GlobalKey<FormState>();
final _scaffoldKey = GlobalKey<ScaffoldState>();
For access its state and property.
We have two TextFormFields for input Email and Password. And it has InputDecoration for decorate text input. The main method is validator method of Text field that will help you for validate form.
At the last RaisedButton,
new RaisedButton(
child: new Text("Submit"),
onPressed: (){
if (_formKey.currentState.validate()) {
_formKey.currentState.save();
_scaffoldKey.currentState.showSnackBar(new SnackBar(
content: new Text("Your email: $_email and Password: $_password"),
));
}
},
color: Colors.blue,
highlightColor: Colors.blueGrey,
)
It has one method onPressed in that method, we are checking form validation by
if (_formKey.currentState.validate()) …..
We can access form current state by using formKey. validation() method return true then Just display toast(showSnackBar). If return false then display string error message that already putted in validation() method of TextForm Field
That’s It!!
Hope you guys this is enough for your understanding. If you have any query or question then comment it.
