check form validateion

lib/helpers/theme.dart

@@ -8,7 +8,7 @@ const buttonColor = const Color(0xFFFFFFFF);
 const buttonBkColor = const Color(0xFF268944);
 const labelColor = const Color(0xFF757575);
 var dividerColor = Colors.grey.shade400;
-const dangerColor= const Color(0xffff0606);
+const dangerColor = const Color(0xffff0606);
 
 const TextStyle labelStyle =
     TextStyle(fontSize: 20, color: labelColor, fontWeight: FontWeight.w500);

lib/pages/fcs_shipment/fcs_shipment_editor.dart

@@ -26,6 +26,7 @@ class FcsShipmentEditor extends StatefulWidget {
 }
 
 class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
+  final _formKey = GlobalKey<FormState>();
   var dateFormatter = new DateFormat('dd MMM yyyy');
   TextEditingController _shipmentNumberController = new TextEditingController();
   TextEditingController _cutoffDateController = new TextEditingController();
@@ -111,63 +112,86 @@ class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
                 Navigator.of(context).pop();
               }
             }),
-        body: ListView(
+        body: Form(
-            padding: const EdgeInsets.only(left: 10, right: 10),
+          key: _formKey,
-            children: <Widget>[
+          child: ListView(
-              InputText(
+              padding: const EdgeInsets.only(left: 10, right: 10),
-                labelTextKey: "FCSshipment.number",
+              children: <Widget>[
-                iconData: Ionicons.ios_airplane,
+                InputText(
-                controller: _shipmentNumberController,
+                  labelTextKey: "FCSshipment.number",
-              ),
+                  iconData: Ionicons.ios_airplane,
-              InputDate(
+                  controller: _shipmentNumberController,
-                labelTextKey: "FCSshipment.cutoff_date",
+                  validator: (value) {
-                iconData: Icons.date_range,
+                    if (value!.isEmpty) {
-                controller: _cutoffDateController,
+                      return "Enter shipment number";
-              ),
+                    }
-              InputDate(
+                    return null;
-                labelTextKey: "FCSshipment.ETA",
+                  },
-                iconData: Icons.date_range,
+                ),
-                controller: _arrivalDateController,
+                InputDate(
-              ),
+                  labelTextKey: "FCSshipment.cutoff_date",
-              DropdownButtonFormField(
+                  iconData: Icons.date_range,
-                value: _currentShipmentType == "" ? null : _currentShipmentType,
+                  controller: _cutoffDateController,
-                decoration: InputDecoration(
+                  validator: (value) {
-                    enabledBorder: UnderlineInputBorder(
+                    if (value!.isEmpty) {
-                        borderSide: BorderSide(color: primaryColor)),
+                      return "Select cutoff date";
-                    focusedBorder: UnderlineInputBorder(
+                    }
-                        borderSide: BorderSide(color: primaryColor)),
+                    return null;
-                    fillColor: Colors.white,
+                  },
-                    labelStyle: languageModel.isEng
+                ),
-                        ? newLabelStyle(color: Colors.black54, fontSize: 20)
+                InputDate(
-                        : newLabelStyleMM(color: Colors.black54, fontSize: 20),
+                  labelTextKey: "FCSshipment.ETA",
-                    labelText: AppTranslations.of(context)!
+                  iconData: Icons.date_range,
-                        .text('FCSshipment.shipment_type'),
+                  controller: _arrivalDateController,
-                    icon: Icon(Ionicons.ios_airplane, color: primaryColor)),
+                  validator: (value) {
-                items: mainModel.setting!.shipmentTypes
+                    if (value!.isEmpty) {
-                    .map((e) => DropdownMenuItem(child: Text(e), value: e))
+                      return "Select ETA date";
-                    .toList(),
+                    }
-                onChanged: (String? selected) => {
+                    return null;
-                  setState(() {
+                  },
-                    _currentShipmentType = selected;
+                ),
-                  })
+                DropdownButtonFormField(
-                },
+                  value:
-              ),
+                      _currentShipmentType == "" ? null : _currentShipmentType,
-              InputText(
+                  decoration: InputDecoration(
-                  labelTextKey: 'FCSshipment.consignee',
+                      enabledBorder: UnderlineInputBorder(
-                  iconData: Icons.work,
+                          borderSide: BorderSide(color: primaryColor)),
-                  controller: _consigneeController),
+                      focusedBorder: UnderlineInputBorder(
-              InputText(
+                          borderSide: BorderSide(color: primaryColor)),
-                  labelTextKey: 'FCSshipment.port_of_loading',
+                      fillColor: Colors.white,
-                  iconData: FontAwesomeIcons.ship,
+                      labelStyle: languageModel.isEng
-                  controller: _portController),
+                          ? newLabelStyle(color: Colors.black54, fontSize: 20)
-              InputText(
+                          : newLabelStyleMM(
-                  labelTextKey: 'FCSshipment.final_destination',
+                              color: Colors.black54, fontSize: 20),
-                  iconData: MaterialCommunityIcons.location_enter,
+                      labelText: AppTranslations.of(context)!
-                  controller: _destinationController),
+                          .text('FCSshipment.shipment_type'),
-              SizedBox(height: 20),
+                      icon: Icon(Ionicons.ios_airplane, color: primaryColor)),
-              _isNew ? createBtn : updateBtn,
+                  items: mainModel.setting!.shipmentTypes
-              SizedBox(height: 15)
+                      .map((e) => DropdownMenuItem(child: Text(e), value: e))
-            ]),
+                      .toList(),
+                  onChanged: (String? selected) => {
+                    setState(() {
+                      _currentShipmentType = selected;
+                    })
+                  },
+                ),
+                InputText(
+                    labelTextKey: 'FCSshipment.consignee',
+                    iconData: Icons.work,
+                    controller: _consigneeController),
+                InputText(
+                    labelTextKey: 'FCSshipment.port_of_loading',
+                    iconData: FontAwesomeIcons.ship,
+                    controller: _portController),
+                InputText(
+                    labelTextKey: 'FCSshipment.final_destination',
+                    iconData: MaterialCommunityIcons.location_enter,
+                    controller: _destinationController),
+                SizedBox(height: 20),
+                _isNew ? createBtn : updateBtn,
+                SizedBox(height: 15)
+              ]),
+        ),
       ),
     );
   }
@@ -180,45 +204,20 @@ class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
     fcsShipment.consignee = _consigneeController.text;
     fcsShipment.port = _portController.text;
     fcsShipment.destination = _destinationController.text;
-    try {
+
-      var cutoffDate = _cutoffDateController.text;
+    var cutoffDate = _cutoffDateController.text;
-      var arrivalDate = _arrivalDateController.text;
+    var arrivalDate = _arrivalDateController.text;
-      fcsShipment.cutoffDate =
+    fcsShipment.cutoffDate =
-          (cutoffDate == "" ? null : dateFormatter.parse(cutoffDate))!;
+        (cutoffDate == "" ? null : dateFormatter.parse(cutoffDate))!;
-      fcsShipment.arrivalDate =
+    fcsShipment.arrivalDate =
-          (arrivalDate == "" ? null : dateFormatter.parse(arrivalDate))!;
+        (arrivalDate == "" ? null : dateFormatter.parse(arrivalDate))!;
-    } catch (e) {
-      // showMsgDialog(context, "Error", e.toString()); // shold never happen
-    }
     return fcsShipment;
   }
 
-  Future<bool> _validate(FcsShipment fcsShipment) async {
-    if (fcsShipment.shipmentNumber == "") {
-      await showMsgDialog(context, "Error", "Invalid shipment number!");
-      return false;
-    }
-    if (fcsShipment.shipType == null) {
-      await showMsgDialog(context, "Error", "Invalid shipment type!");
-      return false;
-    }
-    if (fcsShipment.cutoffDate == null) {
-      await showMsgDialog(context, "Error", "Invalid cutoff date!");
-      return false;
-    }
-    if (fcsShipment.arrivalDate == null) {
-      await showMsgDialog(context, "Error", "Invalid ETA date!");
-      return false;
-    }
-    return true;
-  }
-
   Future<void> _create() async {
+    if (!_formKey.currentState!.validate()) return;
     FcsShipment fcsShipment = _getPayload();
-    bool valid = await _validate(fcsShipment);
+
-    if (!valid) {
-      return;
-    }
     setState(() {
       _isLoading = true;
     });
@@ -236,11 +235,9 @@ class _FcsShipmentEditorState extends State<FcsShipmentEditor> {
   }
 
   Future<void> _update() async {
+    if (!_formKey.currentState!.validate()) return;
     FcsShipment fcsShipment = _getPayload();
-    bool valid = await _validate(fcsShipment);
+
-    if (!valid) {
-      return;
-    }
     setState(() {
       _isLoading = true;
     });

lib/pages/staff/staff_pin_editor.dart

@@ -16,6 +16,7 @@ class StaffPinEditor extends StatefulWidget {
 }
 
 class _StaffPinEditorState extends State<StaffPinEditor> {
+  final _formKey = GlobalKey<FormState>();
   bool _isLoading = false;
   late User _staff;
   bool _enablePinLogin = false;
@@ -110,28 +111,101 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
               backgroundColor: Colors.white,
               labelColor: primaryColor,
               arrowColor: primaryColor),
-          body: Padding(
+          body: Form(
-            padding: const EdgeInsets.only(left: 15.0, right: 15),
+            key: _formKey,
-            child: ListView(
+            child: Padding(
-              children: <Widget>[
+              padding: const EdgeInsets.only(left: 15.0, right: 15),
-                Column(
+              child: ListView(
-                  children: [
+                children: <Widget>[
-                    Text(_staff.name ?? "",
+                  Column(
-                        style: TextStyle(color: Colors.black, fontSize: 18)),
+                    children: [
-                    Text(_staff.fcsID ?? "",
+                      Text(_staff.name ?? "",
-                        style: TextStyle(color: Colors.black, fontSize: 15)),
+                          style: TextStyle(color: Colors.black, fontSize: 18)),
-                  ],
+                      Text(_staff.fcsID ?? "",
-                ),
+                          style: TextStyle(color: Colors.black, fontSize: 15)),
-                const SizedBox(height: 20),
+                    ],
-                enablePinBox,
+                  ),
-                const SizedBox(height: 30),
+                  const SizedBox(height: 20),
-                newPinBox,
+                  enablePinBox,
-                SizedBox(height: 30),
+                  const SizedBox(height: 30),
-                confirmPinBox,
+                  FormField(
-                SizedBox(height: 30),
+                    builder: (FormFieldState<bool> state) {
-                saveButton,
+                      return Column(
-                SizedBox(height: 30)
+                        crossAxisAlignment: CrossAxisAlignment.start,
-              ],
+                        children: [
+                          newPinBox,
+                          Padding(
+                            padding: const EdgeInsets.only(top: 8.0),
+                            child: _newPin == '' || _newPin.length < 6
+                                ? SizedBox(
+                                    height: 20,
+                                    child: Text(
+                                      state.errorText ?? '',
+                                      style: const TextStyle(
+                                          color: dangerColor, fontSize: 12),
+                                    ),
+                                  )
+                                : const SizedBox(height: 20),
+                          ),
+                        ],
+                      );
+                    },
+                    validator: (value) {
+                      if (_newPin == "") {
+                        return 'Enter new PIN';
+                      }
+
+                      if (_newPin.length < 6) {
+                        return 'New PIN must be 6 digits';
+                      }
+                      return null;
+                    },
+                  ),
+                  SizedBox(height: 10),
+                  FormField(
+                    builder: (FormFieldState<bool> state) {
+                      return Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          confirmPinBox,
+                          Padding(
+                              padding: const EdgeInsets.only(top: 8.0),
+                              child: _confirmPin == '' ||
+                                      _confirmPin.length < 6 ||
+                                      _confirmPin != _newPin
+                                  ? SizedBox(
+                                      height: 20,
+                                      child: Text(
+                                        state.errorText ?? '',
+                                        style: const TextStyle(
+                                            color: dangerColor, fontSize: 12),
+                                      ),
+                                    )
+                                  : const SizedBox(height: 20)),
+                        ],
+                      );
+                    },
+                    validator: (value) {
+                      if (_confirmPin == "") {
+                        return 'Enter confirm PIN';
+                      }
+
+                      if (_confirmPin.length < 6) {
+                        return 'Confirm PIN must be 6 digits';
+                      }
+
+                      if (_confirmPin != _newPin) {
+                        return "Those pins didn’t match. Try again.";
+                      }
+
+                      return null;
+                    },
+                  ),
+                  SizedBox(height: 20),
+                  saveButton,
+                  SizedBox(height: 30)
+                ],
+              ),
             ),
           ),
         ));
@@ -150,30 +224,7 @@ class _StaffPinEditorState extends State<StaffPinEditor> {
   }
 
   _save() async {
-    if (_newPin == "") {
+    if (!_formKey.currentState!.validate()) return;
-      showMsgDialog(context, "Error", "Invalid new PIN");
-      return;
-    }
-
-    if (_newPin.length < 6) {
-      showMsgDialog(context, "Error", "New PIN must be 6 digits");
-      return;
-    }
-
-    if (_confirmPin == "") {
-      showMsgDialog(context, "Error", "Invalid confirm PIN");
-      return;
-    }
-
-    if (_confirmPin.length < 6) {
-      showMsgDialog(context, "Error", "Confirm PIN must be 6 digits");
-      return;
-    }
-
-    if (_confirmPin != _newPin) {
-      showMsgDialog(context, "Error", "Those pins didn’t match. Try again.");
-      return;
-    }
 
     setState(() {
       _isLoading = true;

lib/pages/widgets/input_date.dart

@@ -84,6 +84,7 @@ class InputDate extends StatelessWidget {
             hintStyle: TextStyle(
               height: 1.5,
             ),
+            errorStyle: const TextStyle(color: dangerColor, fontSize: 12),
             labelText: labelTextKey == null
                 ? null
                 : AppTranslations.of(context)!.text(labelTextKey!),
@@ -108,6 +109,22 @@ class InputDate extends StatelessWidget {
                   )
                 : UnderlineInputBorder(
                     borderSide: BorderSide(color: primaryColor, width: 1.0)),
+            errorBorder: withBorder
+                ? OutlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0),
+                  )
+                : UnderlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0)),
+            focusedErrorBorder: withBorder
+                ? OutlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0),
+                  )
+                : UnderlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0)),
           ),
           validator: validator),
     );

lib/pages/widgets/input_text.dart

@@ -57,6 +57,7 @@ class InputText extends StatelessWidget {
             constraints: constraints,
             contentPadding: contentPadding,
             // hintText: '',
+            errorStyle: const TextStyle(color: dangerColor, fontSize: 12),
             hintStyle: TextStyle(
               height: 1.5,
             ),
@@ -96,6 +97,22 @@ class InputText extends StatelessWidget {
                 : UnderlineInputBorder(
                     borderSide: BorderSide(
                         color: borderColor ?? primaryColor, width: 1.0)),
+            errorBorder: withBorder
+                ? OutlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0),
+                  )
+                : UnderlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0)),
+            focusedErrorBorder: withBorder
+                ? OutlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0),
+                  )
+                : UnderlineInputBorder(
+                    borderSide: BorderSide(
+                        color: borderColor ?? dangerColor, width: 1.0)),
           ),
           validator: validator),
     );