validate form in pinloginpage

lib/pages/signin/pinlogin_page.dart

@@ -7,7 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:pin_input_text_field/pin_input_text_field.dart';
 
 class PinLoginPage extends StatefulWidget {
-    //final User user;
+  //final User user;
   const PinLoginPage({super.key});
 
   @override
@@ -16,8 +16,9 @@ class PinLoginPage extends StatefulWidget {
 
 class _PinLoginPageState extends State<PinLoginPage> {
   bool _isLoading = false;
-  late String pin;
+  String pin = "";
-   //late User _user;
+  //late User _user;
+  final _formKey = GlobalKey<FormState>();
   TextEditingController _fcsIdCtl = new TextEditingController();
 
   @override
@@ -34,6 +35,13 @@ class _PinLoginPageState extends State<PinLoginPage> {
     final fcsIdBox = TextFormField(
       controller: _fcsIdCtl,
       autofocus: true,
+      autovalidateMode: AutovalidateMode.onUserInteraction,
+      validator: (value) {
+        if (value == null || value.isEmpty) {
+          return 'Please enter FCS ID';
+        }
+        return null;
+      },
       style: TextStyle(
           fontSize: 15, color: Colors.black87, fontWeight: FontWeight.w500),
       cursorColor: primaryColor,
@@ -47,6 +55,7 @@ class _PinLoginPageState extends State<PinLoginPage> {
             borderSide: BorderSide(color: primaryColor, width: 1.0)),
         disabledBorder: UnderlineInputBorder(
             borderSide: BorderSide(color: primaryColor, width: 1.0)),
+        errorStyle: TextStyle(color: dangerColor),
       ),
     );
 
@@ -60,6 +69,46 @@ class _PinLoginPageState extends State<PinLoginPage> {
         fit: BoxFit.fitHeight,
       ),
     );
+    final pinInputBox = FormField(
+        validator: (value) {
+          if (pin == "") {
+            return "Please enter PIN";
+          }
+          if (pin.length < 6) {
+            return "PIN must be 6 digit";
+          }
+          return null;
+        },
+        autovalidateMode: AutovalidateMode.onUserInteraction,
+        builder: (state) {
+          return Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              PinInputTextField(
+                cursor: Cursor(
+                    color: primaryColor, enabled: true, width: 2, height: 23),
+                pinLength: 6,
+                decoration: BoxLooseDecoration(
+                    strokeColorBuilder: PinListenColorBuilder(
+                        primaryColor, Colors.grey.shade400),
+                    errorTextStyle: TextStyle(color: dangerColor)),
+                textInputAction: TextInputAction.done,
+                autoFocus: false,
+                onChanged: _pinChange,
+              ),
+              Padding(
+                padding: const EdgeInsets.only(top: 8),
+                child: pin == "" || pin.length < 6
+                    ? SizedBox(
+                        height: 20,
+                        child: Text(state.errorText ?? "",
+                            style: TextStyle(color: dangerColor, fontSize: 12)),
+                      )
+                    : const SizedBox(height: 20),
+              )
+            ],
+          );
+        });
 
     final loginBtn = Padding(
       padding: EdgeInsets.only(top: 30),
@@ -74,48 +123,40 @@ class _PinLoginPageState extends State<PinLoginPage> {
           // appBar: LocalAppBar(
           //   backgroundColor: primaryColor,
 
-            
           // ),
-          body: ListView(
+          body: Form(
-            padding: EdgeInsets.only(top: 80, left: 15, right: 15, bottom: 20),
+        key: _formKey,
-            children: [
+        child: ListView(
-              pinLoginLogo,
+          padding: EdgeInsets.only(top: 80, left: 15, right: 15, bottom: 20),
-              Padding(
+          children: [
-                padding: EdgeInsets.only(top: 20, bottom: 20),
+            pinLoginLogo,
-                child: Center(
+            Padding(
-                  child: LocalText(context, "welcome.pinlogin",
+              padding: EdgeInsets.only(top: 20, bottom: 20),
-                      color: Colors.black, fontSize: 18),
+              child: Center(
-                ),
+                child: LocalText(context, "welcome.pinlogin",
+                    color: Colors.black, fontSize: 18),
               ),
-              LocalText(
+            ),
-                context,
+            LocalText(
-                "welcome.pinlogin.fcsid",
+              context,
-                color: Colors.black54,
+              "welcome.pinlogin.fcsid",
-                fontSize: 15,
+              color: Colors.black54,
-              ),
+              fontSize: 15,
-              fcsIdBox,
+            ),
-              Padding(
+            fcsIdBox,
-                  padding: EdgeInsets.only(top: 25, bottom: 20),
+            Padding(
-                  child: LocalText(
+                padding: EdgeInsets.only(top: 25, bottom: 20),
-                    context,
+                child: LocalText(
-                    "welcome.pinlogin.pin",
+                  context,
-                    color: Colors.black54,
+                  "welcome.pinlogin.pin",
-                    fontSize: 15,
+                  color: Colors.black54,
-                  )),
+                  fontSize: 15,
-              PinInputTextField(
+                )),
-                cursor: Cursor(
+            pinInputBox,
-                    color: primaryColor, enabled: true, width: 2, height: 23),
+            loginBtn,
-                pinLength: 6,
+          ],
-                decoration: BoxLooseDecoration(
+        ),
-                    strokeColorBuilder: PinListenColorBuilder(
+      )),
-                        primaryColor, Colors.grey.shade400)),
-                textInputAction: TextInputAction.done,
-                autoFocus: false,
-                onChanged: _pinChange,
-              ),
-              loginBtn,
-            ],
-          )),
     );
   }
 
@@ -124,16 +165,20 @@ class _PinLoginPageState extends State<PinLoginPage> {
       this.pin = pin;
     });
   }
+
   _login() async {
-    if (pin == "") {
+    if (pin == "" && _formKey.currentState!.validate()) {
       showMsgDialog(context, "Error", "Invalid PIN");
       return;
     }
 
-    if (pin.length < 6) {
+    if (pin.length < 6 && _formKey.currentState!.validate()) {
       showMsgDialog(context, "Error", "PIN must be 6 digits");
       return;
     }
+    if (!_formKey.currentState!.validate()) {
+      return;
+    }
 
     setState(() {
       _isLoading = true;