M3-216 Feat : 랭킹 디자인 수정

lib/constants/text_styles.dart

@@ -27,6 +27,12 @@ class TextStyles {
     fontWeight: FontWeight.w600,
   );
 
+  static TextStyle fs17w600cTextBlack = TextStyle(
+    color: AppColors.textBlack,
+    fontSize: 17,
+    fontWeight: FontWeight.w600,
+  );
+
   static TextStyle fs17w700cTextPrimary = TextStyle(
     fontSize: 17,
     fontWeight: FontWeight.w700,
@@ -57,6 +63,12 @@ class TextStyles {
     fontWeight: FontWeight.w500,
   );
 
+  static TextStyle fs14w800cTextPrimary = TextStyle(
+    color: AppColors.textPrimary,
+    fontSize: 14,
+    fontWeight: FontWeight.w800,
+  );
+
   static TextStyle fs14w500cTextSecondary = TextStyle(
     color: AppColors.textSecondary,
     fontSize: 14,

lib/widgets/ranking/my_ranking_info.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:ground_flip/widgets/ranking/ranking_info.dart';
 
 import '../../constants/app_colors.dart';
 import '../../constants/text_styles.dart';
 import '../../controllers/ranking_controller.dart';
-import 'ranking_info.dart';
 
 class MyRankingInfo extends StatelessWidget {
   const MyRankingInfo({super.key});
@@ -16,43 +16,39 @@ class MyRankingInfo extends StatelessWidget {
     return Obx(() {
       return Container(
         decoration: BoxDecoration(
-          border: Border.all(
-            color: Color.lerp(
+          gradient: LinearGradient(
+            colors: [
+              AppColors.secondary,
               AppColors.primary,
-              AppColors.background,
-              rankingController.t.value,
-            )!, // 경계선 색상
-            width: 1,
-          ),
-          color: Color.lerp(
-            AppColors.backgroundSecondary,
-            AppColors.background,
-            rankingController.t.value,
+            ],
+            begin: Alignment.topLeft,
+            end: Alignment.bottomRight,
           ),
           borderRadius: BorderRadius.all(Radius.circular(16)),
         ),
         child: Padding(
-          padding: EdgeInsets.all(rankingController.myRankingInfoPadding.value),
+          // padding: EdgeInsets.all(rankingController.myRankingInfoPadding.value),
+          padding: EdgeInsets.all(20),
           child: Column(
             children: [
-              RankingInfo(
+              RankingInfoMy(
                 ranking: rankingController.getMyRanking(),
               ),
               SizedBox(height: rankingController.myRankingInfoPadding.value),
               Container(
                 padding: EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
                 height: rankingController.myRankingInfoHeight.value,
                 decoration: BoxDecoration(
-                  color: AppColors.secondary,
+                  color: Color(0x80333333),
                   borderRadius: BorderRadius.circular(20.0),
                 ),
                 child: Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
                     Text(
-                      '3px 더 먹으면 순위 상승!',
-                      style: TextStyles.fs14w500cPrimary,
+                      '오늘 하루도 파이팅!',
+                      style: TextStyles.fs14w800cTextPrimary,
                     ),
                   ],
                 ),

lib/widgets/ranking/ranking_info.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:intl/intl.dart';
 
-import '../../constants/app_colors.dart';
 import '../../constants/text_styles.dart';
 import '../../models/ranking.dart';
 
@@ -13,6 +12,93 @@ class RankingInfo extends StatelessWidget {
 
   final Ranking ranking;
 
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Rank(rank: ranking.rank),
+        SizedBox(width: 10),
+        ClipOval(
+          child: ranking.profileImageUrl != null
+              ? Image.network(
+                  ranking.profileImageUrl!,
+                  cacheWidth: 100,
+                  width: 30,
+                  height: 30,
+                  fit: BoxFit.cover,
+                )
+              : Image.asset(
+                  'assets/images/default_profile_image.png',
+                  width: 30,
+                  height: 30,
+                ),
+        ),
+        SizedBox(width: 10),
+        Expanded(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(ranking.nickname, style: TextStyles.fs17w600cTextPrimary),
+              Spacer(),
+              if (ranking.currentPixelCount != null)
+                Text(
+                  '${NumberFormat('###,###,###').format(ranking.currentPixelCount)}px',
+                  style: TextStyles.fs17w700cPrimary,
+                ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class Rank extends StatelessWidget {
+  static List<String> medalImages = [
+    "assets/images/1st_place_medal.png",
+    "assets/images/2nd_place_medal.png",
+    "assets/images/3rd_place_medal.png",
+  ];
+  final int? rank;
+
+  const Rank({super.key, required this.rank});
+
+  @override
+  Widget build(BuildContext context) {
+    if (rank == null) {
+      return SizedBox(
+        width: 30,
+        height: 30,
+        child: Center(
+          child: Text('?', style: TextStyles.fs20w800cTextPrimary),
+        ),
+      );
+    } else if (rank! <= 3 && rank! >= 1) {
+      return Image.asset(
+        medalImages[rank! - 1],
+        width: 30,
+        height: 30,
+      );
+    } else {
+      return SizedBox(
+        width: 30,
+        height: 30,
+        child: Center(
+          child: Text(rank.toString(), style: TextStyles.fs20w800cTextPrimary),
+        ),
+      );
+    }
+  }
+}
+
+class RankingInfoMy extends StatelessWidget {
+  const RankingInfoMy({
+    super.key,
+    required this.ranking,
+  });
+
+  final Ranking ranking;
+
   @override
   Widget build(BuildContext context) {
     return Row(
@@ -46,21 +132,21 @@ class RankingInfo extends StatelessWidget {
             ],
           ),
         ),
-        Rank(rank: ranking.rank),
+        MyRank(rank: ranking.rank),
       ],
     );
   }
 }
 
-class Rank extends StatelessWidget {
+class MyRank extends StatelessWidget {
   static List<String> medalImages = [
     "assets/images/1st_place_medal.png",
     "assets/images/2nd_place_medal.png",
     "assets/images/3rd_place_medal.png",
   ];
   final int? rank;
 
-  const Rank({super.key, required this.rank});
+  const MyRank({super.key, required this.rank});
 
   @override
   Widget build(BuildContext context) {
@@ -69,7 +155,7 @@ class Rank extends StatelessWidget {
         width: 44,
         height: 44,
         decoration: BoxDecoration(
-          color: AppColors.backgroundThird,
+          color: Color(0x80333333),
           borderRadius: BorderRadius.all(Radius.circular(22)),
         ),
         child: Center(
@@ -87,7 +173,7 @@ class Rank extends StatelessWidget {
         width: 44,
         height: 44,
         decoration: BoxDecoration(
-          color: AppColors.backgroundThird,
+          color: Color(0x80333333),
           borderRadius: BorderRadius.all(Radius.circular(22)),
         ),
         child: Center(

lib/widgets/ranking/ranking_list.dart

@@ -70,7 +70,7 @@ class RankingSection extends StatelessWidget {
           for (int i = 0; i < rankings.length; i++)
             RankingListElement(
               ranking: rankings[i],
-              isLast: false,
+              isLast: i == rankings.length - 1 ? true : false,
             ),
         ],
       ),

lib/widgets/ranking/ranking_list_element.dart

@@ -30,7 +30,7 @@ class RankingListElement extends StatelessWidget {
           ),
         ),
         child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 20),
+          padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 16),
           child: RankingInfo(
             ranking: ranking,
           ),