Use layout Builder for patient profile

Frontend/patient_manager/lib/MIH_Packages/patient_profile/builder/buildFilesList.dart

@@ -298,13 +298,8 @@ class _BuildFilesListState extends State<BuildFilesList> {
 
   @override
   Widget build(BuildContext context) {
-    final Size size = MediaQuery.sizeOf(context);
-    //double width = size.width;
-    double height = size.height;
     if (widget.files.isNotEmpty) {
-      return SizedBox(
+      return ListView.separated(
-        height: height - 177,
-        child: ListView.separated(
         shrinkWrap: true,
         separatorBuilder: (BuildContext context, int index) {
           return Divider(
@@ -317,15 +312,13 @@ class _BuildFilesListState extends State<BuildFilesList> {
             title: Text(
               widget.files[index].file_name,
               style: TextStyle(
-                  color:
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ),
             subtitle: Text(
               widget.files[index].insert_date,
               style: TextStyle(
-                  color:
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ),
             trailing: Icon(
@@ -349,18 +342,14 @@ class _BuildFilesListState extends State<BuildFilesList> {
             },
           );
         },
-        ),
       );
     } else {
-      return SizedBox(
+      return const Center(
-        height: height - 150,
-        child: const Center(
         child: Text(
           "No Documents Available",
           style: TextStyle(fontSize: 25, color: Colors.grey),
           textAlign: TextAlign.center,
         ),
-        ),
       );
     }
   }

Frontend/patient_manager/lib/MIH_Packages/patient_profile/builder/buildNotesList.dart

@@ -275,13 +275,8 @@ class _BuildNotesListState extends State<BuildNotesList> {
 
   @override
   Widget build(BuildContext context) {
-    final Size size = MediaQuery.sizeOf(context);
-    //double width = size.width;
-    double height = size.height;
     if (widget.notes.isNotEmpty) {
-      return SizedBox(
+      return ListView.separated(
-        height: height - 173,
-        child: ListView.separated(
         shrinkWrap: true,
         separatorBuilder: (BuildContext context, int index) {
           return Divider(
@@ -298,15 +293,13 @@ class _BuildNotesListState extends State<BuildNotesList> {
             title: Text(
               "${widget.notes[index].note_name}\n${widget.notes[index].doc_office} - ${widget.notes[index].doctor}",
               style: TextStyle(
-                  color:
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ),
             subtitle: Text(
               "${widget.notes[index].insert_date}:\n$notePreview",
               style: TextStyle(
-                  color:
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ), //Text(widget.notes[index].note_text),
             trailing: Icon(
@@ -318,18 +311,14 @@ class _BuildNotesListState extends State<BuildNotesList> {
             },
           );
         },
-        ),
       );
     } else {
-      return SizedBox(
+      return const Center(
-        height: height - 173,
-        child: const Center(
         child: Text(
           "No Notes Available",
           style: TextStyle(fontSize: 25, color: Colors.grey),
           textAlign: TextAlign.center,
         ),
-        ),
       );
     }
   }

Frontend/patient_manager/lib/MIH_Packages/patient_profile/patientDetails.dart

@@ -269,27 +269,9 @@ class _PatientDetailsState extends State<PatientDetails> {
 
   @override
   Widget build(BuildContext context) {
-    final Size size = MediaQuery.sizeOf(context);
+    return SelectionArea(
-    //double width = size.width;
-    double height = size.height;
-    return Container(
-      alignment: Alignment.topCenter,
-      height: height - 100,
-      padding: const EdgeInsets.only(left: 10, right: 10, bottom: 10),
-      decoration: BoxDecoration(
-        color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-        borderRadius: BorderRadius.circular(25.0),
-        border: Border.all(
-            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            width: 3.0),
-      ),
-      //constraints: const BoxConstraints.expand(height: 250.0),
-      child: SelectionArea(
       child: SingleChildScrollView(
         child: Column(
-            mainAxisSize: MainAxisSize.max,
-            mainAxisAlignment: MainAxisAlignment.start,
-            crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
@@ -297,8 +279,7 @@ class _PatientDetailsState extends State<PatientDetails> {
               children: setIcons(),
             ),
             Divider(
-                  color:
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
             const SizedBox(height: 10),
             getPatientDetailsField(),
             const SizedBox(height: 10),
@@ -308,19 +289,16 @@ class _PatientDetailsState extends State<PatientDetails> {
               style: TextStyle(
                 fontSize: 25,
                 fontWeight: FontWeight.bold,
-                  color:
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
               ),
             ),
             Divider(
-                  color:
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
             const SizedBox(height: 10),
             getMedAidDetailsFields(),
           ],
         ),
       ),
-      ),
     );
   }
 }

Frontend/patient_manager/lib/MIH_Packages/patient_profile/patientFiles.dart

@@ -643,53 +643,22 @@ class _PatientFilesState extends State<PatientFiles> {
 
   @override
   Widget build(BuildContext context) {
-    final Size size = MediaQuery.sizeOf(context);
-    //double width = size.width;
-    double height = size.height;
     return FutureBuilder(
       future: futueFiles,
       builder: (context, snapshot) {
         if (snapshot.connectionState == ConnectionState.waiting) {
-          return Container(
+          return const Center(
-            height: height - 100,
-            decoration: BoxDecoration(
-              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              borderRadius: BorderRadius.circular(25.0),
-              border: Border.all(
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                  width: 3.0),
-            ),
-            child: const Center(
             child: Mihloadingcircle(),
-            ),
           );
         } else if (snapshot.hasData) {
           final filesList = snapshot.data!;
-          return Container(
+          return Column(children: [
-            //height: 300.0,
-            decoration: BoxDecoration(
-              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              borderRadius: BorderRadius.circular(25.0),
-              border: Border.all(
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                  width: 3.0),
-            ),
-            child: Padding(
-              padding: const EdgeInsets.only(top: 5.0),
-              child: Column(children: [
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: setIcons(),
             ),
-                Padding(
+            Divider(
-                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-                  child: Divider(
-                      color: MzanziInnovationHub.of(context)!
-                          .theme
-                          .secondaryColor()),
-                ),
             const SizedBox(height: 10),
             BuildFilesList(
               files: filesList,
@@ -698,23 +667,10 @@ class _PatientFilesState extends State<PatientFiles> {
               business: widget.business,
               businessUser: widget.businessUser,
             ),
-              ]),
+          ]);
-            ),
-          );
         } else {
-          return Container(
+          return const Center(
-            height: height - 175,
-            decoration: BoxDecoration(
-              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              borderRadius: BorderRadius.circular(25.0),
-              border: Border.all(
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                  width: 3.0),
-            ),
-            child: const Center(
             child: Text("Error Loading Notes"),
-            ),
           );
         }
       },

Frontend/patient_manager/lib/MIH_Packages/patient_profile/patientNotes.dart

@@ -331,53 +331,22 @@ class _PatientNotesState extends State<PatientNotes> {
 
   @override
   Widget build(BuildContext context) {
-    final Size size = MediaQuery.sizeOf(context);
-    //double width = size.width;
-    double height = size.height;
     return FutureBuilder(
       future: futueNotes,
       builder: (context, snapshot) {
         if (snapshot.connectionState == ConnectionState.waiting) {
-          return Container(
+          return const Center(
-            height: height - 100,
-            decoration: BoxDecoration(
-              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              borderRadius: BorderRadius.circular(25.0),
-              border: Border.all(
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                  width: 3.0),
-            ),
-            child: const Center(
             child: Mihloadingcircle(),
-            ),
           );
         } else if (snapshot.hasData) {
           final notesList = snapshot.data!;
-          return Container(
+          return Column(children: [
-            //height: 300.0,
-            decoration: BoxDecoration(
-              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              borderRadius: BorderRadius.circular(25.0),
-              border: Border.all(
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                  width: 3.0),
-            ),
-            child: Padding(
-              padding: const EdgeInsets.only(top: 5.0),
-              child: Column(children: [
             Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: setIcons(),
             ),
-                Padding(
+            Divider(
-                  padding: const EdgeInsets.symmetric(horizontal: 20.0),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-                  child: Divider(
-                      color: MzanziInnovationHub.of(context)!
-                          .theme
-                          .secondaryColor()),
-                ),
             const SizedBox(height: 10),
             BuildNotesList(
               notes: notesList,
@@ -386,23 +355,10 @@ class _PatientNotesState extends State<PatientNotes> {
               business: widget.business,
               businessUser: widget.businessUser,
             ),
-              ]),
+          ]);
-            ),
-          );
         } else {
-          return Container(
+          return const Center(
-            height: height - 100,
-            decoration: BoxDecoration(
-              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              borderRadius: BorderRadius.circular(25.0),
-              border: Border.all(
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                  width: 3.0),
-            ),
-            child: const Center(
             child: Text("Error Loading Notes"),
-            ),
           );
         }
       },

Frontend/patient_manager/lib/MIH_Packages/patient_profile/patientView.dart

@@ -4,6 +4,10 @@ import 'package:flutter/material.dart';
 import 'package:patient_manager/MIH_Packages/patient_profile/patientDetails.dart';
 import 'package:patient_manager/MIH_Packages/patient_profile/patientFiles.dart';
 import 'package:patient_manager/MIH_Packages/patient_profile/patientNotes.dart';
+import 'package:patient_manager/components/MIH_Layout/MIH_Action.dart';
+import 'package:patient_manager/components/MIH_Layout/MIH_Body.dart';
+import 'package:patient_manager/components/MIH_Layout/MIH_Header.dart';
+import 'package:patient_manager/components/MIH_Layout/MIH_LayoutBuilder.dart';
 import 'package:patient_manager/env/env.dart';
 import 'package:patient_manager/main.dart';
 import 'package:patient_manager/objects/arguments.dart';
@@ -100,37 +104,20 @@ class _PatientViewState extends State<PatientView> {
     }
   }
 
-  @override
+  MIHAction getActionButton() {
-  void dispose() {
+    return MIHAction(
-    // TODO: implement dispose
+      icon: Icons.arrow_back,
-    super.dispose();
+      iconSize: 35,
+      onTap: () {
+        Navigator.of(context).pushNamedAndRemoveUntil('/', (route) => false);
+      },
+    );
   }
 
-  @override
+  MIHHeader getHeader() {
-  Widget build(BuildContext context) {
+    return MIHHeader(
-    var size = MediaQuery.of(context).size;
+      headerAlignment: MainAxisAlignment.end,
-    setState(() {
+      headerItems: [
-      width = size.width;
-      height = size.height;
-    });
-    checkScreenSize();
-    return Scaffold(
-      body: SafeArea(
-        child: SingleChildScrollView(
-          child: Stack(
-            children: [
-              Container(
-                width: width,
-                height: height,
-                padding: const EdgeInsets.symmetric(
-                    vertical: 10.0, horizontal: 15.0),
-                child: Column(
-                  mainAxisSize: MainAxisSize.max,
-                  children: [
-                    Row(
-                      crossAxisAlignment: CrossAxisAlignment.end,
-                      mainAxisAlignment: MainAxisAlignment.end,
-                      children: [
         IconButton(
           onPressed: () {
             setState(() {
@@ -165,30 +152,110 @@ class _PatientViewState extends State<PatientView> {
           ),
         ),
       ],
-                    ),
-                    const SizedBox(
-                      height: 10.0,
-                    ),
-                    showSelection(_selectedIndex),
-                  ],
-                ),
-              ),
-              Positioned(
-                top: 10,
-                left: 5,
-                width: 50,
-                height: 50,
-                child: IconButton(
-                  onPressed: () {
-                    Navigator.of(context).pop();
-                  },
-                  icon: const Icon(Icons.arrow_back),
-                ),
-              )
-            ],
-          ),
-        ),
-      ),
     );
   }
+
+  MIHBody getBody() {
+    return MIHBody(
+      borderOn: true,
+      bodyItems: [showSelection(_selectedIndex)],
+    );
+  }
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var size = MediaQuery.of(context).size;
+    setState(() {
+      width = size.width;
+      height = size.height;
+    });
+    checkScreenSize();
+    return MIHLayoutBuilder(
+      actionButton: getActionButton(),
+      header: getHeader(),
+      body: getBody(),
+    );
+    // return Scaffold(
+    //   body: SafeArea(
+    //     child: SingleChildScrollView(
+    //       child: Stack(
+    //         children: [
+    //           Container(
+    //             width: width,
+    //             height: height,
+    //             padding: const EdgeInsets.symmetric(
+    //                 vertical: 10.0, horizontal: 15.0),
+    //             child: Column(
+    //               mainAxisSize: MainAxisSize.max,
+    //               children: [
+    //                 Row(
+    //                   crossAxisAlignment: CrossAxisAlignment.end,
+    //                   mainAxisAlignment: MainAxisAlignment.end,
+    //                   children: [
+    //                     IconButton(
+    //                       onPressed: () {
+    //                         setState(() {
+    //                           _selectedIndex = 0;
+    //                         });
+    //                       },
+    //                       icon: const Icon(
+    //                         Icons.perm_identity,
+    //                         size: 35,
+    //                       ),
+    //                     ),
+    //                     IconButton(
+    //                       onPressed: () {
+    //                         setState(() {
+    //                           _selectedIndex = 1;
+    //                         });
+    //                       },
+    //                       icon: const Icon(
+    //                         Icons.article_outlined,
+    //                         size: 35,
+    //                       ),
+    //                     ),
+    //                     IconButton(
+    //                       onPressed: () {
+    //                         setState(() {
+    //                           _selectedIndex = 2;
+    //                         });
+    //                       },
+    //                       icon: const Icon(
+    //                         Icons.file_present,
+    //                         size: 35,
+    //                       ),
+    //                     ),
+    //                   ],
+    //                 ),
+    //                 const SizedBox(
+    //                   height: 10.0,
+    //                 ),
+    //                 showSelection(_selectedIndex),
+    //               ],
+    //             ),
+    //           ),
+    //           Positioned(
+    //             top: 10,
+    //             left: 5,
+    //             width: 50,
+    //             height: 50,
+    //             child: IconButton(
+    //               onPressed: () {
+    //                 Navigator.of(context).pop();
+    //               },
+    //               icon: const Icon(Icons.arrow_back),
+    //             ),
+    //           )
+    //         ],
+    //       ),
+    //     ),
+    //   ),
+    // );
+  }
 }