Flutter Form Validation
Flutter Form Validation
Structure (Flutter Form Validation)
Flutter Form Validation. Flutter has 2 Powerful widgets StatelessWidget and StatefulWidget create a simple Stateless or Stateful Widget and return your Scaffold here. After this there will be a Column and two numbers of TextFormFields email and password. And the Column will be wrapped in the Widget named Form.
Explaining Code
The TextFormField looks like
TextFormField()
in its parenthesis there is a property validator which is a Function and it’s return type is String.
validator: (value) {}
in its body we will check our conditions to validate this FormField the way we want. And there are many ways to validate a form.
Validation of Email
If we want to validate the email field we want the conditions for the field like (This cannot be empty and checking for email validated syntax). First we will check how to validate the syntax of the email. For this we have a RegExp pattern text.
RegExp pattern to validate email syntax :
r"""^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+"""
Store this in a variable. And check the condition in the validator property of the TextFormField Widget and also for (the field cannot be empty).
validator: (value) {
if (RegExp(emailRegex).hasMatch(value!)) {
// return nothing
} else if (value == null || value.isEmpty) {
return "field cannot be empty";
} else {
return "email is not correctly formatted";
}
},
And this is it for the email field.
Validation of Password
Same like the email field the 1st condition in password validation we want is (field cannot be empty and the 2nd is if characters were less than 6 so we will show the error message).
validator: (value) {
if (value == null || value.isEmpty) {
return "field cannot be empty";
} else if (value.length < 6) {
return "must be at least 6 chars";
} else {
return null;
}
},
And this is it for this password field.
Next create a generic type variable like :
Note : This will be in StatefulWidget.
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key); @override
State<HomePage> createState() => _HomePageState();
}class _HomePageState extends State<HomePage> { GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
...
And then pass this _formKey in the required property key of Form Widget in which our Column of two Fields is wrapped.
Form(
key: _formKey,
child: Column(
children: [
... Fields...
],
),
)
The next step is when we click on the Submit button If forms are correctly validated then we will navigate to the WelcomePage otherwise we will receive the error messages.
ElevatedButton(
child: Text("Submit"),
onPressed: () {
if (_formKey.currentState!.validate()) {
Navigator.push(context, MaterialPageRoute(builder: (_) => WelcomePage()));
} else {
return null;
}
}),
Conclusion
Flutter has very beautiful and easy syntax Widgets. We will upload more articles like this on different Widgets. Hope this was helpful ❤.
Checkout YouTube: https://www.youtube.com/channel/UCO6gMNHYhRqyzbskNh4gG_A
Our Website: https://www.etechviral.com
Find me on:
GitHub: https://github.com/AdnanKhan45
LinkedIn: https://www.linkedin.com/in/adnan-khan-23bb8821b/
Instagram: https://www.instagram.com/dev.adnankhan
Twitter: https://twitter.com/Adnan54M
Facebook: https://web.facebook.com/profile.php?id=100011793480431