patient edit with new layout builder

Frontend/patient_manager/lib/mih_packages/patient_profile/patient_edit.dart

@@ -3,6 +3,10 @@ import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:patient_manager/mih_components/mih_inputs_and_buttons/mih_dropdown_input.dart';
+import 'package:patient_manager/mih_components/mih_layout/mih_action.dart';
+import 'package:patient_manager/mih_components/mih_layout/mih_body.dart';
+import 'package:patient_manager/mih_components/mih_layout/mih_header.dart';
+import 'package:patient_manager/mih_components/mih_layout/mih_layout_builder.dart';
 import 'package:patient_manager/mih_components/mih_pop_up_messages/mih_error_message.dart';
 import 'package:patient_manager/mih_components/mih_pop_up_messages/mih_success_message.dart';
 import 'package:patient_manager/mih_components/mih_inputs_and_buttons/mih_text_input.dart';
@@ -366,19 +370,34 @@ class _EditPatientState extends State<EditPatient> {
 
   Widget displayForm() {
     return SingleChildScrollView(
-      padding: const EdgeInsets.all(15.0),
       child: Column(
         children: [
-          Text(
+          Row(
-            "Personal Details",
+            mainAxisAlignment: MainAxisAlignment.center,
-            textAlign: TextAlign.center,
+            children: [
-            style: TextStyle(
+              Text(
-              fontWeight: FontWeight.bold,
+                "Personal Details",
-              fontSize: 25.0,
+                textAlign: TextAlign.center,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                style: TextStyle(
-            ),
+                  fontWeight: FontWeight.bold,
+                  fontSize: 22.0,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+              ),
+              IconButton(
+                icon: const Icon(Icons.delete),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                //alignment: Alignment.topRight,
+                onPressed: () {
+                  deletePatientPopUp();
+                },
+              ),
+            ],
           ),
-          const SizedBox(height: 25.0),
+          Divider(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+          const SizedBox(height: 10.0),
           MIHTextField(
             controller: idController,
             hintText: "13 digit ID Number or Passport",
@@ -426,10 +445,12 @@ class _EditPatientState extends State<EditPatient> {
             textAlign: TextAlign.center,
             style: TextStyle(
               fontWeight: FontWeight.bold,
-              fontSize: 25.0,
+              fontSize: 22.0,
               color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
           ),
+          Divider(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
           const SizedBox(height: 10.0),
           MIHDropdownField(
             controller: medAidController,
@@ -533,6 +554,50 @@ class _EditPatientState extends State<EditPatient> {
     }
   }
 
+  MIHAction getActionButton() {
+    return MIHAction(
+      icon: Icons.arrow_back,
+      iconSize: 35,
+      onTap: () {
+        Navigator.of(context).pop();
+      },
+    );
+  }
+
+  MIHHeader getHeader() {
+    return const MIHHeader(
+      headerAlignment: MainAxisAlignment.center,
+      headerItems: [
+        Text(
+          "Edit Patient Details",
+          style: TextStyle(
+            fontWeight: FontWeight.bold,
+            fontSize: 25,
+          ),
+        ),
+      ],
+    );
+  }
+
+  MIHBody getBody() {
+    return MIHBody(
+      borderOn: true,
+      bodyItems: [
+        KeyboardListener(
+          focusNode: _focusNode,
+          autofocus: true,
+          onKeyEvent: (event) async {
+            if (event is KeyDownEvent &&
+                event.logicalKey == LogicalKeyboardKey.enter) {
+              submitForm();
+            }
+          },
+          child: displayForm(),
+        ),
+      ],
+    );
+  }
+
   @override
   void dispose() {
     idController.dispose();
@@ -591,55 +656,59 @@ class _EditPatientState extends State<EditPatient> {
       width = size.width;
       height = size.height;
     });
-
+    return MIHLayoutBuilder(
-    return Scaffold(
+      actionButton: getActionButton(),
-      // appBar: const MIHAppBar(
+      header: getHeader(),
-      //   barTitle: "Edit Patient",
+      body: getBody(),
-      //   propicFile: null,
-      // ),
-      body: SafeArea(
-        child: Stack(
-          children: [
-            KeyboardListener(
-              focusNode: _focusNode,
-              autofocus: true,
-              onKeyEvent: (event) async {
-                if (event is KeyDownEvent &&
-                    event.logicalKey == LogicalKeyboardKey.enter) {
-                  submitForm();
-                }
-              },
-              child: displayForm(),
-            ),
-            Positioned(
-              top: 10,
-              left: 5,
-              width: 50,
-              height: 50,
-              child: IconButton(
-                onPressed: () {
-                  Navigator.of(context).pop();
-                },
-                icon: const Icon(Icons.arrow_back),
-              ),
-            ),
-            Positioned(
-                top: 10,
-                right: 5,
-                width: 50,
-                height: 50,
-                child: IconButton(
-                  icon: const Icon(Icons.delete),
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                  //alignment: Alignment.topRight,
-                  onPressed: () {
-                    deletePatientPopUp();
-                  },
-                ))
-          ],
-        ),
-      ),
     );
+    // return Scaffold(
+    //   // appBar: const MIHAppBar(
+    //   //   barTitle: "Edit Patient",
+    //   //   propicFile: null,
+    //   // ),
+    //   body: SafeArea(
+    //     child: Stack(
+    //       children: [
+    //         KeyboardListener(
+    //           focusNode: _focusNode,
+    //           autofocus: true,
+    //           onKeyEvent: (event) async {
+    //             if (event is KeyDownEvent &&
+    //                 event.logicalKey == LogicalKeyboardKey.enter) {
+    //               submitForm();
+    //             }
+    //           },
+    //           child: displayForm(),
+    //         ),
+    //         Positioned(
+    //           top: 10,
+    //           left: 5,
+    //           width: 50,
+    //           height: 50,
+    //           child: IconButton(
+    //             onPressed: () {
+    //               Navigator.of(context).pop();
+    //             },
+    //             icon: const Icon(Icons.arrow_back),
+    //           ),
+    //         ),
+    //         Positioned(
+    //             top: 10,
+    //             right: 5,
+    //             width: 50,
+    //             height: 50,
+    //             child: IconButton(
+    //               icon: const Icon(Icons.delete),
+    //               color:
+    //                   MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+    //               //alignment: Alignment.topRight,
+    //               onPressed: () {
+    //                 deletePatientPopUp();
+    //               },
+    //             ))
+    //       ],
+    //     ),
+    //   ),
+    // );
   }
 }