merge

lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart

@@ -28,7 +28,7 @@ class ReportDetailPage extends StatelessWidget {
             Container(
               padding: const EdgeInsets.all(12),
               decoration: BoxDecoration(
-                color: Colors.grey.shade200,
+                color: Colors.grey.shade100,
                 borderRadius: BorderRadius.circular(12),
               ),
               child: Row(
@@ -60,21 +60,38 @@ class ReportDetailPage extends StatelessWidget {
             const SizedBox(height: 24),
 
             // Ranking section
-            Row(
+            Container(
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+              decoration: BoxDecoration(
+                color: Colors.grey[100],
+                borderRadius: BorderRadius.circular(12),
+              ),
+              padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+              child: Row(
                 children: [
-                _RankingCard(
+                  Expanded(
+                    child: _RankingCard(
                       title: 'Rank in 2023',
                       value: '44',
-                  icon: const Icon(Icons.arrow_downward, color: Colors.red, size: 25, weight: 50),
+                      icon: const Icon(Icons.arrow_downward, color: Colors.red, size: 25),
                     ),
-                _RankingCard(
+                  ),
+                  SizedBox(
+                    height: 60,
+                    width: 1,
+                    child: CustomPaint(
+                      painter: DottedLinePainter(),
+                    ),
+                  ),
+                  Expanded(
+                    child: _RankingCard(
                       title: 'vs. Previous Edition',
                       value: '41',
                       icon: const SizedBox.shrink(),
                     ),
+                  ),
                 ],
               ),
+            ),
             const SizedBox(height: 24),
 
             // Country ranking section
@@ -91,7 +108,10 @@ class ReportDetailPage extends StatelessWidget {
                     country: 'DENMARK',
                     flagPath: 'assets/country_flags/de.png',
                   ),
-                  const Divider(),
+                  const Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 8),
+                    child: DottedDivider(),
+                  ),
                   _CountryRankingItem(
                     title: 'First in GCC',
                     country: 'MULTIPLE COUNTRIES',
@@ -122,7 +142,10 @@ class ReportDetailPage extends StatelessWidget {
                       ),
                     ),
                   ),
-                  const Divider(),
+                  const Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 8),
+                    child: DottedDivider(),
+                  ),
                   _CountryRankingItem(
                     title: 'First in Arab Countries',
                     country: 'UNITED ARAB EMIRATES',
@@ -157,7 +180,6 @@ class _RankingCard extends StatelessWidget {
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
         color: Colors.grey[100],
-        borderRadius: BorderRadius.circular(12),
       ),
       child: Column(
         children: [
@@ -271,3 +293,55 @@ class _CountryItem extends StatelessWidget {
     );
   }
 }
+class DottedLinePainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    const double dashHeight = 3, dashSpace = 2;
+    double startY = 0;
+    final paint = Paint()
+      ..color = Colors.grey
+      ..strokeWidth = 0.8;
+
+    while (startY < size.height) {
+      canvas.drawLine(Offset(0, startY), Offset(0, startY + dashHeight), paint);
+      startY += dashHeight + dashSpace;
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}
+
+class HorizontalDottedLinePainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    const double dashWidth = 3, dashSpace = 2;
+    double startX = 0;
+    final paint = Paint()
+      ..color = Colors.grey
+      ..strokeWidth = 0.8;
+
+    while (startX < size.width) {
+      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
+      startX += dashWidth + dashSpace;
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}
+
+class DottedDivider extends StatelessWidget {
+  const DottedDivider({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: HorizontalDottedLinePainter(),
+      child: const SizedBox(
+        height: 1,
+        width: double.infinity,
+      ),
+    );
+  }
+}

lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart

@@ -164,24 +164,20 @@ class _LeaderCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(8),
+      child: Container(
         width: 170,
         height: 100,
         decoration: BoxDecoration(
           color: Colors.white,
-        borderRadius: BorderRadius.circular(12),
         ),
         child: Row(
           children: [
             ClipRRect(
-            borderRadius: const BorderRadius.only(
+              borderRadius: BorderRadius.circular(12),
-              topLeft: Radius.circular(12),
-              bottomLeft: Radius.circular(12),
-            ),
               child: Image.asset(
                 imagePath,
-              height: double.infinity,
-              width: 80,
                 fit: BoxFit.cover,
               ),
             ),
@@ -199,8 +195,8 @@ class _LeaderCard extends StatelessWidget {
                         fontSize: 10,
                         color: Colors.grey.shade600,
                       ),
-                    maxLines: 2,
+                      // maxLines: 2,
-                    overflow: TextOverflow.ellipsis,
+                      overflow: TextOverflow.visible,
                     ),
                     const SizedBox(height: 4),
                     Text(
@@ -209,8 +205,8 @@ class _LeaderCard extends StatelessWidget {
                         fontWeight: FontWeight.bold,
                         fontSize: 12,
                       ),
-                    maxLines: 2,
+                      // maxLines: 2,
-                    overflow: TextOverflow.ellipsis,
+                      // overflow: TextOverflow.visible,
                     ),
                   ],
                 ),
@@ -218,6 +214,7 @@ class _LeaderCard extends StatelessWidget {
             ),
           ],
         ),
+      ),
     );
   }
 }