list to gridview

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

@@ -103,36 +103,54 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
 
   @override
   Widget build(BuildContext context) {
+    final Size size = MediaQuery.sizeOf(context);
+    final double width = size.width;
+    //final double height = size.height;
     if (widget.cardList.isNotEmpty) {
-      return ListView.separated(
+      return GridView.builder(
+        //physics: const NeverScrollableScrollPhysics(),
         shrinkWrap: true,
-        physics: const NeverScrollableScrollPhysics(),
+        padding: EdgeInsets.only(
-        separatorBuilder: (BuildContext context, int index) {
+          left: width / 10,
-          return Divider(
+          right: width / 10,
-            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+          //bottom: height / 5,
-          );
+          //top: 20,
-        },
+        ),
+        // physics: ,
+        // shrinkWrap: true,
         itemCount: widget.cardList.length,
+        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
+            mainAxisSpacing: 15, maxCrossAxisExtent: 200),
         itemBuilder: (context, index) {
-          return ListTile(
+          return GestureDetector(
-            title: MihCardDisplay(
+            child: MihCardDisplay(
-                shopName: widget.cardList[index].shop_name, height: 200),
+                shopName: widget.cardList[index].shop_name, height: 100),
-            // subtitle: Text(
-            //   "Card Number: ${widget.cardList[index].card_number}",
-            //   style: TextStyle(
-            //     color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            //   ),
-            // ),
-            // trailing: Icon(
-            //   Icons.arrow_forward,
-            //   color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            // ),
             onTap: () {
               viewCardWindow(index);
             },
           );
         },
       );
+      // return ListView.separated(
+      //   shrinkWrap: true,
+      //   physics: const NeverScrollableScrollPhysics(),
+      //   separatorBuilder: (BuildContext context, int index) {
+      //     return Divider(
+      //       color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+      //     );
+      //   },
+      //   itemCount: widget.cardList.length,
+      //   itemBuilder: (context, index) {
+      //     return ListTile(
+      //       title: MihCardDisplay(
+      //           shopName: widget.cardList[index].shop_name, height: 200),
+
+      //       onTap: () {
+      //         viewCardWindow(index);
+      //       },
+      //     );
+      //   },
+      // );
     } else {
       return const Padding(
         padding: EdgeInsets.only(top: 25.0),