How to add validation for flutter form? - validation

Question

How can I add validations to the username password when we click on the submit button.
I have created 2 different classes for Widget _buildUserNameTF() and Widget _buildPasswordTF()
when we click on Widget _buildLoginBtn() the validation must be done onWidget _buildUserNameTF() and Widget _buildPasswordTF()
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/utilities/constants.dart';
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => new _LoginPageState();
// State<StatefulWidget> createState() {
// return _LoginPageState();
// }
}
class _LoginPageState extends State<LoginPage> {
final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();
// FormType _formType = FormType.login;
String _userName = "";
String _password = "";
void validateAndSave() {
final form = formKey.currentState;
if (form.validate()) {
form.save();
// performLogin();
}
}
void performLogin() {
final snackbar = new SnackBar(
content: new Text("Username : $_userName, password : $_password"),
);
scaffoldKey.currentState.showSnackBar(snackbar);
}
Widget _buildUserNameTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Username',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextFormField(
keyboardType: TextInputType.text,
key: formKey,
autovalidate: _autoValidate,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.account_circle,
color: Colors.white,
),
hintText: 'Enter your Username',
hintStyle: kHintTextStyle,
),
validator: (value) {
return value.isEmpty ? 'Username is Required.' : null;
},
onSaved: (value) {
return _userName = value;
},
),
),
],
);
}
Widget _buildPasswordTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Password',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextFormField(
obscureText: true,
key: formPassKey,
autovalidate: _autoValidate,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
hintText: 'Enter your Password',
hintStyle: kHintTextStyle,
),
validator: (String value) {
if (value.isEmpty) {
return 'Password is Required.';
}
if (value.length < 6) {
return 'Password too short.';
}
return null;
// return value.isEmpty ? 'Password is Required.' : null;
// || value.length < 6 ? 'Password too short' : null;
},
onSaved: (String value) {
return _password = value;
},
// validator: (val) =>
// val.length < 6 ? 'Password too short' : null,
// onSaved: (val) => _password = val,
),
),
],
);
}
Widget _buildLoginBtn() {
return Container(
padding: EdgeInsets.symmetric(vertical: 25.0),
width: double.infinity,
child: Form(
child: RaisedButton(
elevation: 5.0,
onPressed: (
){
validateAndSave();
},
// => print('Login Button Pressed'),
padding: EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: Colors.white,
child: Text(
'LOGIN',
style: TextStyle(
color: Color(0xFF527DAA),
letterSpacing: 1.5,
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF73AEF5),
Color(0xFF61A4F1),
Color(0xFF478DE0),
Color(0xFF398AE5),
],
stops: [0.1, 0.4, 0.7, 0.9],
),
),
),
Container(
height: double.infinity,
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 120.0,
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
// key: formKey,
children: <Widget>[
Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 30.0),
_buildUserNameTF(),
SizedBox(
height: 30.0,
),
_buildPasswordTF(),
_buildLoginBtn(),
],
),
),
)
],
),
),
),
);
}
}
I tried the following as well but the output interfaces runs like this

Answer 1

You can copy paste run full code below
Step 1: You can remove formKey in TextFormField
TextFormField(
keyboardType: TextInputType.text,
//key: formKey,
Step 2: Wrap Column with Form and provide formKey
child: Form(
key: formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Sign In',
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
final kHintTextStyle = TextStyle(
color: Colors.white54,
fontFamily: 'OpenSans',
);
final kLabelStyle = TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
);
final kBoxDecorationStyle = BoxDecoration(
color: Color(0xFF6CA8F1),
borderRadius: BorderRadius.circular(10.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 6.0,
offset: Offset(0, 2),
),
],
);
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => new _LoginPageState();
// State<StatefulWidget> createState() {
// return _LoginPageState();
// }
}
class _LoginPageState extends State<LoginPage> {
final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();
// FormType _formType = FormType.login;
String _userName = "";
String _password = "";
void validateAndSave() {
final form = formKey.currentState;
if (form.validate()) {
form.save();
// performLogin();
}
}
void performLogin() {
final snackbar = new SnackBar(
content: new Text("Username : $_userName, password : $_password"),
);
scaffoldKey.currentState.showSnackBar(snackbar);
}
Widget _buildUserNameTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Username',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
//decoration: kBoxDecorationStyle,
height: 60.0,
child: TextFormField(
keyboardType: TextInputType.text,
//key: formKey,
autovalidate: false,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.account_circle,
color: Colors.white,
),
hintText: 'Enter your Username',
hintStyle: kHintTextStyle,
),
validator: (value) {
return value.isEmpty ? 'Username is Required.' : null;
},
onSaved: (value) {
return _userName = value;
},
),
),
],
);
}
Widget _buildPasswordTF() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Password',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextFormField(
obscureText: true,
//key: formPassKey,
autovalidate: false,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
hintText: 'Enter your Password',
hintStyle: kHintTextStyle,
),
validator: (String value) {
if (value.isEmpty) {
return 'Password is Required.';
}
if (value.length < 6) {
return 'Password too short.';
}
return null;
// return value.isEmpty ? 'Password is Required.' : null;
// || value.length < 6 ? 'Password too short' : null;
},
onSaved: (String value) {
return _password = value;
},
// validator: (val) =>
// val.length < 6 ? 'Password too short' : null,
// onSaved: (val) => _password = val,
),
),
],
);
}
Widget _buildLoginBtn() {
return Container(
padding: EdgeInsets.symmetric(vertical: 25.0),
width: double.infinity,
child: Form(
child: RaisedButton(
elevation: 5.0,
onPressed: () {
validateAndSave();
},
// => print('Login Button Pressed'),
padding: EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: Colors.white,
child: Text(
'LOGIN',
style: TextStyle(
color: Color(0xFF527DAA),
letterSpacing: 1.5,
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
),
),
),
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle.light,
child: GestureDetector(
onTap: () => FocusScope.of(context).unfocus(),
child: Stack(
children: <Widget>[
Container(
height: double.infinity,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xFF73AEF5),
Color(0xFF61A4F1),
Color(0xFF478DE0),
Color(0xFF398AE5),
],
stops: [0.1, 0.4, 0.7, 0.9],
),
),
),
Container(
height: double.infinity,
child: SingleChildScrollView(
physics: AlwaysScrollableScrollPhysics(),
padding: EdgeInsets.symmetric(
horizontal: 40.0,
vertical: 120.0,
),
child: Form(
key: formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
// key: formKey,
children: <Widget>[
Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
fontSize: 30.0,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 30.0),
_buildUserNameTF(),
SizedBox(
height: 30.0,
),
_buildPasswordTF(),
_buildLoginBtn(),
],
),
),
),
)
],
),
),
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: LoginPage(),
);
}
}