fix overflow issue

Frontend/lib/mih_packages/mzansi_wallet/app_tools/mih_cards.dart

@@ -226,25 +226,15 @@ class _MihCardsState extends State<MihCards> {
   Widget build(BuildContext context) {
     return MihAppToolBody(
       borderOn: true,
-      bodyItem: bodyItem(),
+      bodyItem: getBody(),
     );
   }
 
-  Widget bodyItem() {
+  Widget getBody() {
-    return FutureBuilder(
+    return Stack(
-      future: cardList,
+      children: [
-      builder: (context, snapshot) {
+        SingleChildScrollView(
-        //print(snapshot.connectionState);
+          child: Column(
-        if (snapshot.connectionState == ConnectionState.waiting) {
-          return const Center(
-            child: Mihloadingcircle(),
-          );
-        } else if (snapshot.connectionState == ConnectionState.done &&
-            snapshot.hasData) {
-          listOfCards = snapshot.data!;
-          searchShop();
-          //print(listOfCards);
-          return Column(
             children: [
               Row(
                 mainAxisAlignment: MainAxisAlignment.center,
@@ -260,20 +250,8 @@ class _MihCardsState extends State<MihCards> {
                           .secondaryColor(),
                     ),
                   ),
-                  IconButton(
-                    icon: const Icon(Icons.add_card),
-                    alignment: Alignment.topRight,
-                    color:
-                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                    onPressed: () {
-                      addCardWindow(context);
-                    },
-                  )
                 ],
               ),
-              // Divider(
-              //   color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              // ),
               const SizedBox(height: 10),
               Row(
                 mainAxisAlignment: MainAxisAlignment.center,
@@ -304,17 +282,26 @@ class _MihCardsState extends State<MihCards> {
                 ],
               ),
               const SizedBox(height: 10),
-              ValueListenableBuilder(
+              FutureBuilder(
+                future: cardList,
+                builder: (context, snapshot) {
+                  if (snapshot.connectionState == ConnectionState.waiting) {
+                    return const Center(
+                      child: Mihloadingcircle(),
+                    );
+                  } else if (snapshot.connectionState == ConnectionState.done &&
+                      snapshot.hasData) {
+                    listOfCards = snapshot.data!;
+                    searchShop();
+                    return ValueListenableBuilder(
                       valueListenable: searchShopName,
-                builder: (BuildContext context, List<MIHLoyaltyCard> value,
+                      builder: (BuildContext context,
-                    Widget? child) {
+                          List<MIHLoyaltyCard> value, Widget? child) {
                         return BuildLoyaltyCardList(
                           cardList: searchShopName.value,
                           signedInUser: widget.signedInUser,
                         );
                       },
-              ),
-            ],
                     );
                   } else {
                     return const Center(
@@ -322,6 +309,30 @@ class _MihCardsState extends State<MihCards> {
                     );
                   }
                 },
+              ),
+            ],
+          ),
+        ),
+        Positioned(
+            right: 0,
+            bottom: 0,
+            child: Container(
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(50),
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              ),
+              child: IconButton(
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                onPressed: () {
+                  addCardWindow(context);
+                },
+                icon: const Icon(
+                  Icons.add_card,
+                  size: 50,
+                ),
+              ),
+            ))
+      ],
     );
   }
 }

Frontend/lib/mih_packages/mzansi_wallet/builder/build_loyalty_card_list.dart

@@ -143,7 +143,9 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
     // final double width = size.width;
     //final double height = size.height;
     if (widget.cardList.isNotEmpty) {
-      return GridView.builder(
+      return SizedBox(
+        height: size.height,
+        child: GridView.builder(
           physics: const NeverScrollableScrollPhysics(),
           shrinkWrap: true,
           padding: EdgeInsets.only(
@@ -158,7 +160,7 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
           gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
             mainAxisSpacing: 0,
             crossAxisSpacing: 10,
-          maxCrossAxisExtent: 175,
+            maxCrossAxisExtent: 200,
           ),
           itemBuilder: (context, index) {
             return GestureDetector(
@@ -169,6 +171,7 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
               },
             );
           },
+        ),
       );
       // return ListView.separated(
       //   shrinkWrap: true,
@@ -191,15 +194,19 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
       //   },
       // );
     } else {
-      return const Padding(
+      return Padding(
-        padding: EdgeInsets.only(top: 25.0),
+        padding: const EdgeInsets.only(top: 25.0),
-        child: Center(
+        child: SizedBox(
+          height: size.height,
+          child: const Align(
+            alignment: Alignment.topCenter,
             child: Text(
               "No Cards Available",
               style: TextStyle(fontSize: 25, color: Colors.grey),
               textAlign: TextAlign.center,
             ),
           ),
+        ),
       );
     }
   }

Frontend/lib/mih_packages/mzansi_wallet/components/mih_card_display.dart

@@ -17,100 +17,43 @@ class _MihCardDisplayState extends State<MihCardDisplay> {
   Widget displayLoyaltyCard() {
     switch (widget.shopName.toLowerCase()) {
       case "best before":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/best_before.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/best_before.png'),
-        );
       case "checkers":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/checkers.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/checkers.png'),
-        );
       case "clicks":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/Clicks_Club.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/Clicks_Club.png'),
-        );
       case "cotton:on":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/cotton_on_perks.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/cotton_on_perks.png'),
-        );
       case "dis-chem":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/dischem_benefit.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/dischem_benefit.png'),
-        );
       case "pick n pay":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/pnp_smart.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/pnp_smart.png'),
-        );
       case "shoprite":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/shoprite.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/shoprite.png'),
-        );
       case "spar":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/spar_rewards.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/spar_rewards.png'),
-        );
       case "woolworths":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/wrewards.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/wrewards.png'),
-        );
       case "makro":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/makro.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/makro.png'),
-        );
       case "fresh stop":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/fresh_stop.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/fresh_stop.png'),
-        );
       case "panarottis":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/panarottis.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/panarottis.png'),
-        );
       case "shell":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/Shell.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/Shell.png'),
-        );
       case "edgars":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/edgars.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/edgars.png'),
-        );
       case "jet":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/jet.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/jet.png'),
-        );
       case "spur":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/spur.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/spur.png'),
-        );
       case "infinity":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/infinity.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/infinity.png'),
-        );
       case "eskom":
-        return SizedBox(
+        return Image.asset('images/loyalty_cards/eskom.png');
-          height: widget.height,
-          child: Image.asset('images/loyalty_cards/eskom.png'),
-        );
       default:
-        return SizedBox(
+        return const Placeholder();
-          height: widget.height,
-          child: const Placeholder(),
-        );
     }
   }