validate form in pinloginpage

lib/pages/signin/pinlogin_page.dart

@@ -16,8 +16,9 @@ class PinLoginPage extends StatefulWidget {
 
 class _PinLoginPageState extends State<PinLoginPage> {
   bool _isLoading = false;
-  late String pin;
+  String pin = "";
   //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,9 +123,10 @@ class _PinLoginPageState extends State<PinLoginPage> {
           // appBar: LocalAppBar(
           //   backgroundColor: primaryColor,
 
-            
           // ),
-          body: ListView(
+          body: Form(
+        key: _formKey,
+        child: ListView(
           padding: EdgeInsets.only(top: 80, left: 15, right: 15, bottom: 20),
           children: [
             pinLoginLogo,
@@ -102,19 +152,10 @@ class _PinLoginPageState extends State<PinLoginPage> {
                   color: Colors.black54,
                   fontSize: 15,
                 )),
-              PinInputTextField(
-                cursor: Cursor(
-                    color: primaryColor, enabled: true, width: 2, height: 23),
-                pinLength: 6,
-                decoration: BoxLooseDecoration(
-                    strokeColorBuilder: PinListenColorBuilder(
-                        primaryColor, Colors.grey.shade400)),
-                textInputAction: TextInputAction.done,
-                autoFocus: false,
-                onChanged: _pinChange,
-              ),
+            pinInputBox,
             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;