diff --git a/Frontend/lib/mih_packages/mzansi_wallet/builder/build_loyalty_card_list.dart b/Frontend/lib/mih_packages/mzansi_wallet/builder/build_loyalty_card_list.dart index 630b37fe..57561a02 100644 --- a/Frontend/lib/mih_packages/mzansi_wallet/builder/build_loyalty_card_list.dart +++ b/Frontend/lib/mih_packages/mzansi_wallet/builder/build_loyalty_card_list.dart @@ -101,18 +101,26 @@ class _BuildLoyaltyCardListState extends State { ); } + double getHorizontalPaddingSize(Size screenSize) { + if (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") { + return screenSize.width / 10; + } else { + return 20; + } + } + @override Widget build(BuildContext context) { final Size size = MediaQuery.sizeOf(context); - final double width = size.width; + // final double width = size.width; //final double height = size.height; if (widget.cardList.isNotEmpty) { return GridView.builder( - //physics: const NeverScrollableScrollPhysics(), + physics: const NeverScrollableScrollPhysics(), shrinkWrap: true, padding: EdgeInsets.only( - left: width / 10, - right: width / 10, + left: getHorizontalPaddingSize(size), + right: getHorizontalPaddingSize(size), //bottom: height / 5, //top: 20, ), @@ -120,7 +128,9 @@ class _BuildLoyaltyCardListState extends State { // shrinkWrap: true, itemCount: widget.cardList.length, gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( - mainAxisSpacing: 15, maxCrossAxisExtent: 200), + //mainAxisSpacing: 15, + maxCrossAxisExtent: 175, + ), itemBuilder: (context, index) { return GestureDetector( child: MihCardDisplay( diff --git a/Frontend/lib/mih_packages/mzansi_wallet/components/mih_card_display.dart b/Frontend/lib/mih_packages/mzansi_wallet/components/mih_card_display.dart index ea333f57..f2caa379 100644 --- a/Frontend/lib/mih_packages/mzansi_wallet/components/mih_card_display.dart +++ b/Frontend/lib/mih_packages/mzansi_wallet/components/mih_card_display.dart @@ -1,3 +1,4 @@ +import 'package:Mzansi_Innovation_Hub/main.dart'; import 'package:flutter/material.dart'; class MihCardDisplay extends StatefulWidget { @@ -20,9 +21,24 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/bb_club.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: Image.asset('images/loyalty_cards/bb_club.png'), + ), + const SizedBox(height: 10), + Text( + "Best Before", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); @@ -30,9 +46,24 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/checkers_xtra.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: Image.asset('images/loyalty_cards/checkers_xtra.png'), + ), + const SizedBox(height: 10), + Text( + "Checkers", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); @@ -40,9 +71,24 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/Clicks_Club.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: Image.asset('images/loyalty_cards/Clicks_Club.png'), + ), + const SizedBox(height: 10), + Text( + "Clicks", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); @@ -50,9 +96,25 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/cotton_on_perks.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: + Image.asset('images/loyalty_cards/cotton_on_perks.png'), + ), + const SizedBox(height: 10), + Text( + "Cotton:On", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); @@ -60,9 +122,25 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/dischem_benefit.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: + Image.asset('images/loyalty_cards/dischem_benefit.png'), + ), + const SizedBox(height: 10), + Text( + "Dis-Chem", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); @@ -70,9 +148,24 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/pnp_smart.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: Image.asset('images/loyalty_cards/pnp_smart.png'), + ), + const SizedBox(height: 10), + Text( + "Pick 'n Pay", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); @@ -80,9 +173,24 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/shoprite_xtra.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: Image.asset('images/loyalty_cards/shoprite_xtra.png'), + ), + const SizedBox(height: 10), + Text( + "Shoprite", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); @@ -90,9 +198,24 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/spar_rewards.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: Image.asset('images/loyalty_cards/spar_rewards.png'), + ), + const SizedBox(height: 10), + Text( + "Spar", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); @@ -100,16 +223,31 @@ class _MihCardDisplayState extends State { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ - SizedBox( - height: widget.height, - child: Image.asset('images/loyalty_cards/wrewards.png'), + Column( + children: [ + SizedBox( + height: widget.height, + child: Image.asset('images/loyalty_cards/wrewards.png'), + ), + const SizedBox(height: 10), + Text( + "WoolWorths", + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: + MzanziInnovationHub.of(context)!.theme.secondaryColor(), + ), + ), + ], ), ], ); default: return const SizedBox( height: 150, - //child: Placeholder(), + child: Placeholder(), ); } }