CountryProfile PopUp icons and Dotted line added

android/app/.cxx/Debug/29y7472m/arm64-v8a/configure_fingerprint.bin

@@ -2,27 +2,27 @@ C/C++ Structured Logo
 m
 kC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\additional_project_files.txtC
 A
-?com.android.build.gradle.internal.cxx.io.EncodedFileFingerPrint	踌èø2

 äýŸÞø2l
+?com.android.build.gradle.internal.cxx.io.EncodedFileFingerPrint	¥“¡<EFBFBD>ú2

 äýŸÞø2l
 j
-hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\android_gradle_build.json	踌èø2
É ŠþŸÞø2q
+hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\android_gradle_build.json	¥“¡<EFBFBD>ú2
É ŠþŸÞø2q
 o
-mC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\android_gradle_build_mini.json	踌èø2
œ ·þŸÞø2^
+mC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\android_gradle_build_mini.json	¥“¡<EFBFBD>ú2
œ ·þŸÞø2^
 \
-ZC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\build.ninja	踌èø2
݆
 çúŸÞø2b
+ZC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\build.ninja	¥“¡<EFBFBD>ú2
݆
 çúŸÞø2b
 `
-^C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\build.ninja.txt	踌èø2g
+^C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\build.ninja.txt	¥“¡<EFBFBD>ú2g
 e
-cC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\build_file_index.txt	踌èø2

K ÜþŸÞø2h
+cC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\build_file_index.txt	¥“¡<EFBFBD>ú2

K ÜþŸÞø2h
 f
-dC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\compile_commands.json	踌èø2l
+dC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\compile_commands.json	¥“¡<EFBFBD>ú2l
 j
-hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\compile_commands.json.bin	踌èø2	r
+hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\compile_commands.json.bin	¥“¡<EFBFBD>ú2	r
 p
-nC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\metadata_generation_command.txt	踌èø2
+nC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\metadata_generation_command.txt	¥“¡<EFBFBD>ú2
 
à ÔþŸÞø2e
 c
-aC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\prefab_config.json	踌èø2

( ÙþŸÞø2j
+aC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\prefab_config.json	¥“¡<EFBFBD>ú2

( ÙþŸÞø2j
 h
-fC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\symbol_folder_index.txt	踌èø2

] ÙþŸÞø2O
+fC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\arm64-v8a\symbol_folder_index.txt	¥“¡<EFBFBD>ú2

] ÙþŸÞø2O
 M
-KC:\src\flutter\packages\flutter_tools\gradle\src\main\groovy\CMakeLists.txt	踌èø2

§ œ¬ùšõ2
+KC:\src\flutter\packages\flutter_tools\gradle\src\main\groovy\CMakeLists.txt	¥“¡<EFBFBD>ú2

§ œ¬ùšõ2

android/app/.cxx/Debug/29y7472m/armeabi-v7a/configure_fingerprint.bin

@@ -2,27 +2,27 @@ C/C++ Structured Logq
 o
 mC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\additional_project_files.txtC
 A
-?com.android.build.gradle.internal.cxx.io.EncodedFileFingerPrint	“¹Œèø2

 åÇ Þø2n
+?com.android.build.gradle.internal.cxx.io.EncodedFileFingerPrint	á“¡<EFBFBD>ú2

 åÇ Þø2n
 l
-jC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\android_gradle_build.json	“¹Œèø2
Í ïÇ Þø2s
+jC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\android_gradle_build.json	á“¡<EFBFBD>ú2
Í ïÇ Þø2s
 q
-oC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\android_gradle_build_mini.json	“¹Œèø2
  óÇ Þø2`
+oC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\android_gradle_build_mini.json	á“¡<EFBFBD>ú2
  óÇ Þø2`
 ^
-\C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\build.ninja	“¹Œèø2
¥Ü
 ÃÅ Þø2d
+\C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\build.ninja	á“¡<EFBFBD>ú2
¥Ü
 ÃÅ Þø2d
 b
-`C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\build.ninja.txt	“¹Œèø2i
+`C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\build.ninja.txt	á“¡<EFBFBD>ú2i
 g
-eC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\build_file_index.txt	“¹Œèø2

K ýÇ Þø2j
+eC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\build_file_index.txt	á“¡<EFBFBD>ú2

K ýÇ Þø2j
 h
-fC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\compile_commands.json	“¹Œèø2n
+fC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\compile_commands.json	á“¡<EFBFBD>ú2n
 l
-jC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\compile_commands.json.bin	“¹Œèø2	t
+jC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\compile_commands.json.bin	á“¡<EFBFBD>ú2	t
 r
-pC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\metadata_generation_command.txt	“¹Œèø2
+pC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\metadata_generation_command.txt	á“¡<EFBFBD>ú2
 
ê øÇ Þø2g
 e
-cC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\prefab_config.json	“¹Œèø2

( ùÇ Þø2l
+cC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\prefab_config.json	á“¡<EFBFBD>ú2

( ùÇ Þø2l
 j
-hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\symbol_folder_index.txt	“¹Œèø2

_ ùÇ Þø2O
+hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\armeabi-v7a\symbol_folder_index.txt	á“¡<EFBFBD>ú2

_ ùÇ Þø2O
 M
-KC:\src\flutter\packages\flutter_tools\gradle\src\main\groovy\CMakeLists.txt	“¹Œèø2

§ œ¬ùšõ2
+KC:\src\flutter\packages\flutter_tools\gradle\src\main\groovy\CMakeLists.txt	á“¡<EFBFBD>ú2

§ œ¬ùšõ2

android/app/.cxx/Debug/29y7472m/x86/configure_fingerprint.bin

@@ -2,27 +2,27 @@ C/C++ Structured Logi
 g
 eC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\additional_project_files.txtC
 A
-?com.android.build.gradle.internal.cxx.io.EncodedFileFingerPrint	¯¹Œèø2

 ÿò Þø2f
+?com.android.build.gradle.internal.cxx.io.EncodedFileFingerPrint	‰”¡<EFBFBD>ú2

 ÿò Þø2f
 d
-bC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\android_gradle_build.json	°¹Œèø2
½ ¤ó Þø2k
+bC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\android_gradle_build.json	‰”¡<EFBFBD>ú2
½ ¤ó Þø2k
 i
-gC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\android_gradle_build_mini.json	°¹Œèø2
<18> °ó Þø2X
+gC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\android_gradle_build_mini.json	‰”¡<EFBFBD>ú2
<18> °ó Þø2X
 V
-TC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\build.ninja	°¹Œèø2
ýÛ
 ³ï Þø2\
+TC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\build.ninja	‰”¡<EFBFBD>ú2
ýÛ
 ³ï Þø2\
 Z
-XC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\build.ninja.txt	°¹Œèø2a
+XC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\build.ninja.txt	‰”¡<EFBFBD>ú2a
 _
-]C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\build_file_index.txt	°¹Œèø2

K Âó Þø2b
+]C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\build_file_index.txt	‰”¡<EFBFBD>ú2

K Âó Þø2b
 `
-^C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\compile_commands.json	°¹Œèø2f
+^C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\compile_commands.json	‰”¡<EFBFBD>ú2f
 d
-bC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\compile_commands.json.bin	°¹Œèø2	l
+bC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\compile_commands.json.bin	‰”¡<EFBFBD>ú2	l
 j
-hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\metadata_generation_command.txt	°¹Œèø2
+hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\metadata_generation_command.txt	‰”¡<EFBFBD>ú2
 
 ´ó Þø2_
 ]
-[C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\prefab_config.json	°¹Œèø2

( ´ó Þø2d
+[C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\prefab_config.json	‰”¡<EFBFBD>ú2

( ´ó Þø2d
 b
-`C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\symbol_folder_index.txt	°¹Œèø2

W ¹ó Þø2O
+`C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86\symbol_folder_index.txt	‰”¡<EFBFBD>ú2

W ¹ó Þø2O
 M
-KC:\src\flutter\packages\flutter_tools\gradle\src\main\groovy\CMakeLists.txt	°¹Œèø2

§ œ¬ùšõ2
+KC:\src\flutter\packages\flutter_tools\gradle\src\main\groovy\CMakeLists.txt	‰”¡<EFBFBD>ú2

§ œ¬ùšõ2

android/app/.cxx/Debug/29y7472m/x86_64/configure_fingerprint.bin

@@ -2,27 +2,27 @@ C/C++ Structured Logl
 j
 hC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\additional_project_files.txtC
 A
-?com.android.build.gradle.internal.cxx.io.EncodedFileFingerPrint	ɹŒèø2

 ù”¡Þø2i
+?com.android.build.gradle.internal.cxx.io.EncodedFileFingerPrint	Ž•¡<EFBFBD>ú2

 ù”¡Þø2i
 g
-eC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\android_gradle_build.json	ɹŒèø2
à ‚•¡Þø2n
+eC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\android_gradle_build.json	Ž•¡<EFBFBD>ú2
à ‚•¡Þø2n
 l
-jC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\android_gradle_build_mini.json	ɹŒèø2
– †•¡Þø2[
+jC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\android_gradle_build_mini.json	Ž•¡<EFBFBD>ú2
– †•¡Þø2[
 Y
-WC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\build.ninja	ɹŒèø2
Ά
 þ’¡Þø2_
+WC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\build.ninja	’•¡<EFBFBD>ú2
Ά
 þ’¡Þø2_
 ]
-[C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\build.ninja.txt	ɹŒèø2d
+[C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\build.ninja.txt	’•¡<EFBFBD>ú2d
 b
-`C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\build_file_index.txt	ɹŒèø2

K <20>•¡Þø2e
+`C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\build_file_index.txt	’•¡<EFBFBD>ú2

K <20>•¡Þø2e
 c
-aC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\compile_commands.json	ɹŒèø2i
+aC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\compile_commands.json	’•¡<EFBFBD>ú2i
 g
-eC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\compile_commands.json.bin	ɹŒèø2	o
+eC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\compile_commands.json.bin	’•¡<EFBFBD>ú2	o
 m
-kC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\metadata_generation_command.txt	ɹŒèø2
+kC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\metadata_generation_command.txt	’•¡<EFBFBD>ú2
 
Ñ ‰•¡Þø2b
 `
-^C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\prefab_config.json	ɹŒèø2

( ‹•¡Þø2g
+^C:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\prefab_config.json	’•¡<EFBFBD>ú2

( ‹•¡Þø2g
 e
-cC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\symbol_folder_index.txt	ɹŒèø2

Z Œ•¡Þø2O
+cC:\Flutter Applications\Git_New\FCSC\android\app\.cxx\Debug\29y7472m\x86_64\symbol_folder_index.txt	’•¡<EFBFBD>ú2

Z Œ•¡Þø2O
 M
-KC:\src\flutter\packages\flutter_tools\gradle\src\main\groovy\CMakeLists.txt	ɹŒèø2

§ œ¬ùšõ2
+KC:\src\flutter\packages\flutter_tools\gradle\src\main\groovy\CMakeLists.txt	’•¡<EFBFBD>ú2

§ œ¬ùšõ2

lib/infrastructure/services/img_asset_paths/icons/popup_asset_path.dart

@@ -0,0 +1,17 @@
+abstract class PopupAssetPath {
+  static const _basePath = 'assets/country-profile/icons';
+  static const capital = '$_basePath/capital.png';
+  static const area = '$_basePath/area.png';
+  static const exports = '$_basePath/exports.png';
+  static const female = '$_basePath/female.png';
+  static const imports = '$_basePath/imports.png';
+  static const IncomeLevel = '$_basePath/IncomLevel.png';
+  static const inflows = '$_basePath/inflows.png';
+  static const male = '$_basePath/male.png';
+  static const nominal = '$_basePath/nominal.png';
+  static const outflows = '$_basePath/outflows.png';
+  static const perCapita = '$_basePath/perCapita.png';
+  static const population = '$_basePath/population.png';
+  static const real = '$_basePath/real.png';
+
+}

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

@@ -1,6 +1,7 @@
 import 'dart:ui';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
+import 'package:dotted_border/dotted_border.dart';
+import 'package:uae_stat/infrastructure/services/img_asset_paths/icons/popup_asset_path.dart';
 import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart';
 
 class DetailedCountryProfilePage extends StatelessWidget {
@@ -281,56 +282,66 @@ class CategoryPopupContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final lineBorder=Padding(
+      padding: const EdgeInsets.only(top:8.0,bottom: 8.0),
+      child: DottedBorder(
+        borderPadding: EdgeInsets.zero,
+        padding: EdgeInsets.zero,
+        dashPattern: [8, 4],
+        strokeWidth: 2,
+        color: Colors.grey,
+        child: SizedBox(
+          width: double.maxFinite,
+          height: 0,
+        ),
+      ),
+    );
     switch (category) {
       case 'Demography':
         return Column(
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            const SizedBox(height: 8),
-            Container(
-              width: 50,
-              height: 5,
-              decoration: BoxDecoration(
-                color: Colors.grey[300],
-                borderRadius: BorderRadius.circular(10),
-              ),
-            ),
             const SizedBox(height: 16),
             _DemographyItem(
-              icon: Icons.location_city,
+              icon: PopupAssetPath.capital,
               title: 'Capital City',
               value: 'Buenos Aires',
             ),
-            const Divider(),
+            lineBorder,
             _DemographyItem(
-              icon: Icons.map,
+              icon: PopupAssetPath.area,
               title: 'Surface Area',
               value: '2,780,400 sq. km',
             ),
-            const Divider(),
+            lineBorder,
             _DemographyStatItem(
-              icon: Icons.groups,
+              icon: PopupAssetPath.population,
               title: '2021 Population',
               value: '45.81 M',
-              suffix: '32 ↑ Rank',
+              suffix: '32',
-              suffixStyle: const TextStyle(color: Colors.green, fontSize: 12),
+              arrow:Icons.arrow_upward,
+              suffixText: 'Rank',
             ),
-            const Divider(),
+            lineBorder,
             _DemographyStatItem(
-              icon: Icons.male,
+              icon: PopupAssetPath.male,
               title: '2021 Male Population',
               value: '22.35 M',
-              suffix: '0.98% ↑ Growth Rate',
+              suffix: '0.98%',
-              valueColor: Colors.deepPurple,
+              arrow:Icons.arrow_upward,
+              suffixText: 'Growth Rate',
+              valueColor: Color(0xFF00205B),
             ),
-            const Divider(),
+            lineBorder,
             _DemographyStatItem(
-              icon: Icons.female,
+              icon:PopupAssetPath.female,
               title: '2021 Female Population',
               value: '23.46 M',
-              suffix: '0.93% ↑ Growth Rate',
+              suffix: '0.93%',
-              valueColor: Colors.purple,
+              arrow:Icons.arrow_upward,
+              suffixText: 'Growth Rate',
+              valueColor: Color(0xFF751398),
             ),
             const SizedBox(height: 16),
           ],
@@ -340,43 +351,34 @@ class CategoryPopupContent extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            const SizedBox(height: 8),
-            Container(
-              width: 50,
-              height: 5,
-              decoration: BoxDecoration(
-                color: Colors.grey[300],
-                borderRadius: BorderRadius.circular(10),
-              ),
-            ),
             const SizedBox(height: 16),
             _GDPMetricItem(
-              icon: Icons.apartment,
+              icon: PopupAssetPath.nominal,
               title: '2021 Nominal GDP (AED)',
               value: '1.8 T',
               rank: '26',
-              rankDirection: '↓',
+              rankDirection: Icons.arrow_downward,
-              rankColor: Colors.red,
+              rankColor: Color(0xFFED1C24),
             ),
-            const Divider(),
+            lineBorder,
             _GDPMetricItem(
-              icon: Icons.public,
+              icon: PopupAssetPath.real,
               title: '2021 Real GDP (AED)',
               value: '2.08 T',
               rank: '22',
-              rankDirection: '↓',
+              rankDirection: Icons.arrow_downward,
-              rankColor: Colors.red,
+              rankColor: Color(0xFFED1C24),
             ),
-            const Divider(),
+            lineBorder,
             _GDPMetricItem(
-              icon: Icons.groups_3,
+              icon: PopupAssetPath.perCapita,
               title: '2021 GDP Per Capita (AED)',
               value: '39.38 K',
               rank: '64',
-              rankDirection: '↓',
+              rankDirection: Icons.arrow_downward,
-              rankColor: Colors.red,
+              rankColor: Color(0xFFED1C24),
             ),
-            const Divider(),
+            lineBorder,
             const SizedBox(height: 8),
             const Icon(Icons.stacked_bar_chart, color: Colors.grey),
             const SizedBox(height: 4),
@@ -397,15 +399,6 @@ class CategoryPopupContent extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            const SizedBox(height: 8),
-            Container(
-              width: 50,
-              height: 5,
-              decoration: BoxDecoration(
-                color: Colors.grey[300],
-                borderRadius: BorderRadius.circular(10),
-              ),
-            ),
             const SizedBox(height: 16),
             _FDIItem(
               icon: Icons.trending_down,
@@ -414,7 +407,7 @@ class CategoryPopupContent extends StatelessWidget {
               growthRate: '-15.94%',
               isPositive: false,
             ),
-            const Divider(),
+            lineBorder,
             _FDIItem(
               icon: Icons.swap_horizontal_circle_outlined,
               title: '2020 FDI Inflows (AED)',
@@ -422,7 +415,7 @@ class CategoryPopupContent extends StatelessWidget {
               growthRate: '-39.68%',
               isPositive: false,
             ),
-            const Divider(),
+            lineBorder,
             _FDIItem(
               icon: Icons.thumb_up_alt_outlined,
               title: '2021 FDI Stocks (AED)',
@@ -438,15 +431,6 @@ class CategoryPopupContent extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            const SizedBox(height: 8),
-            Container(
-              width: 50,
-              height: 5,
-              decoration: BoxDecoration(
-                color: Colors.grey[300],
-                borderRadius: BorderRadius.circular(10),
-              ),
-            ),
             const SizedBox(height: 16),
             _TradeItem(
               icon: Icons.cached,
@@ -455,7 +439,7 @@ class CategoryPopupContent extends StatelessWidget {
               growthRate: '39.89%',
               isPositive: true,
             ),
-            const Divider(),
+            lineBorder,
             _TradeItem(
               icon: Icons.download_outlined,
               title: '2021 Imports (AED)',
@@ -463,7 +447,7 @@ class CategoryPopupContent extends StatelessWidget {
               growthRate: '40.79%',
               isPositive: true,
             ),
-            const Divider(),
+            lineBorder,
             _TradeItem(
               icon: Icons.upload_outlined,
               title: '2021 Exports (AED)',
@@ -479,17 +463,6 @@ class CategoryPopupContent extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            const SizedBox(height: 8),
-            Center(
-              child: Container(
-                width: 50,
-                height: 5,
-                decoration: BoxDecoration(
-                  color: Colors.grey[300],
-                  borderRadius: BorderRadius.circular(10),
-                ),
-              ),
-            ),
             const SizedBox(height: 16),
             const Center(
               child: Text(
@@ -563,15 +536,19 @@ class CategoryPopupContent extends StatelessWidget {
 }
 
 Widget _DemographyItem({
-  required IconData icon,
+  required String icon,
   required String title,
   required String value,
 }) {
   return Column(
     children: [
-      Icon(icon, size: 32, color: Colors.grey),
+      Image.asset(
+        icon,
+        width: 40,
+          height: 40,
+      ),
       const SizedBox(height: 4),
-      Text(title, style: const TextStyle(color: Colors.grey)),
+      Text(title, style: const TextStyle(color: Color(0xFF666666))),
       const SizedBox(height: 4),
       Text(
         value,
@@ -583,83 +560,113 @@ Widget _DemographyItem({
 }
 
 Widget _DemographyStatItem({
-  required IconData icon,
+  required String icon,
   required String title,
   required String value,
   String? suffix,
+  IconData? arrow,
+  String ? suffixText,
   TextStyle? suffixStyle,
   Color? valueColor,
 }) {
   return Column(
     children: [
-      Icon(icon, size: 32, color: Colors.grey),
+      Image.asset(
+        icon,
+        width: 40,
+        height: 40,
+      ),
       const SizedBox(height: 4),
-      Text(title, style: const TextStyle(color: Colors.grey)),
+      Text(title, style: const TextStyle(color: Color(0xFF666666))),
       const SizedBox(height: 4),
-      RichText(
+      Row(
-        textAlign: TextAlign.center,
+        mainAxisAlignment: MainAxisAlignment.center,
-        text: TextSpan(
         children: [
-            TextSpan(
+          Text(
-              text: '$value ',
+            value,
             style: TextStyle(
               fontWeight: FontWeight.bold,
-                fontSize: 16,
+              fontSize: 28,
               color: valueColor ?? Colors.black,
             ),
           ),
+          SizedBox(width: 6,),
           if (suffix != null)
-              TextSpan(
+            Column(
-                text: suffix,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    Text(
+                      suffix,
                       style: suffixStyle ??
-                    const TextStyle(fontSize: 12, color: Colors.green),
+                          const TextStyle(fontSize: 16, color: Colors.green,fontWeight: FontWeight.w500),
+                    ),
+                    Icon(arrow, size: 16, color: Colors.green),
+                  ],
+                ),
+                Text(
+                  suffixText!,
+                  style: suffixStyle ??
+                      const TextStyle(fontSize: 12, color: Color(0xFF666666)),
                 ),
               ],
             ),
-      ),
+        ],
+      )
+
     ],
   );
 }
 
 Widget _GDPMetricItem({
-  required IconData icon,
+  required String icon,
   required String title,
   required String value,
   required String rank,
-  required String rankDirection,
+  required IconData rankDirection,
   required Color rankColor,
 }) {
   return Column(
     children: [
-      Icon(icon, size: 32, color: Colors.grey),
+      Image.asset(
+        icon,
+        width: 40,
+        height: 40,
+      ),
       const SizedBox(height: 4),
-      Text(title, style: const TextStyle(color: Colors.grey)),
+      Text(title, style: const TextStyle(color: Color(0xFF666666))),
       const SizedBox(height: 4),
-      RichText(
+      Row(
-        textAlign: TextAlign.center,
+        mainAxisAlignment: MainAxisAlignment.center,
-        text: TextSpan(
         children: [
-            TextSpan(
+          Text(
-              text: '$value ',
+            value,
-              style: const TextStyle(
+            style: TextStyle(
               fontWeight: FontWeight.bold,
-                fontSize: 18,
+              fontSize: 28,
               color: Colors.black,
             ),
           ),
-            TextSpan(
+          SizedBox(width: 12,),
-              text: '$rank $rankDirection\n',
+            Column(
-              style: TextStyle(
+              crossAxisAlignment: CrossAxisAlignment.start,
-                fontSize: 12,
+              children: [
-                color: rankColor,
+                Row(
+                  children: [
+                    Text(
+                      rank,
+                      style: TextStyle(fontSize: 16, color:rankColor,fontWeight: FontWeight.w500),),
+                    Icon(rankDirection, size: 16, color: rankColor),
+                  ],
                 ),
-            ),
+                Text(
-            const TextSpan(
+                  'Rank',
-              text: 'Rank',
+                  style: const TextStyle(fontSize: 12, color: Color(0xFF666666)),
-              style: TextStyle(fontSize: 10, color: Colors.grey),
                 ),
               ],
             ),
+        ],
       ),
     ],
   );
@@ -808,11 +815,8 @@ void showCategoryPopup(BuildContext context, String category) {
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(16),
         ),
-        child: Padding(
-          padding: const EdgeInsets.all(16.0),
           child: CategoryPopupContent(category: category),
       ),
     ),
-    ),
   );
 }

pubspec.lock

@@ -433,6 +433,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.1"
+  dotted_border:
+    dependency: "direct main"
+    description:
+      name: dotted_border
+      sha256: "108837e11848ca776c53b30bc870086f84b62ed6e01c503ed976e8f8c7df9c04"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   equatable:
     dependency: transitive
     description:
@@ -1156,6 +1164,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.9.1"
+  path_drawing:
+    dependency: transitive
+    description:
+      name: path_drawing
+      sha256: bbb1934c0cbb03091af082a6389ca2080345291ef07a5fa6d6e078ba8682f977
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
   path_parsing:
     dependency: transitive
     description:

pubspec.yaml

@@ -27,6 +27,7 @@ dependencies:
   url_launcher: ^6.3.1
   path_provider: ^2.1.5
   screenshot: ^3.0.0
+  dotted_border: 2.1.0
   # dynamic_layouts:
   #   git:
   #     url: https://github.com/flutter/packages.git
@@ -162,6 +163,7 @@ flutter:
     - assets/country-profile/
     - assets/country-profile/CategoryFile/
     - assets/competitiveness/
+    - assets/country-profile/icons/
 
   fonts:
     - family: Segoe