fix: shop page

lib/core/widgets/background/my_background.dart

@@ -17,7 +17,7 @@ class MyBackground extends StatelessWidget {
         ),
       ),
       child: listChild ?? SingleChildScrollView(
-        padding: const EdgeInsets.all(30),
+        padding: const EdgeInsets.all(20),
         child: child,
       ),
     );

lib/core/widgets/button/styles/active_style.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
 
@@ -21,8 +21,8 @@ class ActiveStyle extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MyContainer(
-      height: 32,
-      width: 116,
+      height: 32.h,
+      width: 116.w,
       onTap: onTap,
       borderRadius: const BorderRadius.all(Radius.circular(5)),
       borderGradient: LinearGradient(
@@ -45,10 +45,10 @@ class ActiveStyle extends StatelessWidget {
             ],
             shadowColor: const Color(0xFF0A1F0F),
             offset: const Offset(0, 1.69),
-            fontSize: fontSize ?? 12,
+            fontSize: fontSize ?? 12.sp,
           ),
           if (icon != null) ...{
-            MySpaces.s6.gapWidth,
+            6.w.gapWidth,
             icon ?? const SizedBox.shrink(),
           },
         ],

lib/core/widgets/button/styles/default_style.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
 
@@ -21,8 +21,8 @@ class DefaultStyle extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MyContainer(
-      height: 32,
-      width: 116,
+      height: 32.h,
+      width: 116.w,
       onTap: onTap,
       borderColor: const Color(0XFF6D2ADA),
       borderRadius: const BorderRadius.all(Radius.circular(5)),
@@ -39,10 +39,10 @@ class DefaultStyle extends StatelessWidget {
             color: const Color(0XFF9C8CC2),
             shadowColor: const Color(0xFF1B0D31),
             offset: const Offset(0, 1.69),
-            fontSize: fontSize ?? 12,
+            fontSize: fontSize ?? 12.sp,
           ),
           if (icon != null) ...{
-            MySpaces.s6.gapWidth,
+            6.w.gapWidth,
             icon ?? const SizedBox.shrink(),
           },
         ],

lib/features/shop/presentation/ui/shop_page.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/background/my_background.dart';
 import 'package:shia_game_flutter/features/shop/presentation/controller/shop_controller.dart';
 import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_package_entity.dart';
@@ -15,16 +15,11 @@ class ShopPage extends GetView<ShopController> {
       listChild: Obx(
         () => ListView.separated(
           itemCount: controller.shopList.length,
-          padding: const EdgeInsets.only(
-            left: MySpaces.s30,
-            right: MySpaces.s30,
-            bottom: MySpaces.s30,
-            top: 60,
-          ),
+          padding: const EdgeInsets.all(20),
           itemBuilder: (context, index) => ShopPackageWidget(
             shopPackage: controller.shopList[index],
           ),
-          separatorBuilder: (context, index) => MySpaces.s20.gapHeight,
+          separatorBuilder: (context, index) => 20.h.gapHeight,
         ),
       ),
     );

lib/features/shop/presentation/ui/widgets/shop_item/shop_item_widget.dart

@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
 import 'package:shia_game_flutter/features/shop/presentation/ui/widgets/shop_item/styles/book_style.dart';
@@ -19,10 +19,12 @@ class ShopItemWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MyContainer(
+      height: shop.type == ShopType.book ? 260.h : 213.h,
+      width: 150.w,
       color: const Color(0XFF1B0B38),
       borderColor: const Color(0XFF462A79),
-      borderRadius: const BorderRadius.all(Radius.circular(MySpaces.s14)),
-      padding: const EdgeInsets.all(MySpaces.s12),
+      borderRadius: const BorderRadius.all(Radius.circular(14)),
+      padding: const EdgeInsets.all(12),
       child: MyContainer(
         color: const Color(0XFF070D1C),
         borderRadius: const BorderRadius.all(Radius.circular(7)),

lib/features/shop/presentation/ui/widgets/shop_item/styles/book_style.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
 import 'package:shia_game_flutter/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/features/shop/domain/entity/shop_entity.dart';
@@ -15,46 +15,43 @@ class BookStyle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      height: 230,
-      child: Column(
-        children: [
-          Expanded(
-            child: Container(
-              decoration: BoxDecoration(
-                border: Border.all(width: 2, color: context.primaryColor),
-                borderRadius: const BorderRadius.all(Radius.circular(8)),
-              ),
-              child: ClipRRect(
-                borderRadius: const BorderRadius.all(Radius.circular(6)),
-                child: MyImage(
-                  asset: shop.image ?? '',
-                  size: 110,
-                  fit: BoxFit.cover,
-                ),
-              ),
+    return Column(
+      children: [
+        Expanded(
+          child: Container(
+            decoration: BoxDecoration(
+              border: Border.all(width: 2, color: context.primaryColor),
+              borderRadius: const BorderRadius.all(Radius.circular(8)),
             ),
-          ),
-          MySpaces.s8.gapHeight,
-          SizedBox(
-            width: 110,
-            child: Text(
-              shop.title ?? '',
-              maxLines: 2,
-              overflow: TextOverflow.ellipsis,
-              style: Lexend.semiBold.copyWith(
-                fontSize: 10,
+            child: ClipRRect(
+              borderRadius: const BorderRadius.all(Radius.circular(6)),
+              child: MyImage(
+                asset: shop.image ?? '',
+                size: 110,
+                fit: BoxFit.cover,
               ),
             ),
           ),
-          MySpaces.s18.gapHeight,
-          MyGradientButton(
-            onTap: () {},
-            title: context.translate.select,
-            fontSize: 20,
+        ),
+        8.h.gapHeight,
+        SizedBox(
+          width: 110,
+          child: Text(
+            shop.title ?? '',
+            maxLines: 2,
+            overflow: TextOverflow.ellipsis,
+            style: Lexend.semiBold.copyWith(
+              fontSize: 10.sp,
+            ),
           ),
-        ],
-      ),
+        ),
+        18.h.gapHeight,
+        MyGradientButton(
+          onTap: () {},
+          title: context.translate.select,
+          fontSize: 20.sp,
+        ),
+      ],
     );
   }
 }

lib/features/shop/presentation/ui/widgets/shop_item/styles/boost_style.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
@@ -13,32 +14,29 @@ class BoostStyle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      height: 190,
-      child: Column(
-        children: [
-          GradientText(
-            text: '${shop.number} ${shop.title}',
-            fontSize: 18,
-            color: const Color(0XFF9C8CC2),
-            shadowColor: const Color(0XFF1B0D31),
-            offset: const Offset(0, 1.69),
+    return Column(
+      children: [
+        GradientText(
+          text: '${shop.number} ${shop.title}',
+          fontSize: 18.sp,
+          color: const Color(0XFF9C8CC2),
+          shadowColor: const Color(0XFF1B0D31),
+          offset: const Offset(0, 1.69),
+        ),
+        Expanded(
+          child: MyImage(
+            asset: shop.image ?? '',
+            size: 110,
+            fit: BoxFit.cover,
           ),
-          Expanded(
-            child: MyImage(
-              asset: shop.image ?? '',
-              size: 110,
-              fit: BoxFit.cover,
-            ),
-          ),
-          MyGradientButton(
-            onTap: () {},
-            title: '${shop.price?.priceFormat}',
-            fontSize: 20,
-            icon: const MyImage(asset: MyAssets.gem),
-          ),
-        ],
-      ),
+        ),
+        MyGradientButton(
+          onTap: () {},
+          title: '${shop.price?.priceFormat}',
+          fontSize: 20.sp,
+          icon: const MyImage(asset: MyAssets.gem),
+        ),
+      ],
     );
   }
 }

lib/features/shop/presentation/ui/widgets/shop_item/styles/character_style.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_colors.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/my_localization.dart';
 import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/button/enum/my_button_type.dart';
 import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
@@ -16,99 +16,96 @@ class CharacterStyle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      height: 190,
-      child: Column(
-        spacing: MySpaces.s8,
-        children: [
-          Expanded(
-            child: AnimatedContainer(
-              width: 118,
-              duration: const Duration(milliseconds: 200),
-              decoration: BoxDecoration(
-                border:Border.all(width: 2, color: const Color(0xFFB37EFA)),
-                borderRadius: const BorderRadius.all(Radius.circular(8)),
-                boxShadow: shop.isActive == true
-                    ? [
-                        const BoxShadow(
-                          color: Color(0xFFB37EFA),
-                          spreadRadius: 0,
-                          blurRadius: 22,
-                          offset: Offset(0, 0),
-                        ),
-                      ]
-                    : null,
-              ),
-              child: ClipRRect(
-                borderRadius: const BorderRadius.all(Radius.circular(6)),
-                child: Stack(
-                  alignment: AlignmentDirectional.bottomEnd,
-                  children: [
-                    MyImage(asset: shop.image ?? '', fit: BoxFit.cover, size: 150,),
-                    if (shop.isActive == true)
-                      PositionedDirectional(
-                        end: MySpaces.s8,
-                        bottom: MySpaces.s8,
-                        child: Stack(
-                          clipBehavior: Clip.none,
-                          children: [
-                            Container(
-                              height: 42,
-                              width: 42,
-                              decoration: BoxDecoration(
-                                borderRadius: const BorderRadius.all(
-                                  Radius.circular(5),
-                                ),
-                                color: MyColors.black.withValues(alpha: 0.8),
-                              ),
-                            ),
-                            const PositionedDirectional(
-                              top: -0,
-                              end: -5,
-                              child: MyImage(asset: MyAssets.done),
-                            ),
-                          ],
-                        ),
+    return Column(
+      spacing: 8,
+      children: [
+        Expanded(
+          child: AnimatedContainer(
+            width: 120.w,
+            duration: const Duration(milliseconds: 200),
+            decoration: BoxDecoration(
+              border:Border.all(width: 2, color: const Color(0xFFB37EFA)),
+              borderRadius: const BorderRadius.all(Radius.circular(8)),
+              boxShadow: shop.isActive == true
+                  ? [
+                      const BoxShadow(
+                        color: Color(0xFFB37EFA),
+                        spreadRadius: 0,
+                        blurRadius: 22,
+                        offset: Offset(0, 0),
                       ),
-                    if (shop.isBuy == false)
-                      PositionedDirectional(
-                        end: MySpaces.s8,
-                        bottom: MySpaces.s8,
-                        child: Container(
-                          height: 42,
-                          width: 42,
-                          padding: const EdgeInsets.all(MySpaces.s10),
-                          decoration: BoxDecoration(
-                            borderRadius: const BorderRadius.all(
-                              Radius.circular(5),
+                    ]
+                  : null,
+            ),
+            child: ClipRRect(
+              borderRadius: const BorderRadius.all(Radius.circular(6)),
+              child: Stack(
+                alignment: AlignmentDirectional.bottomEnd,
+                children: [
+                  MyImage(asset: shop.image ?? '', fit: BoxFit.cover, size: 150,),
+                  if (shop.isActive == true)
+                    PositionedDirectional(
+                      end: 8,
+                      bottom: 8,
+                      child: Stack(
+                        clipBehavior: Clip.none,
+                        children: [
+                          Container(
+                            height: 42,
+                            width: 42,
+                            decoration: BoxDecoration(
+                              borderRadius: const BorderRadius.all(
+                                Radius.circular(5),
+                              ),
+                              color: MyColors.black.withValues(alpha: 0.8),
                             ),
-                            color: MyColors.black.withValues(alpha: 0.8),
                           ),
-                          child: const MyImage(
-                            asset: MyAssets.lock,
+                          const PositionedDirectional(
+                            top: -0,
+                            end: -5,
+                            child: MyImage(asset: MyAssets.done),
+                          ),
+                        ],
+                      ),
+                    ),
+                  if (shop.isBuy == false)
+                    PositionedDirectional(
+                      end: 8,
+                      bottom: 8,
+                      child: Container(
+                        height: 42,
+                        width: 42,
+                        padding: const EdgeInsets.all(10),
+                        decoration: BoxDecoration(
+                          borderRadius: const BorderRadius.all(
+                            Radius.circular(5),
                           ),
+                          color: MyColors.black.withValues(alpha: 0.8),
+                        ),
+                        child: const MyImage(
+                          asset: MyAssets.lock,
                         ),
                       ),
-                  ],
-                ),
+                    ),
+                ],
               ),
             ),
           ),
-          MyGradientButton(
-            onTap: () {},
-            title: shop.isActive == true
-                ? context.translate.active
-                : shop.isBuy == true
-                ? context.translate.select
-                : '${shop.price?.priceFormat}',
-            icon: shop.isBuy == true ? null : const MyImage(asset: MyAssets.gem),
-            fontSize: 20,
-            type: shop.isActive == true
-                ? MyButtonType.activeType
-                : MyButtonType.defaultType,
-          ),
-        ],
-      ),
+        ),
+        MyGradientButton(
+          onTap: () {},
+          title: shop.isActive == true
+              ? context.translate.active
+              : shop.isBuy == true
+              ? context.translate.select
+              : '${shop.price?.priceFormat}',
+          icon: shop.isBuy == true ? null : const MyImage(asset: MyAssets.gem),
+          fontSize: 20.sp,
+          type: shop.isActive == true
+              ? MyButtonType.activeType
+              : MyButtonType.defaultType,
+        ),
+      ],
     );
   }
 }

lib/features/shop/presentation/ui/widgets/shop_item/styles/gem_style.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
@@ -12,30 +13,27 @@ class GemStyle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      height: 190,
-      child: Column(
-        children: [
-          GradientText(
-            text: '${shop.number} ${shop.title}',
-            fontSize: 18,
-            color: const Color(0XFF9C8CC2),
-            shadowColor: const Color(0XFF1B0D31),
-            offset: const Offset(0, 1.69),
+    return Column(
+      children: [
+        GradientText(
+          text: '${shop.number} ${shop.title}',
+          fontSize: 18.sp,
+          color: const Color(0XFF9C8CC2),
+          shadowColor: const Color(0XFF1B0D31),
+          offset: const Offset(0, 1.69),
+        ),
+        Expanded(
+          child: MyImage(
+            asset: shop.image ?? '',
+            size: 110,
           ),
-          Expanded(
-            child: MyImage(
-              asset: shop.image ?? '',
-              size: 110,
-            ),
-          ),
-          MyGradientButton(
-            onTap: () {},
-            title: '\$ ${shop.price?.priceFormat}',
-            fontSize: 20,
-          ),
-        ],
-      ),
+        ),
+        MyGradientButton(
+          onTap: () {},
+          title: '\$ ${shop.price?.priceFormat}',
+          fontSize: 20.sp,
+        ),
+      ],
     );
   }
 }

lib/features/shop/presentation/ui/widgets/shop_item/styles/pro_membership_style.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/core/utils/number_format.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/button/my_gradient_button.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
@@ -12,30 +13,27 @@ class ProMembershipStyle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return SizedBox(
-      height: 190,
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          GradientText(
-            text: '${shop.number} ${shop.title}',
-            fontSize: 18,
-            color: const Color(0XFF9C8CC2),
-            shadowColor: const Color(0XFF1B0D31),
-            offset: const Offset(0, 1.69),
-          ),
-          MyImage(
-            asset: shop.image ?? '',
-            size: 90,
-            fit: BoxFit.contain,
-          ),
-          MyGradientButton(
-            onTap: () {},
-            title: '\$ ${shop.price?.priceFormat}',
-            fontSize: 20,
-          ),
-        ],
-      ),
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        GradientText(
+          text: '${shop.number} ${shop.title}',
+          fontSize: 18.sp,
+          color: const Color(0XFF9C8CC2),
+          shadowColor: const Color(0XFF1B0D31),
+          offset: const Offset(0, 1.69),
+        ),
+        MyImage(
+          asset: shop.image ?? '',
+          size: 80,
+          fit: BoxFit.contain,
+        ),
+        MyGradientButton(
+          onTap: () {},
+          title: '\$ ${shop.price?.priceFormat}',
+          fontSize: 20.sp,
+        ),
+      ],
     );
   }
 }

lib/features/shop/presentation/ui/widgets/shop_package_entity.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/common_ui/resources/my_assets.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
 import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
@@ -30,7 +29,7 @@ class ShopPackageWidget extends StatelessWidget {
         end: Alignment.bottomCenter,
         colors: [const Color(0XFF7D44CC), const Color(0XFF7D44CC).withValues(alpha: 0)],
       ),
-      padding: const EdgeInsets.all(MySpaces.s10),
+      padding: const EdgeInsets.all(10),
       child: Column(
         children: [
           Stack(
@@ -45,7 +44,7 @@ class ShopPackageWidget extends StatelessWidget {
                   shadowColor: const Color(0XFF3E1381),
                   offset: const Offset(0, 1.69),
                   blurRadius: 0.84,
-                  fontSize: 22,
+                  fontSize: 22.sp,
                 ),
               ),
               const PositionedDirectional(
@@ -54,7 +53,7 @@ class ShopPackageWidget extends StatelessWidget {
               ),
             ],
           ),
-          MySpaces.s30.gapHeight,
+          30.h.gapHeight,
           Wrap(
             direction: Axis.horizontal,
             spacing: 7,