Add custom validation to form feilds

Year-3-Assignments · Aug 1, 2021 · 5cabed0 · 5cabed0
1 parent d1d4d2e
commit 5cabed0
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 49 deletions.
diff --git a/lib/components/rounded_button.dart b/lib/components/rounded_button.dart
@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-class RoundedButton extends StatelessWidget {
+class RoundedButton extends StatefulWidget {
   final String text;
   final Function action;
   final Color color = Colors.red;
@@ -17,6 +17,33 @@ class RoundedButton extends StatelessWidget {
     this.width,
     this.icon,
   }) : super(key: key);
+  @override
+  _RoundedButtonState createState() => _RoundedButtonState(
+        action: action,
+        height: height,
+        icon: icon,
+        text: text,
+        width: width,
+      );
+}
+
+class _RoundedButtonState extends State<RoundedButton> {
+  final String text;
+  final Function action;
+  final Color color = Colors.red;
+  final double height;
+  final double width;
+  final IconData icon;
+  final Color textColor = Colors.white;
+
+  _RoundedButtonState({
+    Key key,
+    this.text,
+    this.action,
+    this.height,
+    this.width,
+    this.icon,
+  });
 
   @override
   Widget build(BuildContext context) {

diff --git a/lib/components/rounded_input_field.dart b/lib/components/rounded_input_field.dart
@@ -6,13 +6,15 @@ class RoundedTextFeild extends StatefulWidget {
   final String text;
   final bool isNumber;
   final bool isPhoneNumber;
+  final bool isRequiredFeild;
   const RoundedTextFeild({
     Key key,
     this.onChange,
     this.isPassword,
     this.isNumber,
     this.text,
     this.isPhoneNumber = false,
+    this.isRequiredFeild,
   }) : super(key: key);
   @override
   _RoundedTextFeildState createState() => _RoundedTextFeildState(
@@ -21,6 +23,7 @@ class RoundedTextFeild extends StatefulWidget {
         isPhoneNumber: isPhoneNumber,
         onChange: onChange,
         text: text,
+        isRequiredFeild: isRequiredFeild,
       );
 }
 
@@ -30,6 +33,8 @@ class _RoundedTextFeildState extends State<RoundedTextFeild> {
   final String text;
   final bool isNumber;
   final bool isPhoneNumber;
+  final bool isRequiredFeild;
+  bool _isFieldValid;
   bool _isObscure = true;
   _RoundedTextFeildState({
     Key key,
@@ -38,6 +43,7 @@ class _RoundedTextFeildState extends State<RoundedTextFeild> {
     this.isNumber,
     this.text,
     this.isPhoneNumber = false,
+    this.isRequiredFeild,
   });
   @override
   Widget build(BuildContext context) {
@@ -59,7 +65,20 @@ class _RoundedTextFeildState extends State<RoundedTextFeild> {
             height: size.height * 0.005,
           ),
           TextFieldContainer(
-            child: TextField(
+            child: TextFormField(
+              validator: (value) {
+                if (value.isEmpty) {
+                  setState(() {
+                    _isFieldValid = false;
+                  });
+                  return null;
+                } else {
+                  setState(() {
+                    _isFieldValid = true;
+                  });
+                  return null;
+                }
+              },
               obscureText: isPassword ? _isObscure : false,
               maxLength: isPhoneNumber ? 10 : 200,
               keyboardType:
@@ -85,8 +104,23 @@ class _RoundedTextFeildState extends State<RoundedTextFeild> {
               ),
             ),
           ),
+          isRequiredFeild != null &&
+                  isRequiredFeild &&
+                  _isFieldValid != null &&
+                  !_isFieldValid
+              ? Padding(
+                  padding: EdgeInsets.only(left: 15),
+                  child: Text(
+                    text + ' is required!',
+                    style: TextStyle(
+                      color: Colors.red[800],
+                      fontFamily: 'Larsseit',
+                    ),
+                  ),
+                )
+              : Text(''),
           SizedBox(
-            height: size.height * 0.025,
+            height: size.height * 0.010,
           ),
         ],
       ),

diff --git a/lib/screens/login/login_form.dart b/lib/screens/login/login_form.dart
@@ -10,11 +10,18 @@ class LoginForm extends StatefulWidget {
 class _LoginFormState extends State<LoginForm> {
   String phoneNumber;
   String password;
+  final _formKey = GlobalKey<FormState>();
   _LoginFormState({
     this.phoneNumber,
     this.password,
   });
 
+  void submitForm() {
+    if (_formKey.currentState.validate()) {
+      print('Sign Up clicked ' + phoneNumber + ' ' + password);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.of(context).size;
@@ -28,55 +35,58 @@ class _LoginFormState extends State<LoginForm> {
       ),
       child: Padding(
         padding: EdgeInsets.only(top: 30, left: 25, right: 25),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: <Widget>[
-            Text(
-              'Sign Up',
-              style: TextStyle(
-                fontFamily: 'Larsseit',
-                fontSize: 30,
-                fontWeight: FontWeight.bold,
+        child: Form(
+          key: _formKey,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: <Widget>[
+              Text(
+                'Sign Up',
+                style: TextStyle(
+                  fontFamily: 'Larsseit',
+                  fontSize: 30,
+                  fontWeight: FontWeight.bold,
+                ),
+                textAlign: TextAlign.left,
+              ),
+              SizedBox(
+                height: size.height * 0.025,
               ),
-              textAlign: TextAlign.left,
-            ),
-            SizedBox(
-              height: size.height * 0.025,
-            ),
-            RoundedTextFeild(
-              isPassword: false,
-              isNumber: true,
-              isPhoneNumber: true,
-              text: 'Phone Number',
-              onChange: (text) {
-                phoneNumber = text;
-              },
-            ),
-            RoundedTextFeild(
-              isPassword: true,
-              isNumber: false,
-              isPhoneNumber: false,
-              text: 'Password',
-              onChange: (text) {
-                password = text;
-              },
-            ),
-            SizedBox(
-              height: size.height * 0.025,
-            ),
-            Align(
-              alignment: Alignment.bottomRight,
-              child: RoundedButton(
-                text: 'SIGN UP',
-                action: () {
-                  print('Sign Up clicked ' + phoneNumber + ' ' + password);
+              RoundedTextFeild(
+                isRequiredFeild: true,
+                isPassword: false,
+                isNumber: true,
+                isPhoneNumber: true,
+                text: 'Phone Number',
+                onChange: (text) {
+                  phoneNumber = text;
                 },
-                height: size.height * 0.072,
-                width: size.width * 0.39,
-                icon: Icons.near_me,
               ),
-            )
-          ],
+              RoundedTextFeild(
+                isRequiredFeild: true,
+                isPassword: true,
+                isNumber: false,
+                isPhoneNumber: false,
+                text: 'Password',
+                onChange: (text) {
+                  password = text;
+                },
+              ),
+              SizedBox(
+                height: size.height * 0.010,
+              ),
+              Align(
+                alignment: Alignment.bottomRight,
+                child: RoundedButton(
+                  text: 'SIGN UP',
+                  action: submitForm,
+                  height: size.height * 0.072,
+                  width: size.width * 0.39,
+                  icon: Icons.near_me,
+                ),
+              )
+            ],
+          ),
         ),
       ),
     );