Merge pull request 'fix/responsive' (#10) from fix/responsive into develop

Reviewed-on: #10

lib/common_ui/resources/my_spaces.dart

@@ -1,27 +0,0 @@
-class MySpaces {
-  static const MySpaces _i = MySpaces._internal();
-  const MySpaces._internal();
-  factory MySpaces() => _i;
-
-  static const double s0 = 0;
-  static const double s2 = 2;
-  static const double s4 = 4;
-  static const double s6 = 6;
-  static const double s8 = 8;
-  static const double s10 = 10;
-  static const double s12 = 12;
-  static const double s14 = 14;
-  static const double s16 = 16;
-  static const double s18 = 18;
-  static const double s20 = 20;
-  static const double s22 = 22;
-  static const double s24 = 24;
-  static const double s26 = 26;
-  static const double s28 = 28;
-  static const double s30 = 30;
-  static const double s32 = 32;
-  static const double s34 = 34;
-  static const double s36 = 36;
-  static const double s38 = 38;
-  static const double s40 = 40;
-}

lib/core/utils/screen_size.dart

@@ -6,8 +6,8 @@ extension ScreenSize on BuildContext {
   double get heightScreen => MediaQuery.sizeOf(this).height;
 }
 
-extension AdaptiveSize on double {
+extension AdaptiveSize on int {
   double get w => Get.context!.widthScreen * this / 375;
   double get h => Get.context!.heightScreen * this / 812;
-  double get sp => MediaQuery.textScalerOf(Get.context!).scale(this);
+  double get sp => MediaQuery.textScalerOf(Get.context!).scale(toDouble());
 }

lib/core/widgets/app_bar/my_app_bar.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/app_bar/enums/app_bar_type.dart';
 
 class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
@@ -35,7 +35,7 @@ class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
     return AppBar(
       backgroundColor: backgroundColor,
       centerTitle: true,
-      titleSpacing: MySpaces.s30,
+      titleSpacing: 30.w,
       scrolledUnderElevation: 0,
       title: AppBarType.title(
         title: title,

lib/core/widgets/app_bar/styles/master_app_bar.dart

@@ -1,7 +1,7 @@
 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/app_bar/widgets/app_bar_action.dart';
 import 'package:shia_game_flutter/core/widgets/app_bar/widgets/app_bar_add_widget.dart';
 
@@ -37,7 +37,7 @@ class MasterAppBar extends StatelessWidget implements PreferredSizeWidget {
             const Color(0XFF4F16A0),
           ],
         ),
-        MySpaces.s6.gapWidth,
+        6.w.gapWidth,
         AppBarAddWidget(
           onTap: onFlashTap,
           icon: MyAssets.iconFlash,
@@ -52,7 +52,7 @@ class MasterAppBar extends StatelessWidget implements PreferredSizeWidget {
           icon: MyAssets.iconShare,
           onTap: onShareTap,
         ),
-        MySpaces.s12.gapWidth,
+        12.w.gapWidth,
         AppBarAction(
           icon: MyAssets.iconSetting,
           onTap: onSettingTap,

lib/core/widgets/app_bar/widgets/app_bar_action.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 
@@ -13,9 +12,9 @@ class AppBarAction extends StatelessWidget {
   Widget build(BuildContext context) {
     return MyContainer(
       onTap: onTap,
-      width: MySpaces.s32,
-      height: MySpaces.s32,
-      padding: const EdgeInsets.all(MySpaces.s6),
+      width: 32,
+      height: 32,
+      padding: const EdgeInsets.all(6),
       boxShape: BoxShape.circle,
       borderColor: const Color(0XFF6D2ADA),
       gradient: const LinearGradient(

lib/core/widgets/app_bar/widgets/app_bar_add_widget.dart

@@ -1,9 +1,8 @@
-
 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/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/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 
@@ -25,8 +24,8 @@ class AppBarAddWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return MyContainer(
       onTap: onTap,
-      width: 96,
-      height: 32,
+      width: 96.w,
+      height: 32.h,
       borderRadius: const BorderRadius.all(Radius.circular(50)),
       borderGradient: LinearGradient(
         begin: AlignmentDirectional.topStart,
@@ -34,8 +33,8 @@ class AppBarAddWidget extends StatelessWidget {
         colors: gradientColors,
       ),
       padding: const EdgeInsetsDirectional.only(
-        start: MySpaces.s8,
-        end: MySpaces.s4,
+        start: 8,
+        end: 4,
       ),
       color: context.backgroundColor,
       child: Row(
@@ -47,7 +46,7 @@ class AppBarAddWidget extends StatelessWidget {
               maxLines: 1,
               textAlign: TextAlign.center,
               overflow: TextOverflow.ellipsis,
-              style: Lexend.bold.copyWith(fontSize: 12),
+              style: Lexend.bold.copyWith(fontSize: 12.sp),
             ),
           ),
           MyContainer(

lib/core/widgets/app_bar/widgets/app_bar_back_button.dart

@@ -1,6 +1,5 @@
 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/common_ui/theme/my_theme.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 
@@ -13,14 +12,14 @@ class AppBarBackButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return MyContainer(
       onTap: () => Get.back(),
-      height: MySpaces.s32,
-      width: MySpaces.s32,
+      height: 32,
+      width: 32,
       borderRadius: const BorderRadius.all(Radius.circular(12)),
       color: context.primaryColor.withValues(alpha: 0.1),
       child: Icon(
         Icons.arrow_back_ios_new_rounded,
         color: context.primaryColor,
-        size: MySpaces.s18,
+        size: 18,
       ),
     );
   }

lib/core/widgets/app_bar/widgets/app_bar_gradient_title.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
 
 class AppBarGradientTitle extends StatelessWidget {
@@ -14,7 +15,7 @@ class AppBarGradientTitle extends StatelessWidget {
     return GradientText(
       text: title,
       color: const Color(0XFFCAA8FF),
-      fontSize: 22,
+      fontSize: 22.sp,
       shadowColor: const Color(0XFF3E1381),
       offset: const Offset(0, 1.69),
       blurRadius: 0.84,

lib/core/widgets/app_bar/widgets/app_bar_info.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 
@@ -15,14 +14,14 @@ class AppBarInfo extends StatelessWidget {
   Widget build(BuildContext context) {
     return MyContainer(
       onTap: onTap,
-      height: MySpaces.s32,
-      width: MySpaces.s32,
+      height: 32,
+      width: 32,
       borderRadius: const BorderRadius.all(Radius.circular(12)),
       color: context.primaryColor.withValues(alpha: 0.1),
       child: Icon(
         Icons.info_outline_rounded,
         color: context.primaryColor,
-        size: MySpaces.s20,
+        size: 20,
       ),
     );
   }

lib/core/widgets/background/my_background.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 import 'package:shia_game_flutter/common_ui/theme/my_theme.dart';
 
 class MyBackground extends StatelessWidget {
@@ -18,7 +17,7 @@ class MyBackground extends StatelessWidget {
         ),
       ),
       child: listChild ?? SingleChildScrollView(
-        padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
+        padding: const EdgeInsets.all(20),
         child: child,
       ),
     );

lib/core/widgets/bottom_nav_bar/bottom_nav_bar.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
 import 'package:get/get_state_manager/src/simple/get_view.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/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/bottom_nav_bar/styles/bottom_nav_bar_item.dart';
 import 'package:shia_game_flutter/core/widgets/bottom_nav_bar/styles/bottom_nav_bar_profile_item.dart';
 import 'package:shia_game_flutter/features/master/presentation/controller/master_controller.dart';
@@ -13,10 +13,7 @@ class BottomNavBar extends GetView<MasterController> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      clipBehavior: Clip.none,
-      padding: const EdgeInsets.symmetric(
-        horizontal: MySpaces.s30
-      ),
+      padding: EdgeInsets.symmetric(horizontal: 30.w),
       decoration: const BoxDecoration(
         gradient: RadialGradient(
           radius: 2.5,
@@ -30,8 +27,8 @@ class BottomNavBar extends GetView<MasterController> {
           backgroundColor: Colors.transparent,
           elevation: 0,
           type: BottomNavigationBarType.fixed,
-          unselectedFontSize: 8,
-          selectedFontSize: 8,
+          unselectedFontSize: 11.sp,
+          selectedFontSize: 11.sp,
           unselectedLabelStyle: Lexend.bold,
           selectedLabelStyle: Lexend.bold,
           showSelectedLabels: false,

lib/core/widgets/bottom_nav_bar/styles/bottom_nav_bar_item.dart

@@ -1,7 +1,6 @@
 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/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/features/master/domain/entity/bottom_nav_entity.dart';
 
@@ -13,12 +12,12 @@ class BottomNavBarItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Column(
+      spacing: 4.h,
       children: [
         MyImage(asset: bottomNavEntity.icon ?? ''),
-        MySpaces.s4.gapHeight,
         Text(
           bottomNavEntity.title ?? '',
-          style: Lexend.bold.copyWith(fontSize: MySpaces.s8),
+          style: Lexend.bold.copyWith(fontSize: 11.sp),
         ),
       ],
     );

lib/core/widgets/bottom_nav_bar/styles/bottom_nav_bar_profile_item.dart

@@ -1,7 +1,6 @@
 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/core/utils/gap.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/features/master/domain/entity/bottom_nav_entity.dart';
 
@@ -13,10 +12,11 @@ class BottomNavBarProfileItem extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Column(
+      spacing: 4.h,
       children: [
         Container(
-          height: 26,
-          width: 26,
+          height: 26.h,
+          width: 26.w,
           padding: const EdgeInsets.all(3),
           decoration: BoxDecoration(
             shape: BoxShape.circle,
@@ -27,10 +27,9 @@ class BottomNavBarProfileItem extends StatelessWidget {
           ),
           child: MyImage(asset: bottomNavEntity.icon ?? ''),
         ),
-        MySpaces.s4.gapHeight,
         Text(
           bottomNavEntity.title ?? '',
-          style: Lexend.bold.copyWith(fontSize: MySpaces.s8),
+          style: Lexend.bold.copyWith(fontSize: 11.sp),
         ),
       ],
     );

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/core/widgets/input/my_input.dart

@@ -1,7 +1,7 @@
 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/screen_size.dart';
 
 class MyInput extends StatelessWidget {
   const MyInput({
@@ -43,12 +43,12 @@ class MyInput extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
-      spacing: MySpaces.s8,
+      spacing: 8,
       children: [
         if (labelText != null && labelText!.isNotEmpty)
           Text(
             labelText ?? '',
-            style: Lexend.bold.copyWith(fontSize: 12),
+            style: Lexend.bold.copyWith(fontSize: 12.sp),
           ),
         TextFormField(
           controller: controller,
@@ -63,10 +63,10 @@ class MyInput extends StatelessWidget {
           readOnly: readOnly ?? false,
           maxLines: maxLines,
           minLines: minLines,
-          style: Lexend.extraBold.copyWith(fontSize: 12),
+          style: Lexend.extraBold.copyWith(fontSize: 12.sp),
           cursorColor: context.primaryColor,
           decoration: InputDecoration(
-            contentPadding: const EdgeInsets.all(MySpaces.s14),
+            contentPadding: const EdgeInsets.all(14),
             enabledBorder: const OutlineInputBorder(
               borderRadius: BorderRadius.all(Radius.circular(12)),
               borderSide: BorderSide(color: Color(0XFF5715BF), width: 1),
@@ -78,7 +78,7 @@ class MyInput extends StatelessWidget {
             fillColor: const Color(0XFF000000).withValues(alpha: 0.2),
             filled: true,
             hintText: hintText,
-            hintStyle: Lexend.extraBold.copyWith(fontSize: 12),
+            hintStyle: Lexend.extraBold.copyWith(fontSize: 12.sp),
           ),
           onTapOutside: (event) {
             FocusManager.instance.primaryFocus?.unfocus();

lib/core/widgets/text/gradient_text.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.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/screen_size.dart';
 
 class GradientText extends StatelessWidget {
   const GradientText({
@@ -8,7 +9,7 @@ class GradientText extends StatelessWidget {
     this.text,
     this.color = const Color(0xFFFFFFFF),
     this.gradientColor,
-    this.fontSize = 14,
+    this.fontSize,
     this.shadowColor = const Color(0xFF000000),
     this.blurRadius = 0,
     this.spreadRadius = 0,
@@ -46,7 +47,7 @@ class GradientText extends StatelessWidget {
         textAlign: textAlign,
         maxLines: 1,
         style: textStyle ?? Lexend.extraBold.copyWith(
-          fontSize: fontSize,
+          fontSize: fontSize ?? 14.sp,
           shadows: [
             BoxShadow(
               color: shadowColor,

lib/features/awards/presentation/ui/awards_page.dart

@@ -1,7 +1,5 @@
 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/widgets/background/my_background.dart';
 import 'package:shia_game_flutter/features/awards/presentation/controller/awards_controller.dart';
 import 'package:shia_game_flutter/features/awards/presentation/ui/widgets/award_widget.dart';
@@ -13,20 +11,17 @@ class AwardsPage extends GetView<AwardsController> {
   Widget build(BuildContext context) {
     return MyBackground(
       child: Column(
+        spacing: 28,
         children: [
-          60.0.gapHeight,
           AwardWidget(
             images: controller.leagueAwards,
           ),
-          MySpaces.s28.gapHeight,
           AwardWidget(
             images: controller.customAwards,
           ),
-          MySpaces.s28.gapHeight,
           AwardWidget(
             images: controller.castAwards,
           ),
-          MySpaces.s30.gapHeight,
         ],
       ),
     );

lib/features/awards/presentation/ui/widgets/award_widget.dart

@@ -1,5 +1,4 @@
 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/core/utils/my_localization.dart';
 import 'package:shia_game_flutter/core/utils/page_scalable.dart';
@@ -74,20 +73,20 @@ class _AwardWidgetState extends State<AwardWidget> {
           ),
           color: const Color(0XFF2B105A),
           padding: const EdgeInsets.only(
-            bottom: MySpaces.s10,
-            top: MySpaces.s40,
+            bottom: 10,
+            top: 40,
           ),
           child: Column(
-            spacing: MySpaces.s12,
+            spacing: 12,
             children: [
               SizedBox(
-                height: 100,
+                height: 100.h,
                 child: Stack(
                   alignment: Alignment.center,
                   children: [
                     Padding(
                       padding: const EdgeInsets.symmetric(
-                        horizontal: MySpaces.s16,
+                        horizontal: 16,
                       ),
                       child: PageView.builder(
                         controller: pageController,
@@ -126,16 +125,16 @@ class _AwardWidgetState extends State<AwardWidget> {
                 ),
               ),
               Column(
-                spacing: MySpaces.s2,
+                spacing: 2,
                 children: [
                   Text(
                     context.translate.first_place,
-                    style: Lexend.extraBold.copyWith(fontSize: 14),
+                    style: Lexend.extraBold.copyWith(fontSize: 14.sp),
                   ),
                   GradientText(
                     text: '1ST Week (May 2024)',
                     textStyle: Lexend.semiBold.copyWith(
-                      fontSize: 10,
+                      fontSize: 10.sp,
                       shadows: [
                         const BoxShadow(
                           color: Color(0XFF3E1381),
@@ -152,11 +151,11 @@ class _AwardWidgetState extends State<AwardWidget> {
           ),
         ),
         Positioned(
-          top: -MySpaces.s14,
+          top: -14,
           child: Container(
             padding: const EdgeInsets.symmetric(
-              horizontal: MySpaces.s10,
-              vertical: MySpaces.s6,
+              horizontal: 10,
+              vertical: 6,
             ),
             decoration: const BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(12)),
@@ -168,7 +167,7 @@ class _AwardWidgetState extends State<AwardWidget> {
                 text: context.translate.battle_league_awards,
                 color: const Color(0XFFCAA8FF),
                 textStyle: Lexend.medium.copyWith(
-                  fontSize: 14,
+                  fontSize: 10.sp,
                   shadows: [
                     const BoxShadow(
                       color: Color(0XFF3E1381),

lib/features/battle_league/presentation/ui/battle_league_page.dart

@@ -1,9 +1,9 @@
 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/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/app_bar/enums/app_bar_type.dart';
 import 'package:shia_game_flutter/core/widgets/app_bar/my_app_bar.dart';
 import 'package:shia_game_flutter/features/battle_league/presentation/controller/battle_league_controller.dart';
@@ -29,13 +29,12 @@ class BattleLeaguePage extends GetView<BattleLeagueController> {
       body: SafeArea(
         child: Column(
           children: [
-            MySpaces.s30.gapHeight,
+            20.h.gapHeight,
             _tabBars(context),
-            MySpaces.s12.gapHeight,
+            12.h.gapHeight,
             _tabViews(),
             56.0.gapHeight,
             _startButton(context),
-            MySpaces.s16.gapHeight,
           ],
         ),
       ),
@@ -44,7 +43,7 @@ class BattleLeaguePage extends GetView<BattleLeagueController> {
 
   Padding _tabBars(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
+      padding: const EdgeInsets.symmetric(horizontal: 30),
       child: BattleLeagueTabBar(
         controller: controller.tabController,
         tabs: [
@@ -61,11 +60,11 @@ class BattleLeaguePage extends GetView<BattleLeagueController> {
         controller: controller.tabController,
         children: const [
           Padding(
-            padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
+            padding: EdgeInsets.symmetric(horizontal: 30),
             child: TimeRanking(),
           ),
           Padding(
-            padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
+            padding: EdgeInsets.symmetric(horizontal: 30),
             child: RegionalRanking(),
           ),
         ],
@@ -75,7 +74,7 @@ class BattleLeaguePage extends GetView<BattleLeagueController> {
 
   Padding _startButton(BuildContext context) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
+      padding: const EdgeInsets.symmetric(horizontal: 30),
       child: BattleLeagueStartButton(
         title: context.translate.play_now,
         onTap: () {},

lib/features/battle_league/presentation/ui/widgets/battle_league_start_button.dart

@@ -18,7 +18,7 @@ class BattleLeagueStartButton extends StatelessWidget {
     return MyContainer(
       onTap: onTap,
       width: context.widthScreen,
-      height: 64,
+      height: 64.h,
       borderRadius: const BorderRadius.all(Radius.circular(20)),
       borderGradient: const LinearGradient(
           begin: AlignmentDirectional.topStart,
@@ -36,9 +36,9 @@ class BattleLeagueStartButton extends StatelessWidget {
           Color(0xFFCD8402),
         ],
       ),
-      child:  GradientText(
+      child: GradientText(
         text: title,
-        fontSize: 22,
+        fontSize: 22.sp,
         color: const Color(0xFFF5D69F),
         offset: const Offset(0, 1.04),
         blurRadius: 0.52,

lib/features/battle_league/presentation/ui/widgets/battle_league_tab_bar.dart

@@ -1,7 +1,7 @@
 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/screen_size.dart';
 
 class BattleLeagueTabBar extends StatelessWidget {
   const BattleLeagueTabBar({
@@ -18,20 +18,20 @@ class BattleLeagueTabBar extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.all(3),
       decoration: const BoxDecoration(
-        borderRadius: BorderRadius.all(Radius.circular(MySpaces.s10)),
+        borderRadius: BorderRadius.all(Radius.circular(10)),
         color: Color(0XFF310D6F),
       ),
       child: TabBar(
         controller: controller,
         tabs: tabs.map((e) => Tab(text: e)).toList(),
         indicator: const BoxDecoration(
-          borderRadius: BorderRadius.all(Radius.circular(MySpaces.s8)),
+          borderRadius: BorderRadius.all(Radius.circular(8)),
           color: Color(0XFF897AB8),
         ),
         indicatorSize: TabBarIndicatorSize.tab,
         labelColor: context.primaryColor,
         unselectedLabelColor: const Color(0XFF897AB8),
-        labelStyle: Lexend.semiBold.copyWith(fontSize: 14),
+        labelStyle: Lexend.semiBold.copyWith(fontSize: 14.sp),
         dividerHeight: 0,
       ),
     );

lib/features/battle_league/presentation/ui/widgets/filter_ranking_button.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.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/common_ui/resources/my_text_style.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 
 class FilterRankingButton extends StatelessWidget {
@@ -20,7 +20,7 @@ class FilterRankingButton extends StatelessWidget {
   Widget build(BuildContext context) {
     return MyContainer(
       onTap: select ? null : onTap,
-      padding: const EdgeInsets.symmetric(vertical: MySpaces.s16),
+      padding: const EdgeInsets.symmetric(vertical: 16),
       borderRadius: const BorderRadius.all(Radius.circular(7)),
       color: select ? null : MyColors.black.withValues(alpha: 0.2),
       gradient: select
@@ -33,7 +33,7 @@ class FilterRankingButton extends StatelessWidget {
       child: Text(
         title ?? '',
         style: Lexend.semiBold.copyWith(
-          fontSize: 12,
+          fontSize: 12.sp,
           color: select ? MyColors.white : const Color(0XFFBCA1EA),
         ),
       ),

lib/features/battle_league/presentation/ui/widgets/my_ranking_widget.dart

@@ -1,8 +1,8 @@
 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/common_ui/resources/my_text_style.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/image/my_image.dart';
 
 class MyRankingWidget extends StatelessWidget {
@@ -11,23 +11,23 @@ class MyRankingWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      height: 48,
+      height: 48.h,
       child: Row(
         children: [
-          Text('1', style: Lexend.extraBold.copyWith(fontSize: 12)),
-          MySpaces.s20.gapWidth,
-          const MyImage(asset: MyAssets.sampleAvatar, size: MySpaces.s20),
-          MySpaces.s6.gapWidth,
+          Text('1', style: Lexend.extraBold.copyWith(fontSize: 12.sp)),
+          20.w.gapWidth,
+          const MyImage(asset: MyAssets.sampleAvatar, size: 20),
+          6.w.gapWidth,
           Expanded(
             child: Text(
               'Amirreza',
-              style: Lexend.medium.copyWith(fontSize: 12),
+              style: Lexend.medium.copyWith(fontSize: 12.sp),
             ),
           ),
-          MySpaces.s6.gapWidth,
+          6.w.gapWidth,
           const MyImage(asset: MyAssets.iconRank),
-          MySpaces.s6.gapWidth,
-          Text('1234', style: Lexend.black.copyWith(fontSize: 12)),
+          6.w.gapWidth,
+          Text('1234', style: Lexend.black.copyWith(fontSize: 12.sp)),
         ],
       ),
     );

lib/features/battle_league/presentation/ui/widgets/ranking_region.dart

@@ -1,7 +1,7 @@
 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/core/utils/my_localization.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 
 class RankingRegion extends StatelessWidget {
   const RankingRegion({super.key});
@@ -9,15 +9,15 @@ class RankingRegion extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Row(
-      spacing: MySpaces.s2,
+      spacing: 2,
       children: [
         const Icon(
           Icons.location_on_rounded,
-          size: MySpaces.s18,
+          size: 18,
           color: Color(0xFF8249E2),
         ),
         Text.rich(
-          style: Lexend.medium.copyWith(fontSize: 12),
+          style: Lexend.medium.copyWith(fontSize: 12.sp),
           TextSpan(
             text: '${context.translate.region}: ',
             style: const TextStyle(color: Color(0xFF8249E2)),

lib/features/battle_league/presentation/ui/widgets/ranking_scrollbar.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
 
 class RankingScrollbar extends StatelessWidget {
   const RankingScrollbar({
@@ -21,7 +20,7 @@ class RankingScrollbar extends StatelessWidget {
       trackRadius: const Radius.circular(10),
       radius: const Radius.circular(10),
       thickness: 3,
-      crossAxisMargin: MySpaces.s0,
+      crossAxisMargin: 0,
       trackVisibility: true,
       child: child,
     );

lib/features/battle_league/presentation/ui/widgets/ranking_time.dart

@@ -1,8 +1,8 @@
 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/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 
 class RankingTime extends StatelessWidget {
@@ -22,38 +22,38 @@ class RankingTime extends StatelessWidget {
         Text(
           '1ST ${filterTitles[selectedIndex]}',
           style: Lexend.black.copyWith(
-            fontSize: 14,
+            fontSize: 14.sp,
           ),
         ),
-        MySpaces.s8.gapWidth,
+        8.w.gapWidth,
         Text(
           '(May 2024)',
           style: Lexend.medium.copyWith(
-            fontSize: 10,
+            fontSize: 10.sp,
           ),
         ),
         const Spacer(),
         MyContainer(
-          height: MySpaces.s32,
-          width: MySpaces.s32,
+          height: 32,
+          width: 32,
           borderRadius: const BorderRadius.all(Radius.circular(7)),
           color: const Color(0XFF5210AC),
           child: Icon(
             Icons.arrow_back_ios_rounded,
             color: context.primaryColor,
-            size: MySpaces.s18,
+            size: 18,
           ),
         ),
-        MySpaces.s10.gapWidth,
+        10.w.gapWidth,
         MyContainer(
-          height: MySpaces.s32,
-          width: MySpaces.s32,
+          height: 32,
+          width: 32,
           borderRadius: const BorderRadius.all(Radius.circular(7)),
           color: const Color(0XFF5210AC),
           child: Icon(
             Icons.arrow_forward_ios_rounded,
             color: context.primaryColor,
-            size: MySpaces.s18,
+            size: 18,
           ),
         )
       ],

lib/features/battle_league/presentation/ui/widgets/ranking_widget.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/common_ui/resources/my_text_style.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/image/my_image.dart';
 
 class RankingWidget extends StatelessWidget {
@@ -12,29 +12,29 @@ class RankingWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      height: 48,
+      height: 48.h,
       decoration: BoxDecoration(
-        borderRadius: const BorderRadius.all(Radius.circular(MySpaces.s10)),
+        borderRadius: const BorderRadius.all(Radius.circular(10)),
         color: MyColors.black.withValues(alpha: 0.2),
       ),
       child: Row(
         children: [
-          MySpaces.s10.gapWidth,
-          Text('1', style: Lexend.extraBold.copyWith(fontSize: 12)),
-          MySpaces.s20.gapWidth,
-          const MyImage(asset: MyAssets.sampleAvatar, size: MySpaces.s20),
-          MySpaces.s6.gapWidth,
+          10.w.gapWidth,
+          Text('1', style: Lexend.extraBold.copyWith(fontSize: 12.sp)),
+          20.w.gapWidth,
+          const MyImage(asset: MyAssets.sampleAvatar, size: 20),
+          6.w.gapWidth,
           Expanded(
             child: Text(
               'Amirreza',
-              style: Lexend.medium.copyWith(fontSize: 12),
+              style: Lexend.medium.copyWith(fontSize: 12.sp),
             ),
           ),
-          MySpaces.s6.gapWidth,
+          6.w.gapWidth,
           const MyImage(asset: MyAssets.iconRank),
-          MySpaces.s6.gapWidth,
-          Text('1234', style: Lexend.black.copyWith(fontSize: 12)),
-          MySpaces.s30.gapWidth,
+          6.w.gapWidth,
+          Text('1234', style: Lexend.black.copyWith(fontSize: 12.sp)),
+          30.w.gapWidth,
         ],
       ),
     );

lib/features/battle_league/presentation/ui/widgets/regional_ranking.dart

@@ -1,7 +1,7 @@
 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/my_localization.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/filter_ranking_button.dart';
 import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/my_ranking_widget.dart';
 import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/ranking_region.dart';
@@ -39,18 +39,18 @@ class _RegionalRankingState extends State<RegionalRanking> {
   Widget build(BuildContext context) {
     return Container(
       padding: const EdgeInsets.only(
-        top: MySpaces.s12,
-        left: MySpaces.s12,
-        right: MySpaces.s12,
+        top: 12,
+        left: 12,
+        right: 12,
       ),
       decoration: const BoxDecoration(
-        borderRadius: BorderRadius.all(Radius.circular(MySpaces.s10)),
+        borderRadius: BorderRadius.all(Radius.circular(10)),
         color: Color(0XFF310D6F),
       ),
       child: Column(
         children: [
           Row(
-            spacing: MySpaces.s10,
+            spacing: 10,
             children: List.generate(
               filterTitles.length,
               (index) => Expanded(
@@ -66,18 +66,18 @@ class _RegionalRankingState extends State<RegionalRanking> {
               ),
             ),
           ),
-          MySpaces.s22.gapHeight,
+          22.h.gapHeight,
           const RankingRegion(),
-          MySpaces.s12.gapHeight,
+          12.h.gapHeight,
           Expanded(
             child: RankingScrollbar(
               scrollController: scrollController,
               child: ListView.separated(
                 controller: scrollController,
                 itemCount: 10,
-                padding: const EdgeInsetsDirectional.only(end: MySpaces.s14),
+                padding: const EdgeInsetsDirectional.only(end: 14),
                 itemBuilder: (context, index) => const RankingWidget(),
-                separatorBuilder: (context, index) => MySpaces.s10.gapHeight,
+                separatorBuilder: (context, index) => 10.h.gapHeight,
               ),
             ),
           ),

lib/features/battle_league/presentation/ui/widgets/time_ranking.dart

@@ -1,7 +1,7 @@
 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/my_localization.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/filter_ranking_button.dart';
 import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/my_ranking_widget.dart';
 import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/ranking_scrollbar.dart';
@@ -40,18 +40,18 @@ class _TimeRankingState extends State<TimeRanking> {
   Widget build(BuildContext context) {
     return Container(
       padding: const EdgeInsets.only(
-        top: MySpaces.s12,
-        left: MySpaces.s12,
-        right: MySpaces.s12,
+        top: 12,
+        left: 12,
+        right: 12,
       ),
       decoration: const BoxDecoration(
-        borderRadius: BorderRadius.all(Radius.circular(MySpaces.s10)),
+        borderRadius: BorderRadius.all(Radius.circular(10)),
         color: Color(0XFF310D6F),
       ),
       child: Column(
         children: [
           Row(
-            spacing: MySpaces.s10,
+            spacing: 10,
             children: List.generate(
               filterTitles.length,
               (index) => Expanded(
@@ -67,13 +67,13 @@ class _TimeRankingState extends State<TimeRanking> {
               ),
             ),
           ),
-          MySpaces.s22.gapHeight,
+          22.h.gapHeight,
           if(selectedIndex != 0) ...{
             RankingTime(
               filterTitles: filterTitles,
               selectedIndex: selectedIndex,
             ),
-            MySpaces.s12.gapHeight,
+            12.h.gapHeight,
           },
           Expanded(
             child: RankingScrollbar(
@@ -81,9 +81,9 @@ class _TimeRankingState extends State<TimeRanking> {
               child: ListView.separated(
                 controller: scrollController,
                 itemCount: 10,
-                padding: const EdgeInsetsDirectional.only(end: MySpaces.s14),
+                padding: const EdgeInsetsDirectional.only(end: 14),
                 itemBuilder: (context, index) => const RankingWidget(),
-                separatorBuilder: (context, index) => MySpaces.s10.gapHeight,
+                separatorBuilder: (context, index) => 10.h.gapHeight,
               ),
             ),
           ),

lib/features/home/presentation/pages/home_page.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart' ;
 import 'package:get/get.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/my_localization.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/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/features/home/presentation/controller/home_controller.dart';
@@ -21,16 +21,15 @@ class HomePage extends GetView<HomeController> {
     return MyBackground(
       child: Column(
         children: [
-          MySpaces.s28.gapHeight,
           const MyImage(asset: MyAssets.shiaMindGroup),
-          MySpaces.s40.gapHeight,
+          40.h.gapHeight,
           const HomeMembership(),
           HomeBattleLeague(
             onTap: controller.goToBattleLeaguePage,
           ),
-          MySpaces.s20.gapHeight,
+          20.h.gapHeight,
           _customWidgets(context),
-          MySpaces.s20.gapHeight,
+          20.h.gapHeight,
           const HomeBattleCast(),
         ],
       ),
@@ -39,7 +38,7 @@ class HomePage extends GetView<HomeController> {
 
   Widget _customWidgets(BuildContext context) {
     return Row(
-      spacing: MySpaces.s22,
+      spacing: 20,
       children: [
         Expanded(
           child: HomeCustomWidget(

lib/features/home/presentation/pages/widgets/home_battle_cast.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
 import 'package:flutter_inset_box_shadow_update/flutter_inset_box_shadow_update.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/common_ui/resources/my_text_style.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/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
@@ -21,8 +21,8 @@ class HomeBattleCast extends StatelessWidget {
       clipBehavior: Clip.none,
       children: [
         MyContainer(
-          height: 120,
-          borderRadius: const BorderRadius.all(Radius.circular(MySpaces.s20)),
+          height: 120.h,
+          borderRadius: const BorderRadius.all(Radius.circular(20)),
           borderGradient: const LinearGradient(
             begin: AlignmentDirectional.topCenter,
             end: AlignmentDirectional.bottomCenter,
@@ -33,7 +33,7 @@ class HomeBattleCast extends StatelessWidget {
             center: const Alignment(-0.5, -1),
             colors: [const Color(0XFF104CBA).withValues(alpha: 0.2), const Color(0XFF104CBA)],
           ),
-          padding: const EdgeInsets.all(MySpaces.s10),
+          padding: const EdgeInsets.all(10),
           image: DecorationImage(
             image: const AssetImage(MyAssets.addBackground),
             repeat: ImageRepeat.repeat,
@@ -52,9 +52,9 @@ class HomeBattleCast extends StatelessWidget {
                 offset: const Offset(0, 1.04),
                 blurRadius: 0.52,
                 shadowColor: const Color(0xFF3C38C4),
-                fontSize: 22,
+                fontSize: 22.sp,
               ),
-              MySpaces.s10.gapHeight,
+              10.h.gapHeight,
               Container(
                 padding: const EdgeInsets.all(5),
                 decoration: BoxDecoration(
@@ -73,7 +73,7 @@ class HomeBattleCast extends StatelessWidget {
                   'Sheikh.Sadra VS Ali Masoudi (online) - Sheikh.Sadra number tow VS Ali Masoudi tabar (tomorrow)',
                   maxLines: 1,
                   style: Lexend.semiBold.copyWith(
-                    fontSize: 8,
+                    fontSize: 8.sp,
                     color: const Color(0XFFB6B3FF),
                   ),
                 ),
@@ -83,12 +83,12 @@ class HomeBattleCast extends StatelessWidget {
         ),
         PositionedDirectional(
           start: -1,
-          top: -MySpaces.s4,
+          top: -4,
           child: MyContainer(
             color: const Color(0XFFCC9B22),
             padding: const EdgeInsets.symmetric(
-              vertical: MySpaces.s2,
-              horizontal: MySpaces.s8,
+              vertical: 2,
+              horizontal: 8,
             ),
             borderRadius: const BorderRadiusDirectional.only(
               topStart: Radius.circular(6),
@@ -99,14 +99,14 @@ class HomeBattleCast extends StatelessWidget {
             child: Text(
               '2 New',
               style: Lexend.extraBold.copyWith(
-                fontSize: 11,
+                fontSize: 11.sp,
               ),
             ),
           ),
         ),
         const PositionedDirectional(
-          end: MySpaces.s20,
-          top: -MySpaces.s10,
+          end: 20,
+          top: -10,
           child: Row(
             children: [
               MyImage(

lib/features/home/presentation/pages/widgets/home_battle_league.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/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
 import 'package:shia_game_flutter/core/utils/my_localization.dart';
@@ -22,10 +21,10 @@ class HomeBattleLeague extends StatelessWidget {
         MyContainer(
           onTap: onTap,
           width: context.widthScreen,
-          height: 120,
+          height: 120.h,
           padding: const EdgeInsets.symmetric(
-            horizontal: MySpaces.s12,
-            vertical: MySpaces.s16,
+            horizontal: 12,
+            vertical: 16,
           ),
           borderGradient: const LinearGradient(
             begin: AlignmentDirectional.centerStart,
@@ -49,12 +48,12 @@ class HomeBattleLeague extends StatelessWidget {
                 shadowColor: const Color(0xFF3E1381),
                 blurRadius: 0.84,
                 offset: const Offset(0, 1.69),
-                fontSize: 22,
+                fontSize: 22.sp,
               ),
               Text(
                 context.translate.answer_win,
                 style: Lexend.medium.copyWith(
-                  fontSize: 10,
+                  fontSize: 10.sp,
                   color: const Color(0XFFA183D2),
                 ),
               ),

lib/features/home/presentation/pages/widgets/home_custom_widget.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart' hide BoxDecoration, BoxShadow;
 import 'package:flutter_inset_box_shadow_update/flutter_inset_box_shadow_update.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/common_ui/resources/my_text_style.dart';
 import 'package:shia_game_flutter/core/utils/gap.dart';
 import 'package:shia_game_flutter/core/utils/screen_size.dart';
@@ -24,7 +23,7 @@ class HomeCustomWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MyContainer(
-      height: 130,
+      height: 130.h,
       borderRadius: const BorderRadius.all(Radius.circular(20)),
       borderGradient: CustomWidgetType.borderGradient[type],
       gradient: CustomWidgetType.gradient[type],
@@ -36,7 +35,7 @@ class HomeCustomWidget extends StatelessWidget {
           BlendMode.srcIn,
         ),
       ),
-      padding: const EdgeInsets.all(MySpaces.s10),
+      padding: const EdgeInsets.all(10),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
@@ -46,7 +45,7 @@ class HomeCustomWidget extends StatelessWidget {
           ),
           const Spacer(),
           CustomWidgetType.title[type] ?? const SizedBox.shrink(),
-          MySpaces.s10.gapHeight,
+          10.h.gapHeight,
           Container(
             padding: const EdgeInsets.all(5),
             width: context.widthScreen,
@@ -70,14 +69,14 @@ class HomeCustomWidget extends StatelessWidget {
                   TextSpan(
                     text: firstText,
                     style: Lexend.semiBold.copyWith(
-                      fontSize: 8,
+                      fontSize: 8.sp,
                       color: CustomWidgetType.firstTextColor[type],
                     ),
                   ),
                   TextSpan(
                     text: ' $secondText',
                     style: Lexend.semiBold.copyWith(
-                      fontSize: 8,
+                      fontSize: 8.sp,
                       color: CustomWidgetType.secondTextColor[type],
                     ),
                   ),

lib/features/home/presentation/pages/widgets/home_membership.dart

@@ -1,7 +1,6 @@
 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/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';
@@ -26,7 +25,7 @@ class HomeMembership extends StatelessWidget {
           const Color(0XFFDE8B4D).withValues(alpha: 0.05),
         ],
       ),
-      borderRadius: const BorderRadius.all(Radius.circular(MySpaces.s20)),
+      borderRadius: const BorderRadius.all(Radius.circular(20)),
       boxShadow: [
         const BoxShadow(
           color: MyColors.black,
@@ -35,22 +34,22 @@ class HomeMembership extends StatelessWidget {
           spreadRadius: 20,
         ),
       ],
-      padding: const EdgeInsets.symmetric(horizontal: MySpaces.s16, vertical: 13),
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 13),
       child: Row(
         children: [
           const MyImage(asset: MyAssets.iconCrown),
-          MySpaces.s8.gapWidth,
+          8.w.gapWidth,
           Text(
             context.translate.pro_membership,
             style: Lexend.semiBold.copyWith(
-              fontSize: 12,
+              fontSize: 12.sp,
               color: const Color(0XFFFCC230),
             ),
           ),
           const Spacer(),
           const MyImage(asset: MyAssets.iconClock),
-          MySpaces.s6.gapWidth,
-          Text('125d 4h', style: Lexend.semiBold.copyWith(fontSize: 12)),
+          6.w.gapWidth,
+          Text('125d 4h', style: Lexend.semiBold.copyWith(fontSize: 12.sp)),
         ],
       ),
     );

lib/features/intro/presentation/ui/intro_page.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.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/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/my_localization.dart';
@@ -29,10 +28,7 @@ class IntroPage extends GetView<IntroController> {
           ),
           child: Stack(
             alignment: Alignment.center,
-            children: [
-              _logo(context),
-              _bottomLoading(context),
-            ],
+            children: [_logo(context), _bottomLoading(context)],
           ),
         ),
       ),
@@ -40,63 +36,44 @@ class IntroPage extends GetView<IntroController> {
   }
 
   Stack _logo(BuildContext context) {
-    return const Stack(
+    return Stack(
       clipBehavior: Clip.none,
       alignment: Alignment.center,
       children: [
-        MyImage(asset: MyAssets.shiaMind),
+        const MyImage(asset: MyAssets.shiaMind),
         PositionedDirectional(
-          top: -124,
-          end: -62,
-          child: MyImage(
-            asset: MyAssets.question,
-          ),
+          top: -124.h,
+          end: -62.w,
+          child: const MyImage(asset: MyAssets.question),
         ),
         PositionedDirectional(
-          top: -157,
-          end: 60,
-          child: MyImage(
-            asset: MyAssets.question,
-            size: 30,
-          ),
+          top: -157.h,
+          end: 60.w,
+          child: const MyImage(asset: MyAssets.question, size: 30),
         ),
         PositionedDirectional(
-          top: -90,
-          start: -30,
-          child: MyImage(
-            asset: MyAssets.question,
-            size: 25,
-          ),
+          top: -90.h,
+          start: -30.w,
+          child: const MyImage(asset: MyAssets.question, size: 25),
         ),
         PositionedDirectional(
-          bottom: -90,
-          start: -30,
-          child: MyImage(
-            asset: MyAssets.question,
-          ),
+          bottom: -90.h,
+          start: -30.w,
+          child: const MyImage(asset: MyAssets.question),
         ),
         PositionedDirectional(
-          bottom: -90,
-          end: -62,
-          child: MyImage(
-            asset: MyAssets.question,
-            size: 15,
-          ),
+          bottom: -90.h,
+          end: -62.w,
+          child: const MyImage(asset: MyAssets.question, size: 15),
         ),
         PositionedDirectional(
-          bottom: -10,
-          end: 70,
-          child: MyImage(
-            asset: MyAssets.question,
-            size: 15,
-          ),
+          bottom: -10.h,
+          end: 70.w,
+          child: const MyImage(asset: MyAssets.question, size: 15),
         ),
         PositionedDirectional(
-          top: -15,
-          child: MyImage(
-            asset: MyAssets.introStar,
-            size: 75,
-          ),
+          top: -15.h,
+          child: const MyImage(asset: MyAssets.introStar, size: 75),
         ),
       ],
     );
@@ -104,14 +81,14 @@ class IntroPage extends GetView<IntroController> {
 
   Positioned _bottomLoading(BuildContext context) {
     return Positioned(
-      bottom: MySpaces.s16,
+      bottom: 16.h,
       child: Column(
-        spacing: MySpaces.s10,
+        spacing: 10.h,
         mainAxisSize: MainAxisSize.min,
         children: [
           Text(
             context.translate.loading,
-            style: Lexend.regular.copyWith(fontSize: MySpaces.s14),
+            style: Lexend.regular.copyWith(fontSize: 12.sp),
           ),
           const IntroLoading(),
         ],

lib/features/intro/presentation/ui/widgets/intro_loading.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';
 
 class IntroLoading extends StatelessWidget {
   const IntroLoading({
@@ -9,13 +9,13 @@ class IntroLoading extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      width: 188,
-      height: MySpaces.s16,
+      width: 188.w,
+      height: 16.h,
       padding: const EdgeInsetsDirectional.only(
-        start: MySpaces.s2,
-        top: MySpaces.s2,
-        bottom: MySpaces.s2,
-        end: MySpaces.s20,
+        start: 2,
+        top: 2,
+        bottom: 2,
+        end: 20,
       ),
       decoration: const ShapeDecoration(
         shape: StadiumBorder(
@@ -26,7 +26,7 @@ class IntroLoading extends StatelessWidget {
         ),
       ),
       child: Container(
-        height: MySpaces.s14,
+        height: 14.h,
         decoration: ShapeDecoration(
           shape: StadiumBorder(
             side: BorderSide(

lib/features/profile/presentation/ui/profile_page.dart

@@ -1,8 +1,8 @@
 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/my_localization.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/core/widgets/button/my_gradient_button.dart';
 import 'package:shia_game_flutter/core/widgets/input/my_input.dart';
@@ -20,14 +20,13 @@ class ProfilePage extends GetView<ProfileController> {
     return MyBackground(
       child: Column(
         children: [
-          60.0.gapHeight,
           const ProfileAvatar(),
           _changeProfileBtn(context),
-          MySpaces.s40.gapHeight,
+          40.h.gapHeight,
           _userNameInput(context),
-          MySpaces.s28.gapHeight,
+          28.h.gapHeight,
           _locationInput(context),
-          200.0.gapHeight,
+          150.h.gapHeight,
           _bottomButtons(),
         ],
       ),
@@ -51,7 +50,7 @@ class ProfilePage extends GetView<ProfileController> {
   Row _locationInput(BuildContext context) {
     return Row(
       crossAxisAlignment: CrossAxisAlignment.end,
-      spacing: MySpaces.s10,
+      spacing: 10,
       children: [
         Expanded(
           child: MyInput(
@@ -66,7 +65,7 @@ class ProfilePage extends GetView<ProfileController> {
 
   Row _bottomButtons() {
     return const Row(
-      spacing: MySpaces.s20,
+      spacing: 20,
       children: [
         Expanded(child: ProfileDeleteAccount()),
         Expanded(child: ProfileLogout()),

lib/features/profile/presentation/ui/widgets/profile_delete_account.dart

@@ -1,8 +1,8 @@
 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/my_localization.dart';
+import 'package:shia_game_flutter/core/utils/screen_size.dart';
 import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 
 class ProfileDeleteAccount extends StatelessWidget {
@@ -11,9 +11,9 @@ class ProfileDeleteAccount extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MyContainer(
-      height: 58,
+      height: 58.h,
       onTap: () {},
-      borderRadius: const BorderRadius.all(Radius.circular(MySpaces.s12)),
+      borderRadius: const BorderRadius.all(Radius.circular(12)),
       color: context.backgroundColor,
       borderGradient: LinearGradient(
         begin: AlignmentDirectional.centerStart,
@@ -24,14 +24,14 @@ class ProfileDeleteAccount extends StatelessWidget {
         ],
       ),
       padding: const EdgeInsets.symmetric(
-        vertical: MySpaces.s16,
-        horizontal: MySpaces.s28,
+        vertical: 16,
+        horizontal: 28,
       ),
       child: FittedBox(
         child: Text(
           context.translate.delete_account,
           maxLines: 1,
-          style: Lexend.semiBold.copyWith(fontSize: 14, color: const Color(0XFF5F5F88)),
+          style: Lexend.semiBold.copyWith(fontSize: 14.sp, color: const Color(0XFF5F5F88)),
         ),
       ),
     );

lib/features/profile/presentation/ui/widgets/profile_logout.dart

@@ -1,8 +1,8 @@
 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/common_ui/resources/my_text_style.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/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 
@@ -12,23 +12,23 @@ class ProfileLogout extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MyContainer(
-      height: 58,
+      height: 58.h,
       onTap: () {},
-      borderRadius: const BorderRadius.all(Radius.circular(MySpaces.s12)),
+      borderRadius: const BorderRadius.all(Radius.circular(12)),
       color: const Color(0XFF270A59),
       padding: const EdgeInsets.symmetric(
-        vertical: MySpaces.s16,
-        horizontal: MySpaces.s28,
+        vertical: 16,
+        horizontal: 28,
       ),
       child: Row(
-        spacing: MySpaces.s10,
+        spacing: 10,
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           const MyImage(asset: MyAssets.iconLogout),
           FittedBox(
             child: Text(
               context.translate.logout,
-              style: Lexend.semiBold.copyWith(fontSize: 14),
+              style: Lexend.semiBold.copyWith(fontSize: 14.sp),
             ),
           ),
         ],

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,