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,24 +282,57 @@ class _MihCardsState extends State<MihCards> {
                 ],
               ),
               const SizedBox(height: 10),
-              ValueListenableBuilder(
+              FutureBuilder(
-                valueListenable: searchShopName,
+                future: cardList,
-                builder: (BuildContext context, List<MIHLoyaltyCard> value,
+                builder: (context, snapshot) {
-                    Widget? child) {
+                  if (snapshot.connectionState == ConnectionState.waiting) {
-                  return BuildLoyaltyCardList(
+                    return const Center(
-                    cardList: searchShopName.value,
+                      child: Mihloadingcircle(),
-                    signedInUser: widget.signedInUser,
+                    );
-                  );
+                  } else if (snapshot.connectionState == ConnectionState.done &&
+                      snapshot.hasData) {
+                    listOfCards = snapshot.data!;
+                    searchShop();
+                    return ValueListenableBuilder(
+                      valueListenable: searchShopName,
+                      builder: (BuildContext context,
+                          List<MIHLoyaltyCard> value, Widget? child) {
+                        return BuildLoyaltyCardList(
+                          cardList: searchShopName.value,
+                          signedInUser: widget.signedInUser,
+                        );
+                      },
+                    );
+                  } else {
+                    return const Center(
+                      child: Text("Error Loading Loyalty Cards"),
+                    );
+                  }
                 },
               ),
             ],
-          );
+          ),
-        } else {
+        ),
-          return const Center(
+        Positioned(
-            child: Text("Error Loading Loyalty Cards"),
+            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,32 +143,35 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
     // final double width = size.width;
     //final double height = size.height;
     if (widget.cardList.isNotEmpty) {
-      return GridView.builder(
+      return SizedBox(
-        physics: const NeverScrollableScrollPhysics(),
+        height: size.height,
-        shrinkWrap: true,
+        child: GridView.builder(
-        padding: EdgeInsets.only(
+          physics: const NeverScrollableScrollPhysics(),
-          left: getHorizontalPaddingSize(size),
+          shrinkWrap: true,
-          right: getHorizontalPaddingSize(size),
+          padding: EdgeInsets.only(
-          //bottom: height / 5,
+            left: getHorizontalPaddingSize(size),
-          //top: 20,
+            right: getHorizontalPaddingSize(size),
+            //bottom: height / 5,
+            //top: 20,
+          ),
+          // physics: ,
+          // shrinkWrap: true,
+          itemCount: widget.cardList.length,
+          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+            mainAxisSpacing: 0,
+            crossAxisSpacing: 10,
+            maxCrossAxisExtent: 200,
+          ),
+          itemBuilder: (context, index) {
+            return GestureDetector(
+              child: MihCardDisplay(
+                  shopName: widget.cardList[index].shop_name, height: 100),
+              onTap: () {
+                viewCardWindow(index);
+              },
+            );
+          },
         ),
-        // physics: ,
-        // shrinkWrap: true,
-        itemCount: widget.cardList.length,
-        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-          mainAxisSpacing: 0,
-          crossAxisSpacing: 10,
-          maxCrossAxisExtent: 175,
-        ),
-        itemBuilder: (context, index) {
-          return GestureDetector(
-            child: MihCardDisplay(
-                shopName: widget.cardList[index].shop_name, height: 100),
-            onTap: () {
-              viewCardWindow(index);
-            },
-          );
-        },
       );
       // return ListView.separated(
       //   shrinkWrap: true,
@@ -191,13 +194,17 @@ 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(
-          child: Text(
+          height: size.height,
-            "No Cards Available",
+          child: const Align(
-            style: TextStyle(fontSize: 25, color: Colors.grey),
+            alignment: Alignment.topCenter,
-            textAlign: TextAlign.center,
+            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(),
-        );
     }
   }