Merge pull request 'feature/battle_league' (#6) from feature/battle_league into develop

Reviewed-on: #6
4 weeks ago · 68736daa7b
40 changed files with 1193 additions and 71 deletions
--- a/assets/svg/icon_rank.svg
+++ b/assets/svg/icon_rank.svg
@ -0,0 +1,9 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4905 1.28128C14.2839 1.05706 13.9979 0.944945 13.696 0.944945C13.2511 0.944945 12.7267 1.16917 12.0753 1.63363V0.672673C12.0753 0.304304 11.7734 0 11.4238 0H3.79673C3.43127 0 3.14525 0.304304 3.14525 0.656657V1.79379C2.38255 1.21722 1.77874 0.928929 1.28616 0.928929C0.968364 0.928929 0.698238 1.04104 0.491672 1.26527C-0.0485779 1.82583 -0.0167985 2.94695 0.014981 3.93994C0.014981 4.13213 0.0308707 4.32432 0.0308707 4.48448C0.0308707 6.27828 1.79463 7.75175 4.01919 7.86386C4.67067 8.92092 5.79884 10.3624 7.19713 10.6186V12.9089C7.16535 12.9089 7.13357 12.9089 7.10179 12.9089C6.41853 12.9089 5.75117 12.9249 5.2427 13.1652C4.63889 13.4535 4.32109 14.014 4.32109 14.8308V16H10.9312V14.8308C10.9312 14.014 10.6293 13.4374 10.0096 13.1652C9.50114 12.9249 8.84966 12.9089 8.15051 12.9089C8.11873 12.9089 8.08695 12.9089 8.05517 12.9089V10.6186C9.46936 10.3624 10.5975 8.88889 11.249 7.84785C13.3464 7.63964 14.9831 6.21421 14.9831 4.48448C14.9831 4.32432 14.9831 4.14815 14.999 3.93994C14.999 2.96296 15.0466 1.84184 14.4905 1.28128ZM0.857136 4.48448C0.857136 4.30831 0.857136 4.11612 0.841246 3.90791C0.825356 3.21922 0.777687 2.17818 1.07959 1.87387C1.11137 1.84184 1.15904 1.80981 1.27027 1.80981C1.50861 1.80981 2.03297 1.96997 3.12936 2.91491V5.49349C3.12936 5.86186 3.25648 6.42242 3.39949 6.75876C3.39949 6.75876 3.43127 6.82282 3.49483 6.95095C1.9853 6.67868 0.857136 5.68569 0.857136 4.48448ZM14.125 3.90791C14.125 4.11612 14.1092 4.30831 14.1092 4.48448C14.1092 5.60561 13.124 6.56657 11.7575 6.88689C11.8051 6.80681 11.821 6.75876 11.821 6.75876C11.964 6.42242 12.0912 5.86186 12.0912 5.49349V2.70671C13.0287 1.93794 13.4895 1.80981 13.7119 1.80981C13.8231 1.80981 13.8708 1.84184 13.9026 1.87387C14.1727 2.17818 14.1409 3.21922 14.125 3.90791Z" fill="url(#paint0_linear_1_13784)"/>
+<defs>
+<linearGradient id="paint0_linear_1_13784" x1="7.50001" y1="8" x2="7.49996" y2="20.4686" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
--- a/lib/common_ui/resources/my_assets.dart
+++ b/lib/common_ui/resources/my_assets.dart
@ -63,6 +63,7 @@ class MyAssets {
  static const String castAwardGold = 'assets/svg/cast_award_gold.svg';
  static const String castAwardSilver = 'assets/svg/cast_award_silver.svg';
  static const String castAwardBronze = 'assets/svg/cast_award_bronze.svg';
+  static const String iconRank = 'assets/svg/icon_rank.svg';


  /// ----- Audios -----
--- a/lib/core/routers/my_routes.dart
+++ b/lib/core/routers/my_routes.dart
@ -10,6 +10,8 @@ import 'package:shia_game_flutter/features/profile/presentation/binding/profile_
 import 'package:shia_game_flutter/features/profile/presentation/ui/profile_page.dart';
 import 'package:shia_game_flutter/features/sample/presentation/binding/sample_binding.dart';
 import 'package:shia_game_flutter/features/sample/presentation/ui/sample_page.dart';
+import 'package:shia_game_flutter/features/battle_league/presentation/binding/battle_league_binding.dart';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/battle_league_page.dart';
 import 'package:get/get.dart';
 import 'package:shia_game_flutter/features/shop/presentation/binding/shop_binding.dart';
 import 'package:shia_game_flutter/features/shop/presentation/ui/shop_page.dart';
@ -26,6 +28,7 @@ class Routes {
  static const String shopPage = '/shop_page';
  static const String awardsPage = '/awards_page';
  static const String profilePage = '/profile_page';
+  static const String battleLeaguePage = '/battle_league_page';
 }

 List<GetPage> get appPages => [
@ -66,4 +69,9 @@ List<GetPage> get appPages => [
      ),
    ],
  ),
+  GetPage(
+    name: Routes.battleLeaguePage,
+    page: () => const BattleLeaguePage(),
+    binding: BattleLeagueBinding(),
+  ),
 ];
--- a/lib/core/widgets/app_bar/enums/app_bar_type.dart
+++ b/lib/core/widgets/app_bar/enums/app_bar_type.dart
@ -0,0 +1,36 @@
+import 'package:flutter/cupertino.dart';
+import 'package:shia_game_flutter/core/widgets/app_bar/styles/battle_league_app_bar.dart';
+import 'package:shia_game_flutter/core/widgets/app_bar/styles/master_app_bar.dart';
+
+enum AppBarType {
+  master,
+  battleLeague;
+
+  static Map<AppBarType, Widget> title({
+    void Function()? onDiamondTap,
+    void Function()? onFlashTap,
+    void Function()? onShareTap,
+    void Function()? onSettingTap,
+    void Function()? onInfoTap,
+    int? diamondNumber,
+    int? flashNumber,
+    String? title,
+    bool? hasInfo
+  }) {
+    return {
+      AppBarType.master: MasterAppBar(
+        onDiamondTap: onDiamondTap,
+        onFlashTap: onFlashTap,
+        onShareTap: onShareTap,
+        onSettingTap: onSettingTap,
+        diamondNumber: diamondNumber,
+        flashNumber: flashNumber,
+      ),
+      AppBarType.battleLeague: BattleLeagueAppBar(
+        title: title,
+        hasInfo: hasInfo,
+        onInfoTap: onInfoTap,
+      ),
+    };
+  }
+}
--- a/lib/core/widgets/app_bar/master_app_bar.dart
+++ b/lib/core/widgets/app_bar/master_app_bar.dart
@ -1,57 +0,0 @@
-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/theme/my_theme.dart';
-import 'package:shia_game_flutter/core/utils/gap.dart';
-import 'package:shia_game_flutter/core/widgets/app_bar/styles/app_bar_action.dart';
-import 'package:shia_game_flutter/core/widgets/app_bar/styles/app_bar_add_widget.dart';
-
-class MasterAppBar extends StatelessWidget implements PreferredSizeWidget {
-  const MasterAppBar({
-    super.key,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return AppBar(
-      backgroundColor: context.backgroundColor,
-      titleSpacing: MySpaces.s30,
-      title: Row(
-        children: [
-          AppBarAddWidget(
-            onTap: () {},
-            icon: MyAssets.iconDiamond,
-            number: 999,
-            gradientColors: [
-              const Color(0XFF52C3ED),
-              const Color(0XFF4F16A0),
-            ],
-          ),
-          MySpaces.s6.gapWidth,
-          AppBarAddWidget(
-            onTap: () {},
-            icon: MyAssets.iconFlash,
-            number: 54,
-            gradientColors: [
-              const Color(0XFFEFB345),
-              const Color(0XFF4F16A0),
-            ],
-          ),
-          const Spacer(),
-          AppBarAction(
-            icon: MyAssets.iconShare,
-            onTap: () {},
-          ),
-          MySpaces.s12.gapWidth,
-          AppBarAction(
-            icon: MyAssets.iconSetting,
-            onTap: () {},
-          ),
-        ],
-      ),
-    );
-  }
-
-  @override
-  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
-}
--- a/lib/core/widgets/app_bar/my_app_bar.dart
+++ b/lib/core/widgets/app_bar/my_app_bar.dart
@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+import 'package:shia_game_flutter/core/widgets/app_bar/enums/app_bar_type.dart';
+
+class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
+  const MyAppBar({
+    super.key,
+    this.backgroundColor,
+    this.type = AppBarType.master,
+    this.onDiamondTap,
+    this.onFlashTap,
+    this.onInfoTap,
+    this.onSettingTap,
+    this.onShareTap,
+    this.diamondNumber,
+    this.flashNumber,
+    this.title,
+    this.hasInfo,
+  });
+
+  final AppBarType type;
+  final Color? backgroundColor;
+  final VoidCallback? onDiamondTap;
+  final VoidCallback? onFlashTap;
+  final VoidCallback? onInfoTap;
+  final VoidCallback? onSettingTap;
+  final VoidCallback? onShareTap;
+  final int? diamondNumber;
+  final int? flashNumber;
+  final String? title;
+  final bool? hasInfo;
+
+  @override
+  Widget build(BuildContext context) {
+    return AppBar(
+      backgroundColor: backgroundColor,
+      centerTitle: true,
+      titleSpacing: MySpaces.s30,
+      title: AppBarType.title(
+        title: title,
+        diamondNumber: diamondNumber,
+        flashNumber: flashNumber,
+        hasInfo: hasInfo,
+        onDiamondTap: onDiamondTap,
+        onFlashTap: onFlashTap,
+        onInfoTap: onInfoTap,
+        onSettingTap: onSettingTap,
+        onShareTap: onShareTap,
+      )[type],
+      automaticallyImplyLeading: false,
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}
--- a/lib/core/widgets/app_bar/styles/battle_league_app_bar.dart
+++ b/lib/core/widgets/app_bar/styles/battle_league_app_bar.dart
@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/widgets/app_bar/widgets/app_bar_back_button.dart';
+import 'package:shia_game_flutter/core/widgets/app_bar/widgets/app_bar_gradient_title.dart';
+import 'package:shia_game_flutter/core/widgets/app_bar/widgets/app_bar_info.dart';
+
+class BattleLeagueAppBar extends StatelessWidget implements PreferredSizeWidget {
+  const BattleLeagueAppBar({
+    super.key,
+    this.title,
+    this.hasInfo,
+    this.onInfoTap,
+  });
+
+  final String? title;
+  final bool? hasInfo;
+  final VoidCallback? onInfoTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        const AppBarBackButton(),
+        AppBarGradientTitle(title: title ?? ''),
+        Builder(
+          builder: (context) {
+            if(hasInfo ?? false){
+              return AppBarInfo(onTap: onInfoTap);
+            } else {
+              return const SizedBox.shrink();
+            }
+          },
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}
--- a/lib/core/widgets/app_bar/styles/master_app_bar.dart
+++ b/lib/core/widgets/app_bar/styles/master_app_bar.dart
@ -0,0 +1,66 @@
+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/widgets/app_bar/widgets/app_bar_action.dart';
+import 'package:shia_game_flutter/core/widgets/app_bar/widgets/app_bar_add_widget.dart';
+
+class MasterAppBar extends StatelessWidget implements PreferredSizeWidget {
+  const MasterAppBar({
+    super.key,
+    this.onDiamondTap,
+    this.onFlashTap,
+    this.onShareTap,
+    this.onSettingTap,
+    this.diamondNumber,
+    this.flashNumber,
+  });
+
+  final VoidCallback? onDiamondTap;
+  final VoidCallback? onFlashTap;
+  final VoidCallback? onShareTap;
+  final VoidCallback? onSettingTap;
+  final int? diamondNumber;
+  final int? flashNumber;
+
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        AppBarAddWidget(
+          onTap: onDiamondTap,
+          icon: MyAssets.iconDiamond,
+          number: diamondNumber ?? 0,
+          gradientColors: [
+            const Color(0XFF52C3ED),
+            const Color(0XFF4F16A0),
+          ],
+        ),
+        MySpaces.s6.gapWidth,
+        AppBarAddWidget(
+          onTap: onFlashTap,
+          icon: MyAssets.iconFlash,
+          number: flashNumber ?? 0,
+          gradientColors: [
+            const Color(0XFFEFB345),
+            const Color(0XFF4F16A0),
+          ],
+        ),
+        const Spacer(),
+        AppBarAction(
+          icon: MyAssets.iconShare,
+          onTap: onShareTap,
+        ),
+        MySpaces.s12.gapWidth,
+        AppBarAction(
+          icon: MyAssets.iconSetting,
+          onTap: onSettingTap,
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => const Size.fromHeight(kToolbarHeight);
+}
--- a/lib/core/widgets/app_bar/widgets/app_bar_action.dart
+++ b/lib/core/widgets/app_bar/widgets/app_bar_action.dart
@ -4,9 +4,9 @@ import 'package:shia_game_flutter/core/widgets/container/my_container.dart';
 import 'package:shia_game_flutter/core/widgets/image/my_image.dart';

 class AppBarAction extends StatelessWidget {
-  const AppBarAction({super.key, this.icon, this.onTap});
+  const AppBarAction({super.key, required this.icon, this.onTap});

-  final String? icon;
+  final String icon;
  final VoidCallback? onTap;

  @override
@ -23,7 +23,7 @@ class AppBarAction extends StatelessWidget {
        end: AlignmentDirectional.bottomEnd,
        colors: [Color(0XFF823FEB), Color(0XFF4F09BF)],
      ),
-      child: MyImage(asset: icon ?? ''),
+      child: MyImage(asset: icon),
    );
  }
 }
--- a/lib/core/widgets/app_bar/widgets/app_bar_add_widget.dart
+++ b/lib/core/widgets/app_bar/widgets/app_bar_add_widget.dart
@ -10,16 +10,16 @@ import 'package:shia_game_flutter/core/widgets/image/my_image.dart';
 class AppBarAddWidget extends StatelessWidget {
  const AppBarAddWidget({
    super.key,
-    this.icon,
-    this.number,
+    required this.icon,
+    required this.number,
    this.onTap,
-    this.gradientColors,
+    required this.gradientColors,
  });

-  final String? icon;
-  final int? number;
+  final String icon;
+  final int number;
  final VoidCallback? onTap;
-  final List<Color>? gradientColors;
+  final List<Color> gradientColors;

  @override
  Widget build(BuildContext context) {
@ -31,7 +31,7 @@ class AppBarAddWidget extends StatelessWidget {
      borderGradient: LinearGradient(
        begin: AlignmentDirectional.topStart,
        end: AlignmentDirectional.bottomEnd,
-        colors: gradientColors ?? [],
+        colors: gradientColors,
      ),
      padding: const EdgeInsetsDirectional.only(
        start: MySpaces.s8,
@ -40,7 +40,7 @@ class AppBarAddWidget extends StatelessWidget {
      color: context.backgroundColor,
      child: Row(
        children: [
-          MyImage(asset: icon ?? ''),
+          MyImage(asset: icon),
          Expanded(
            child: Text(
              '$number',
--- a/lib/core/widgets/app_bar/widgets/app_bar_back_button.dart
+++ b/lib/core/widgets/app_bar/widgets/app_bar_back_button.dart
@ -0,0 +1,27 @@
+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';
+
+class AppBarBackButton extends StatelessWidget {
+  const AppBarBackButton({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      onTap: () => Get.back(),
+      height: MySpaces.s32,
+      width: MySpaces.s32,
+      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,
+      ),
+    );
+  }
+}
--- a/lib/core/widgets/app_bar/widgets/app_bar_gradient_title.dart
+++ b/lib/core/widgets/app_bar/widgets/app_bar_gradient_title.dart
@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/widgets/text/gradient_text.dart';
+
+class AppBarGradientTitle extends StatelessWidget {
+  const AppBarGradientTitle({
+    super.key,
+    required this.title,
+  });
+
+  final String title;
+
+  @override
+  Widget build(BuildContext context) {
+    return GradientText(
+      text: title,
+      color: const Color(0XFFCAA8FF),
+      fontSize: 22,
+      shadowColor: const Color(0XFF3E1381),
+      offset: const Offset(0, 1.69),
+      blurRadius: 0.84,
+    );
+  }
+}
--- a/lib/core/widgets/app_bar/widgets/app_bar_info.dart
+++ b/lib/core/widgets/app_bar/widgets/app_bar_info.dart
@ -0,0 +1,29 @@
+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';
+
+class AppBarInfo extends StatelessWidget {
+  const AppBarInfo({
+    super.key,
+    this.onTap,
+  });
+
+  final VoidCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      onTap: onTap,
+      height: MySpaces.s32,
+      width: MySpaces.s32,
+      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,
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/data/datasource/battle_league_datasource.dart
+++ b/lib/features/battle_league/data/datasource/battle_league_datasource.dart
@ -0,0 +1,29 @@
+import 'package:shia_game_flutter/core/constants/my_api.dart';
+import 'package:shia_game_flutter/core/network/http_request.dart';
+import 'package:shia_game_flutter/core/params/sample_params.dart';
+import 'package:shia_game_flutter/core/response/base_response.dart';
+import 'package:shia_game_flutter/features/battle_league/data/model/battle_league_model.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/entity/battle_league_entity.dart';
+
+abstract class IBattleLeagueDatasource {
+  Future<BattleLeagueEntity> getData({required SampleParams params});
+}
+
+class BattleLeagueDatasourceImpl implements IBattleLeagueDatasource {
+  final IHttpRequest httpRequest;
+
+  const BattleLeagueDatasourceImpl(this.httpRequest);
+
+  @override
+  Future<BattleLeagueEntity> getData({required SampleParams params}) async {
+    final response = await httpRequest.get(
+      path: MyApi.baseUrl,
+    );
+
+    return BaseResponse.getData<BattleLeagueEntity>(
+      response?['data'],
+      (json) => BattleLeagueModel.fromJson(json),
+    );
+  }
+}
+
--- a/lib/features/battle_league/data/model/battle_league_model.dart
+++ b/lib/features/battle_league/data/model/battle_league_model.dart
@ -0,0 +1,14 @@
+import 'package:shia_game_flutter/features/battle_league/domain/entity/battle_league_entity.dart';
+
+class BattleLeagueModel extends BattleLeagueEntity {
+  const BattleLeagueModel({
+    super.id,
+  });
+
+  factory BattleLeagueModel.fromJson(Map<String, dynamic> json) {
+    return BattleLeagueModel(
+      id: json['id'],
+    );
+  }
+}
+
--- a/lib/features/battle_league/data/repository_impl/battle_league_repository_impl.dart
+++ b/lib/features/battle_league/data/repository_impl/battle_league_repository_impl.dart
@ -0,0 +1,30 @@
+import 'package:flutter/foundation.dart';
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/sample_params.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/battle_league/data/datasource/battle_league_datasource.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/entity/battle_league_entity.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/repository/battle_league_repository.dart';
+
+class BattleLeagueRepositoryImpl implements IBattleLeagueRepository {
+  final IBattleLeagueDatasource datasource;
+
+  const BattleLeagueRepositoryImpl(this.datasource);
+
+  @override
+  Future<DataState<BattleLeagueEntity, MyException>> getData({required SampleParams params}) async {
+    try {
+      final BattleLeagueEntity response = await datasource.getData(params: params);
+      return DataState.success(response);
+    } on MyException catch (e) {
+      return DataState.error(e);
+    } catch (e) {
+      if (kDebugMode) {
+        rethrow;
+      } else {
+        return DataState.error(MyException(errorMessage: '$e'));
+      }
+    }
+  }
+}
+
--- a/lib/features/battle_league/domain/entity/battle_league_entity.dart
+++ b/lib/features/battle_league/domain/entity/battle_league_entity.dart
@ -0,0 +1,15 @@
+import 'package:equatable/equatable.dart';
+
+class BattleLeagueEntity extends Equatable {
+  final int? id;
+
+  const BattleLeagueEntity({
+    this.id,
+  });
+
+  @override
+  List<Object?> get props => [
+        id,
+      ];
+}
+
--- a/lib/features/battle_league/domain/repository/battle_league_repository.dart
+++ b/lib/features/battle_league/domain/repository/battle_league_repository.dart
@ -0,0 +1,9 @@
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/sample_params.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/entity/battle_league_entity.dart';
+
+abstract class IBattleLeagueRepository {
+  Future<DataState<BattleLeagueEntity, MyException>> getData({required SampleParams params});
+}
+
--- a/lib/features/battle_league/domain/usecases/get_battle_league_usecase.dart
+++ b/lib/features/battle_league/domain/usecases/get_battle_league_usecase.dart
@ -0,0 +1,18 @@
+import 'package:shia_game_flutter/core/error_handler/my_exception.dart';
+import 'package:shia_game_flutter/core/params/sample_params.dart';
+import 'package:shia_game_flutter/core/usecase/usecase.dart';
+import 'package:shia_game_flutter/core/utils/data_state.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/entity/battle_league_entity.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/repository/battle_league_repository.dart';
+
+class GetBattleLeagueUseCase implements UseCase<BattleLeagueEntity, SampleParams> {
+  final IBattleLeagueRepository repository;
+
+  const GetBattleLeagueUseCase(this.repository);
+
+  @override
+  Future<DataState<BattleLeagueEntity, MyException>> call(SampleParams params) {
+    return repository.getData(params: params);
+  }
+}
+
--- a/lib/features/battle_league/presentation/binding/battle_league_binding.dart
+++ b/lib/features/battle_league/presentation/binding/battle_league_binding.dart
@ -0,0 +1,21 @@
+import 'package:shia_game_flutter/features/battle_league/presentation/controller/battle_league_controller.dart';
+import 'package:get/get.dart';
+
+class BattleLeagueBinding extends Bindings {
+  @override
+  void dependencies() {
+    Get.put<BattleLeagueController>(BattleLeagueController(Get.find()));
+  }
+
+  Future<void> deleteBindings() async {
+    await Future.wait([
+      Get.delete<BattleLeagueController>(),
+    ]);
+  }
+
+  Future<void> refreshBinding() async {
+    await deleteBindings();
+    dependencies();
+  }
+}
+
--- a/lib/features/battle_league/presentation/controller/battle_league_controller.dart
+++ b/lib/features/battle_league/presentation/controller/battle_league_controller.dart
@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/core/params/sample_params.dart';
+import 'package:shia_game_flutter/core/status/base_status.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/entity/battle_league_entity.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/usecases/get_battle_league_usecase.dart';
+import 'package:get/get.dart';
+
+class BattleLeagueController extends GetxController
+    with StateMixin, GetSingleTickerProviderStateMixin {
+  /// ----- Constructor -----
+  BattleLeagueController(this.getBattleLeagueUseCase);
+
+  @override
+  void onInit() {
+    super.onInit();
+    change('', status: RxStatus.success());
+    tabController = TabController(length: 2, vsync: this);
+  }
+
+  @override
+  void onClose() {
+    textEditingController.dispose();
+    super.onClose();
+  }
+
+  /// ----- UseCases -----
+  final GetBattleLeagueUseCase getBattleLeagueUseCase;
+
+  /// ----- Variables -----
+  final Rx<SampleParams> battleLeagueParams = Rx(SampleParams());
+  final Rx<BattleLeagueEntity> battleLeagueEntity = Rx(const BattleLeagueEntity());
+
+  /// ------ Controllers ------
+  final TextEditingController textEditingController = TextEditingController();
+  late final TabController tabController;
+
+  /// ------ Statuses ------
+  final Rx<BaseStatus> getBattleLeagueStatus = Rx(const BaseInit());
+
+  /// ------ Functions ------
+
+  /// ------ Api Calls ------
+  Future<void> getBattleLeague() async {
+    change('', status: RxStatus.loading());
+    await getBattleLeagueUseCase(battleLeagueParams.value).then(
+      (value) => value.fold(
+        (data) {
+          battleLeagueEntity.value = data;
+          change('', status: RxStatus.success());
+        },
+        (error) {
+          change('', status: RxStatus.error(error.errorMessage));
+        },
+      ),
+    );
+  }
+}
+
--- a/lib/features/battle_league/presentation/ui/battle_league_page.dart
+++ b/lib/features/battle_league/presentation/ui/battle_league_page.dart
@ -0,0 +1,73 @@
+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/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';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/battle_league_start_button.dart';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/battle_league_tab_bar.dart';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/regional_ranking.dart';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/time_ranking.dart';
+
+class BattleLeaguePage extends GetView<BattleLeagueController> {
+  const BattleLeaguePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0XFF390C82),
+      appBar: MyAppBar(
+        type: AppBarType.battleLeague,
+        backgroundColor: context.noColor,
+        title: context.translate.battle_league,
+        hasInfo: true,
+        onInfoTap: () {},
+      ),
+      body: SafeArea(
+        child: Column(
+          children: [
+            MySpaces.s30.gapHeight,
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
+              child: BattleLeagueTabBar(
+                controller: controller.tabController,
+                tabs: [
+                  context.translate.time_ranking,
+                  context.translate.regional_ranking,
+                ],
+              ),
+            ),
+            MySpaces.s12.gapHeight,
+            Expanded(
+              child: TabBarView(
+                controller: controller.tabController,
+                children: const [
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
+                    child: TimeRanking(),
+                  ),
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: MySpaces.s30),
+                    child: RegionalRanking(),
+                  ),
+                ],
+              ),
+            ),
+            56.0.gapHeight,
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: MySpaces.s30),
+              child: BattleLeagueStartButton(
+                title: context.translate.play_now,
+                onTap: () {},
+              ),
+            ),
+            MySpaces.s16.gapHeight,
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/battle_league_start_button.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/battle_league_start_button.dart
@ -0,0 +1,49 @@
+import 'package:flutter/material.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';
+
+class BattleLeagueStartButton extends StatelessWidget {
+  const BattleLeagueStartButton({
+    super.key,
+    this.onTap,
+    this.title,
+  });
+
+  final VoidCallback? onTap;
+  final String? title;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      onTap: onTap,
+      width: context.widthScreen,
+      height: 64,
+      borderRadius: const BorderRadius.all(Radius.circular(20)),
+      borderGradient: const LinearGradient(
+          begin: AlignmentDirectional.topStart,
+          end: AlignmentDirectional.bottomEnd,
+          colors: [
+            Color(0XFFFFD66E),
+            Color(0XFFD28F18),
+          ]
+      ),
+      gradient: const RadialGradient(
+        radius: 5,
+        center: Alignment(-0.5, 0),
+        colors: [
+          Color(0xFFF6BA0C),
+          Color(0xFFCD8402),
+        ],
+      ),
+      child:  GradientText(
+        text: title,
+        fontSize: 22,
+        color: const Color(0xFFF5D69F),
+        offset: const Offset(0, 1.04),
+        blurRadius: 0.52,
+        shadowColor: const Color(0xFFC48F30),
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/battle_league_tab_bar.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/battle_league_tab_bar.dart
@ -0,0 +1,39 @@
+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';
+
+class BattleLeagueTabBar extends StatelessWidget {
+  const BattleLeagueTabBar({
+    super.key,
+    required this.controller,
+    required this.tabs,
+  });
+
+  final TabController controller;
+  final List<String> tabs;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(3),
+      decoration: const BoxDecoration(
+        borderRadius: BorderRadius.all(Radius.circular(MySpaces.s10)),
+        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)),
+          color: Color(0XFF897AB8),
+        ),
+        indicatorSize: TabBarIndicatorSize.tab,
+        labelColor: context.primaryColor,
+        unselectedLabelColor: const Color(0XFF897AB8),
+        labelStyle: Lexend.semiBold.copyWith(fontSize: 14),
+        dividerHeight: 0,
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/filter_ranking_button.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/filter_ranking_button.dart
@ -0,0 +1,42 @@
+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/widgets/container/my_container.dart';
+
+class FilterRankingButton extends StatelessWidget {
+  const FilterRankingButton({
+    super.key,
+    this.onTap,
+    this.title,
+    this.select = false,
+  });
+
+  final VoidCallback? onTap;
+  final String? title;
+  final bool select;
+
+  @override
+  Widget build(BuildContext context) {
+    return MyContainer(
+      onTap: select ? null : onTap,
+      padding: const EdgeInsets.symmetric(vertical: MySpaces.s16),
+      borderRadius: const BorderRadius.all(Radius.circular(7)),
+      color: select ? null : MyColors.black.withValues(alpha: 0.2),
+      gradient: select
+          ? const LinearGradient(
+              begin: Alignment.topCenter,
+              end: Alignment.bottomCenter,
+              colors: [Color(0XFFA672FF), Color(0XFF5B1DC3)],
+            )
+          : null,
+      child: Text(
+        title ?? '',
+        style: Lexend.semiBold.copyWith(
+          fontSize: 12,
+          color: select ? MyColors.white : const Color(0XFFBCA1EA),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/my_ranking_widget.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/my_ranking_widget.dart
@ -0,0 +1,35 @@
+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/widgets/image/my_image.dart';
+
+class MyRankingWidget extends StatelessWidget {
+  const MyRankingWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 48,
+      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,
+          Expanded(
+            child: Text(
+              'Amirreza',
+              style: Lexend.medium.copyWith(fontSize: 12),
+            ),
+          ),
+          MySpaces.s6.gapWidth,
+          const MyImage(asset: MyAssets.iconRank),
+          MySpaces.s6.gapWidth,
+          Text('1234', style: Lexend.black.copyWith(fontSize: 12)),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/ranking_region.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/ranking_region.dart
@ -0,0 +1,35 @@
+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';
+
+class RankingRegion extends StatelessWidget {
+  const RankingRegion({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      spacing: MySpaces.s2,
+      children: [
+        const Icon(
+          Icons.location_on_rounded,
+          size: MySpaces.s18,
+          color: Color(0xFF8249E2),
+        ),
+        Text.rich(
+          style: Lexend.medium.copyWith(fontSize: 12),
+          TextSpan(
+            text: '${context.translate.region}: ',
+            style: const TextStyle(color: Color(0xFF8249E2)),
+            children: [
+              const TextSpan(
+                text: 'Iran - Tehran',
+                style: TextStyle(color: Color(0xFFBCA1EA)),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/ranking_scrollbar.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/ranking_scrollbar.dart
@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:shia_game_flutter/common_ui/resources/my_spaces.dart';
+
+class RankingScrollbar extends StatelessWidget {
+  const RankingScrollbar({
+    super.key,
+    required this.child,
+    required this.scrollController,
+  });
+
+  final Widget child;
+  final ScrollController scrollController;
+
+  @override
+  Widget build(BuildContext context) {
+    return RawScrollbar(
+      controller: scrollController,
+      thumbVisibility: true,
+      thumbColor: const Color(0XFF935BE0),
+      trackColor: const Color(0XFF541E9E),
+      trackRadius: const Radius.circular(10),
+      radius: const Radius.circular(10),
+      thickness: 3,
+      crossAxisMargin: MySpaces.s0,
+      trackVisibility: true,
+      child: child,
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/ranking_time.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/ranking_time.dart
@ -0,0 +1,62 @@
+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/widgets/container/my_container.dart';
+
+class RankingTime extends StatelessWidget {
+  const RankingTime({
+    super.key,
+    required this.filterTitles,
+    required this.selectedIndex,
+  });
+
+  final List<String> filterTitles;
+  final int selectedIndex;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Text(
+          '1ST ${filterTitles[selectedIndex]}',
+          style: Lexend.black.copyWith(
+            fontSize: 14,
+          ),
+        ),
+        MySpaces.s8.gapWidth,
+        Text(
+          '(May 2024)',
+          style: Lexend.medium.copyWith(
+            fontSize: 10,
+          ),
+        ),
+        const Spacer(),
+        MyContainer(
+          height: MySpaces.s32,
+          width: MySpaces.s32,
+          borderRadius: const BorderRadius.all(Radius.circular(7)),
+          color: const Color(0XFF5210AC),
+          child: Icon(
+            Icons.arrow_back_ios_rounded,
+            color: context.primaryColor,
+            size: MySpaces.s18,
+          ),
+        ),
+        MySpaces.s10.gapWidth,
+        MyContainer(
+          height: MySpaces.s32,
+          width: MySpaces.s32,
+          borderRadius: const BorderRadius.all(Radius.circular(7)),
+          color: const Color(0XFF5210AC),
+          child: Icon(
+            Icons.arrow_forward_ios_rounded,
+            color: context.primaryColor,
+            size: MySpaces.s18,
+          ),
+        )
+      ],
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/ranking_widget.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/ranking_widget.dart
@ -0,0 +1,42 @@
+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/widgets/image/my_image.dart';
+
+class RankingWidget extends StatelessWidget {
+  const RankingWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 48,
+      decoration: BoxDecoration(
+        borderRadius: const BorderRadius.all(Radius.circular(MySpaces.s10)),
+        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,
+          Expanded(
+            child: Text(
+              'Amirreza',
+              style: Lexend.medium.copyWith(fontSize: 12),
+            ),
+          ),
+          MySpaces.s6.gapWidth,
+          const MyImage(asset: MyAssets.iconRank),
+          MySpaces.s6.gapWidth,
+          Text('1234', style: Lexend.black.copyWith(fontSize: 12)),
+          MySpaces.s30.gapWidth,
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/battle_league/presentation/ui/widgets/regional_ranking.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/regional_ranking.dart
@ -0,0 +1,91 @@
+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/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';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/ranking_scrollbar.dart';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/ranking_widget.dart';
+
+class RegionalRanking extends StatefulWidget {
+  const RegionalRanking({super.key});
+
+  @override
+  State<RegionalRanking> createState() => _RegionalRankingState();
+}
+
+class _RegionalRankingState extends State<RegionalRanking> {
+  late final List<String> filterTitles;
+  int selectedIndex = 0;
+  final ScrollController scrollController = ScrollController();
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    filterTitles = [
+      context.translate.country,
+      context.translate.city,
+    ];
+  }
+
+  @override
+  void dispose() {
+    scrollController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(
+        top: MySpaces.s12,
+        left: MySpaces.s12,
+        right: MySpaces.s12,
+      ),
+      decoration: const BoxDecoration(
+        borderRadius: BorderRadius.all(Radius.circular(MySpaces.s10)),
+        color: Color(0XFF310D6F),
+      ),
+      child: Column(
+        children: [
+          Row(
+            spacing: MySpaces.s10,
+            children: List.generate(
+              filterTitles.length,
+              (index) => Expanded(
+                child: FilterRankingButton(
+                  onTap: () {
+                    setState(() {
+                      selectedIndex = index;
+                    });
+                  },
+                  title: filterTitles[index],
+                  select: index == selectedIndex,
+                ),
+              ),
+            ),
+          ),
+          MySpaces.s22.gapHeight,
+          const RankingRegion(),
+          MySpaces.s12.gapHeight,
+          Expanded(
+            child: RankingScrollbar(
+              scrollController: scrollController,
+              child: ListView.separated(
+                controller: scrollController,
+                itemCount: 10,
+                padding: const EdgeInsetsDirectional.only(end: MySpaces.s14),
+                itemBuilder: (context, index) => const RankingWidget(),
+                separatorBuilder: (context, index) => MySpaces.s10.gapHeight,
+              ),
+            ),
+          ),
+          const MyRankingWidget(),
+        ],
+      ),
+    );
+  }
+}
+
+
--- a/lib/features/battle_league/presentation/ui/widgets/time_ranking.dart
+++ b/lib/features/battle_league/presentation/ui/widgets/time_ranking.dart
@ -0,0 +1,95 @@
+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/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';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/ranking_time.dart';
+import 'package:shia_game_flutter/features/battle_league/presentation/ui/widgets/ranking_widget.dart';
+
+class TimeRanking extends StatefulWidget {
+  const TimeRanking({super.key});
+
+  @override
+  State<TimeRanking> createState() => _TimeRankingState();
+}
+
+class _TimeRankingState extends State<TimeRanking> {
+  late final List<String> filterTitles;
+  int selectedIndex = 0;
+  final ScrollController scrollController = ScrollController();
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    filterTitles = [
+      context.translate.all_time,
+      context.translate.month,
+      context.translate.week,
+    ];
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    scrollController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(
+        top: MySpaces.s12,
+        left: MySpaces.s12,
+        right: MySpaces.s12,
+      ),
+      decoration: const BoxDecoration(
+        borderRadius: BorderRadius.all(Radius.circular(MySpaces.s10)),
+        color: Color(0XFF310D6F),
+      ),
+      child: Column(
+        children: [
+          Row(
+            spacing: MySpaces.s10,
+            children: List.generate(
+              filterTitles.length,
+              (index) => Expanded(
+                child: FilterRankingButton(
+                  onTap: () {
+                    setState(() {
+                      selectedIndex = index;
+                    });
+                  },
+                  title: filterTitles[index],
+                  select: index == selectedIndex,
+                ),
+              ),
+            ),
+          ),
+          MySpaces.s22.gapHeight,
+          if(selectedIndex != 0) ...{
+            RankingTime(
+              filterTitles: filterTitles,
+              selectedIndex: selectedIndex,
+            ),
+            MySpaces.s12.gapHeight,
+          },
+          Expanded(
+            child: RankingScrollbar(
+              scrollController: scrollController,
+              child: ListView.separated(
+                controller: scrollController,
+                itemCount: 10,
+                padding: const EdgeInsetsDirectional.only(end: MySpaces.s14),
+                itemBuilder: (context, index) => const RankingWidget(),
+                separatorBuilder: (context, index) => MySpaces.s10.gapHeight,
+              ),
+            ),
+          ),
+          const MyRankingWidget(),
+        ],
+      ),
+    );
+  }
+}
--- a/lib/features/master/presentation/ui/master_page.dart
+++ b/lib/features/master/presentation/ui/master_page.dart
@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:shia_game_flutter/core/routers/my_routes.dart';
-import 'package:shia_game_flutter/core/widgets/app_bar/master_app_bar.dart';
+import 'package:shia_game_flutter/core/widgets/app_bar/styles/master_app_bar.dart';
 import 'package:shia_game_flutter/core/widgets/bottom_nav_bar/bottom_nav_bar.dart';
 import 'package:shia_game_flutter/features/master/presentation/controller/master_controller.dart';
 import 'package:get/get.dart';
--- a/lib/init_bindings.dart
+++ b/lib/init_bindings.dart
@ -25,6 +25,10 @@ import 'package:shia_game_flutter/features/sample/data/datasource/sample_datasou
 import 'package:shia_game_flutter/features/sample/data/repository_impl/sample_repository_impl.dart';
 import 'package:shia_game_flutter/features/sample/domain/repository/sample_repository.dart';
 import 'package:shia_game_flutter/features/sample/domain/usecases/get_sample_usecase.dart';
+import 'package:shia_game_flutter/features/battle_league/data/datasource/battle_league_datasource.dart';
+import 'package:shia_game_flutter/features/battle_league/data/repository_impl/battle_league_repository_impl.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/repository/battle_league_repository.dart';
+import 'package:shia_game_flutter/features/battle_league/domain/usecases/get_battle_league_usecase.dart';
 import 'package:shia_game_flutter/features/shop/data/datasource/shop_datasource.dart';
 import 'package:shia_game_flutter/features/shop/data/repository_impl/shop_repository_impl.dart';
 import 'package:shia_game_flutter/features/shop/domain/repository/shop_repository.dart';
@ -68,4 +72,9 @@ void initBindings() {
  Get.lazyPut<IProfileDatasource>(() => ProfileDatasourceImpl(Get.find()), fenix: true);
  Get.lazyPut<IProfileRepository>(() => ProfileRepositoryImpl(Get.find()), fenix: true);
  Get.lazyPut<GetProfileUseCase>(() => GetProfileUseCase(Get.find()), fenix: true);
+
+  /// ----- BattleLeague Feature -----
+  Get.lazyPut<IBattleLeagueDatasource>(() => BattleLeagueDatasourceImpl(Get.find()));
+  Get.lazyPut<IBattleLeagueRepository>(() => BattleLeagueRepositoryImpl(Get.find()));
+  Get.lazyPut<GetBattleLeagueUseCase>(() => GetBattleLeagueUseCase(Get.find()));
 }
--- a/lib/l10n/app_en.arb
+++ b/lib/l10n/app_en.arb
@ -28,5 +28,13 @@
  "second_place": "Second Place",
  "third_place": "Third Place",
  "week": "Week",
-  "do_not_have_award": "Don't Have Award"
+  "month": "Month",
+  "all_time": "All Time",
+  "do_not_have_award": "Don't Have Award",
+  "time_ranking": "Time Ranking",
+  "regional_ranking": "Regional Ranking",
+  "play_now": "Play Now",
+  "country": "Country",
+  "city": "City",
+  "region": "Region"
 }
--- a/lib/l10n/app_localizations.dart
+++ b/lib/l10n/app_localizations.dart
@ -262,11 +262,59 @@ abstract class AppLocalizations {
  /// **'Week'**
  String get week;

+  /// No description provided for @month.
+  ///
+  /// In en, this message translates to:
+  /// **'Month'**
+  String get month;
+
+  /// No description provided for @all_time.
+  ///
+  /// In en, this message translates to:
+  /// **'All Time'**
+  String get all_time;
+
  /// No description provided for @do_not_have_award.
  ///
  /// In en, this message translates to:
  /// **'Don\'t Have Award'**
  String get do_not_have_award;
+
+  /// No description provided for @time_ranking.
+  ///
+  /// In en, this message translates to:
+  /// **'Time Ranking'**
+  String get time_ranking;
+
+  /// No description provided for @regional_ranking.
+  ///
+  /// In en, this message translates to:
+  /// **'Regional Ranking'**
+  String get regional_ranking;
+
+  /// No description provided for @play_now.
+  ///
+  /// In en, this message translates to:
+  /// **'Play Now'**
+  String get play_now;
+
+  /// No description provided for @country.
+  ///
+  /// In en, this message translates to:
+  /// **'Country'**
+  String get country;
+
+  /// No description provided for @city.
+  ///
+  /// In en, this message translates to:
+  /// **'City'**
+  String get city;
+
+  /// No description provided for @region.
+  ///
+  /// In en, this message translates to:
+  /// **'Region'**
+  String get region;
 }

 class _AppLocalizationsDelegate
--- a/lib/l10n/app_localizations_en.dart
+++ b/lib/l10n/app_localizations_en.dart
@ -92,6 +92,30 @@ class AppLocalizationsEn extends AppLocalizations {
  @override
  String get week => 'Week';

+  @override
+  String get month => 'Month';
+
+  @override
+  String get all_time => 'All Time';
+
  @override
  String get do_not_have_award => 'Don\'t Have Award';
+
+  @override
+  String get time_ranking => 'Time Ranking';
+
+  @override
+  String get regional_ranking => 'Regional Ranking';
+
+  @override
+  String get play_now => 'Play Now';
+
+  @override
+  String get country => 'Country';
+
+  @override
+  String get city => 'City';
+
+  @override
+  String get region => 'Region';
 }
--- a/lib/main.dart
+++ b/lib/main.dart
@ -31,7 +31,7 @@ class MainApp extends StatelessWidget {
      fallbackLocale: const Locale('en', 'US'),
      supportedLocales: const [Locale('en', 'US')],
      getPages: appPages,
-      initialRoute: Routes.masterPage,
+      initialRoute: Routes.battleLeaguePage,
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
--- a/pubspec.lock
+++ b/pubspec.lock
@ -73,6 +73,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "2.1.1"
+  draggable_scrollbar:
+    dependency: "direct main"
+    description:
+      name: draggable_scrollbar
+      sha256: a906e27fc1ee056e2942d66989dd0cb5b70a361e7d44af566cfa1b584054eac3
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.0"
  equatable:
    dependency: "direct main"
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -8,6 +8,7 @@ environment:

 dependencies:
  dio: ^5.9.0
+  draggable_scrollbar: ^0.1.0
  equatable: ^2.0.7
  flutter:
    sdk: flutter