diff --git a/assets/competitiveness/multi.png b/assets/competitiveness/multi.png new file mode 100644 index 00000000..534a48cf Binary files /dev/null and b/assets/competitiveness/multi.png differ diff --git a/assets/country-profile/icons/IncomLevel.png b/assets/country-profile/icons/IncomLevel.png new file mode 100644 index 00000000..80b2f40d Binary files /dev/null and b/assets/country-profile/icons/IncomLevel.png differ diff --git a/assets/country-profile/icons/animal.png b/assets/country-profile/icons/animal.png new file mode 100644 index 00000000..43ffbba2 Binary files /dev/null and b/assets/country-profile/icons/animal.png differ diff --git a/assets/country-profile/icons/area.png b/assets/country-profile/icons/area.png new file mode 100644 index 00000000..9af57239 Binary files /dev/null and b/assets/country-profile/icons/area.png differ diff --git a/assets/country-profile/icons/capital.png b/assets/country-profile/icons/capital.png new file mode 100644 index 00000000..b97308ba Binary files /dev/null and b/assets/country-profile/icons/capital.png differ diff --git a/assets/country-profile/icons/chemical.png b/assets/country-profile/icons/chemical.png new file mode 100644 index 00000000..da829855 Binary files /dev/null and b/assets/country-profile/icons/chemical.png differ diff --git a/assets/country-profile/icons/exports.png b/assets/country-profile/icons/exports.png new file mode 100644 index 00000000..6b8c08a1 Binary files /dev/null and b/assets/country-profile/icons/exports.png differ diff --git a/assets/country-profile/icons/female.png b/assets/country-profile/icons/female.png new file mode 100644 index 00000000..1e3bfcdf Binary files /dev/null and b/assets/country-profile/icons/female.png differ diff --git a/assets/country-profile/icons/food.png b/assets/country-profile/icons/food.png new file mode 100644 index 00000000..edb27d4a Binary files /dev/null and b/assets/country-profile/icons/food.png differ diff --git a/assets/country-profile/icons/imports.png b/assets/country-profile/icons/imports.png new file mode 100644 index 00000000..803336d2 Binary files /dev/null and b/assets/country-profile/icons/imports.png differ diff --git a/assets/country-profile/icons/inflows.png b/assets/country-profile/icons/inflows.png new file mode 100644 index 00000000..d591c661 Binary files /dev/null and b/assets/country-profile/icons/inflows.png differ diff --git a/assets/country-profile/icons/male.png b/assets/country-profile/icons/male.png new file mode 100644 index 00000000..a9479165 Binary files /dev/null and b/assets/country-profile/icons/male.png differ diff --git a/assets/country-profile/icons/metal.png b/assets/country-profile/icons/metal.png new file mode 100644 index 00000000..fc85476a Binary files /dev/null and b/assets/country-profile/icons/metal.png differ diff --git a/assets/country-profile/icons/nominal.png b/assets/country-profile/icons/nominal.png new file mode 100644 index 00000000..dd0ae0ca Binary files /dev/null and b/assets/country-profile/icons/nominal.png differ diff --git a/assets/country-profile/icons/outflows.png b/assets/country-profile/icons/outflows.png new file mode 100644 index 00000000..1a913ed8 Binary files /dev/null and b/assets/country-profile/icons/outflows.png differ diff --git a/assets/country-profile/icons/perCapita.png b/assets/country-profile/icons/perCapita.png new file mode 100644 index 00000000..d95cd0b3 Binary files /dev/null and b/assets/country-profile/icons/perCapita.png differ diff --git a/assets/country-profile/icons/population.png b/assets/country-profile/icons/population.png new file mode 100644 index 00000000..8c1651e1 Binary files /dev/null and b/assets/country-profile/icons/population.png differ diff --git a/assets/country-profile/icons/real.png b/assets/country-profile/icons/real.png new file mode 100644 index 00000000..11194d04 Binary files /dev/null and b/assets/country-profile/icons/real.png differ diff --git a/assets/country-profile/icons/stocks.png b/assets/country-profile/icons/stocks.png new file mode 100644 index 00000000..9f2a360c Binary files /dev/null and b/assets/country-profile/icons/stocks.png differ diff --git a/assets/country-profile/icons/trade.png b/assets/country-profile/icons/trade.png new file mode 100644 index 00000000..a8bf8170 Binary files /dev/null and b/assets/country-profile/icons/trade.png differ diff --git a/assets/country-profile/icons/vegetable.png b/assets/country-profile/icons/vegetable.png new file mode 100644 index 00000000..f122a34f Binary files /dev/null and b/assets/country-profile/icons/vegetable.png differ diff --git a/assets/country-profile/president.png b/assets/country-profile/president.png new file mode 100644 index 00000000..b6ffd414 Binary files /dev/null and b/assets/country-profile/president.png differ diff --git a/assets/country-profile/vicePresident.png b/assets/country-profile/vicePresident.png new file mode 100644 index 00000000..27bfde5c Binary files /dev/null and b/assets/country-profile/vicePresident.png differ diff --git a/lib/config/my_router.dart b/lib/config/my_router.dart index 60f755d3..23f6a666 100644 --- a/lib/config/my_router.dart +++ b/lib/config/my_router.dart @@ -656,8 +656,7 @@ final GoRouter router = GoRouter( GoRoute( path: '/countryprofile', - builder: (context, state) => const CountryProfilePage(), - + builder: (context, state) => const ListCountriesRoute(), ), GoRoute( path: '/country-profile-detail', @@ -673,7 +672,9 @@ final GoRouter router = GoRouter( path: '/reportDetail', builder: (context, state) { final report = state.extra as Map; - return ReportDetailPage(); + return ReportDetailPage( + title:report['title']!, + ); }, ), diff --git a/lib/infrastructure/services/img_asset_paths/icons/popup_asset_path.dart b/lib/infrastructure/services/img_asset_paths/icons/popup_asset_path.dart new file mode 100644 index 00000000..f136634d --- /dev/null +++ b/lib/infrastructure/services/img_asset_paths/icons/popup_asset_path.dart @@ -0,0 +1,23 @@ +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'; + static const stocks = '$_basePath/stocks.png'; + static const trade = '$_basePath/trade.png'; + static const vegetable = '$_basePath/vegetable.png'; + static const metal = '$_basePath/metal.png'; + static const food = '$_basePath/food.png'; + static const chemical = '$_basePath/chemical.png'; + static const animal = '$_basePath/animal.png'; +} diff --git a/lib/l10n/intl_ar.arb b/lib/l10n/intl_ar.arb index fb887af0..a862c53f 100644 --- a/lib/l10n/intl_ar.arb +++ b/lib/l10n/intl_ar.arb @@ -1,8 +1,8 @@ { "all_bookmarks":"كل العلامات المرجعية", - "economy_title":"الاقتصاد", - "social_title":"الاجتماعي", - "environment_title":"البيئة", + "economy_title":"اقتصاد", + "social_title":"اجتماعي", + "environment_title":"بيئة", "bookmarks": "الإشارات المرجعية", "searchCountry": "Search Country", "feedback_title": "تعليق", diff --git a/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart b/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart index 7ff17113..2e193b96 100644 --- a/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart +++ b/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart @@ -4,157 +4,220 @@ import 'package:uae_stat/domain/use_cases/language.dart'; import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart'; class ReportDetailPage extends StatelessWidget { - const ReportDetailPage({super.key}); + final String title; + ReportDetailPage({super.key, required this.title}); + + @override + Widget build(BuildContext context) { - return BaseScaffold( - title: Text( - context.translate( - 'UAE Competitiveness', - 'التقارير التنافسيه لدولة الامارات', - ), - style: TextStyle( - fontFamily: context.translate('Roboto', 'NotoKufi'), + late String rank; + late String edition; + late String para; + final List> contentData=[ + { + 'title':context.translate('Prosperity Index (2023)', 'تقرير مؤشر الازدهار (2023)',),'rank':'44' ,'edition':'41','content': context.translate( + 'The Legatum Prosperity Index is published annually by the Legatum Institute. It is a policy-focused report that measures the current state of prosperity since 2007. Using the Prosperity Index framework, nations around the world can assess their strengths and weaknesses in order to determine the economic and strategic choices that need to be made to further build inclusive societies, open economies, and empowered people to drive greater levels of prosperity.', + 'تم إصدار تقرير مؤشر الازدهار من قبل معهد ليجاتم لأول مرة في عام 2007 ويتم إصداره بشكل سنوي. يقيس التقرير جهود 167 دولة لتعزيز رفاه مواطنيها عبر 12 محور التي تضم 300 مؤشر (منقسمين إلى 192 بيانات إحصائية و108 استبيانات).', + ), + }, + { + 'title':context.translate('World Happiness Report (2023)', 'تقرير مؤشر الازدهار (2023)',),'rank':'24' ,'edition':'26','content': context.translate( + 'The World Happiness Report was first published in 2012, by the United Nations Sustainable Development Solutions Network (UNSDSN).', + 'تقرير السعادة العالمية يصدر سنوياً عن شبكة تنمية الحلول المستدامة التابعة للأمانة العامة للأمم المتحدة.', + ), + }, + { + 'title':context.translate('Logistics Performance Index (2023)', 'تقرير مؤشر الازدهار (2023)',),'rank':'7' ,'edition':'11','content': context.translate( + 'The Logistics Performance Index (LPI) report is a tool developed by the World Bank to measure a country\'s logistics performance. The report uses a range of indicators such as customs performance, infrastructure quality, and logistics competence to assess a countrys logistics strengths and weaknesses. The latest report highlights the importance of efficient logistics systems for economic growth and competitiveness, and emphasizes the need for investment in infrastructure and digitalization. The LPI report is a valuable resource for policymakers and businesses looking to understand a country\'s logistics performance and identify areas for improvement.', + 'تقرير مؤشر أداء الخدمات اللوجستية (LPI) هو أداة طورها البنك الدولي لقياس أداء الخدمات اللوجستية في بلد ما. يستخدم التقرير مجموعة من المؤشرات مثل أداء الجمارك ، وجودة البنية التحتية ، والكفاءة اللوجستية لتقييم نقاط القوة والضعف اللوجستية للبلد. يسلط التقرير الأخير الضوء على أهمية النظم اللوجستية الفعالة للنمو الاقتصادي والقدرة التنافسية ، ويؤكد على الحاجة إلى الاستثمار في البنية التحتية والرقمنة. يعد تقرير LPI مورداً قيماً لواضعي السياسات والشركات التي تتطلع إلى فهم الأداء اللوجستي للبلد وتحديد مجالات التحسين.' + ), + }, + + ]; + + void ContentChange(){ + rank = ''; + edition = ''; + para = ''; + for (var content in contentData){ + print('${content['title']} and $title are finout'); + if(content['title']==title){ + rank=content['rank']; + edition=content['edition']; + para=content['content']; + print('competiviness change $edition and $rank'); + }else { + rank='40'; + edition='41'; + para= context.translate( + 'The Legatum Prosperity Index is published annually by the Legatum Institute. It is a policy-focused report that measures the current state of prosperity since 2007. Using the Prosperity Index framework, nations around the world can assess their strengths and weaknesses in order to determine the economic and strategic choices that need to be made to further build inclusive societies, open economies, and empowered people to drive greater levels of prosperity.', + 'تم إصدار تقرير مؤشر الازدهار من قبل معهد ليجاتم لأول مرة في عام 2007 ويتم إصداره بشكل سنوي. يقيس التقرير جهود 167 دولة لتعزيز رفاه مواطنيها عبر 12 محور التي تضم 300 مؤشر (منقسمين إلى 192 بيانات إحصائية و108 استبيانات).', + ); + } + } + } + ContentChange(); + return Theme( + data: ThemeData( + fontFamily: context.translate( + 'Roboto', + 'NotoKufi', ), ), - showBackButton: true, - body: SingleChildScrollView( - padding: const EdgeInsets.all(16.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - // Header - Container( - padding: const EdgeInsets.all(12), - decoration: BoxDecoration( - color: Colors.grey.shade100, - borderRadius: BorderRadius.circular(12), - ), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Expanded( - child: Text( - 'Prosperity Index (2023)', - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, + child: BaseScaffold( + title: Text( + context.translate( + 'UAE Competitiveness', + 'التقارير التنافسيه لدولة الامارات', + ), + ), + showBackButton: true, + body: SingleChildScrollView( + padding: const EdgeInsets.all(16.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // Header + Container( + padding: const EdgeInsets.all(12), + decoration: BoxDecoration( + color: Color(0xFFF5F5F5), + borderRadius: BorderRadius.circular(12), + ), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Text( + title, + // context.translate( + // 'Prosperity Index (2023)', + // 'تقرير مؤشر الازدهار (2023)', + // ), + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + ), ), ), - ), - Image.asset( - 'assets/competitiveness/solo.png', - height: 71, - width: 84, - ), - ], - ), - ), - const SizedBox(height: 24), - - const Text( - 'The Legatum Prosperity Index is published annually by the Legatum Institute. It is a policy-focused report that measures the current state of prosperity since 2007. Using the Prosperity Index framework, nations around the world can assess their strengths and weaknesses in order to determine the economic and strategic choices that need to be made to further build inclusive societies, open economies, and empowered people to drive greater levels of prosperity.', - style: TextStyle(fontSize: 14), - ), - const SizedBox(height: 24), - - // Ranking section - Container( - decoration: BoxDecoration( - color: Colors.grey[100], - borderRadius: BorderRadius.circular(12), - ), - padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8), - child: Row( - children: [ - Expanded( - child: _RankingCard( - title: 'Rank in 2023', - value: '44', - icon: const Icon(Icons.arrow_downward, color: Colors.red, size: 25), + Image.asset( + 'assets/competitiveness/solo.png', + height: 71, + width: 84, ), - ), - 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), + const SizedBox(height: 24), - // Country ranking section - Container( - decoration: BoxDecoration( - color: const Color(0xFFF5F5F5), - borderRadius: BorderRadius.circular(12), + SizedBox( + height: MediaQuery.of(context).size.height*0.2, + child: Text( + para, + style: TextStyle(fontSize: 14), + ), ), - padding: const EdgeInsets.symmetric(vertical: 8), - child: Column( - children: [ - _CountryRankingItem( - title: 'First Globally', - country: 'DENMARK', - flagPath: 'assets/country_flags/de.png', - ), - const Padding( - padding: EdgeInsets.symmetric(horizontal: 8), - child: DottedDivider(), - ), - _CountryRankingItem( - title: 'First in GCC', - country: 'MULTIPLE COUNTRIES', - flagPath: 'assets/competitiveness/multi-frame.jpg', - onTap: () => showDialog( - context: context, - builder: (context) => Dialog( - shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), - child: Container( - padding: const EdgeInsets.all(16), - decoration: BoxDecoration( - color: Colors.white, - borderRadius: BorderRadius.circular(12), - ), - child: Column( - mainAxisSize: MainAxisSize.min, - children: [ - _CountryItem(name: 'Argentina', flag: 'assets/country_flags/ar.png'), - _CountryItem(name: 'Bahrain', flag: 'assets/country_flags/ba.png'), - _CountryItem(name: 'Denmark', flag: 'assets/country_flags/de.png'), - _CountryItem(name: 'Finland', flag: 'assets/country_flags/fi.png'), - _CountryItem(name: 'Oman', flag: 'assets/country_flags/am.png'), - _CountryItem(name: 'Singapore', flag: 'assets/country_flags/si.png'), - _CountryItem(name: 'Saudi Arabia', flag: 'assets/country_flags/sa.png'), - ], + const SizedBox(height: 24), + + // Ranking section + Container( + decoration: BoxDecoration( + color: Color(0xFFF5F5F5), + borderRadius: BorderRadius.circular(12), + ), + padding: const EdgeInsets.symmetric(vertical: 3, horizontal: 8), + child: Row( + children: [ + Expanded( + child: _RankingCard( + title: context.translate('Rank in 2023','تقرير مؤشر الازدهار (2023)'), + value: rank, + icon: const Icon(Icons.arrow_downward, color: Colors.red, size: 25), + ), + ), + SizedBox( + height: 60, + width: 1, + child: CustomPaint( + painter: DottedLinePainter(), + ), + ), + Expanded( + child: _RankingCard( + title: context.translate('vs. Previous Edition','مقابل الإصدار السابق'), + value: edition, + icon: const SizedBox.shrink(), + ), + ), + ], + ), + ), + const SizedBox(height: 24), + + // Country ranking section + Container( + decoration: BoxDecoration( + color: const Color(0xFFF5F5F5), + borderRadius: BorderRadius.circular(12), + ), + padding: const EdgeInsets.symmetric(vertical: 8), + child: Column( + children: [ + _CountryRankingItem( + title: context.translate('First Globally','أولاً عالمياً'), + country: context.translate('DENMARK','الدنمارك'), + flagPath: 'assets/country_flags/de.png', + ), + const Padding( + padding: EdgeInsets.symmetric(horizontal: 8), + child: DottedDivider(), + ), + _CountryRankingItem( + title: 'First in GCC', + country: context.translate('MULTIPLE COUNTRIES','دول متعددة'), + flagPath: 'assets/competitiveness/multi.png', + onTap: () => showDialog( + context: context, + builder: (context) => Dialog( + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), + child: Container( + padding: const EdgeInsets.all(16), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(12), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + _CountryItem(name: context.translate('Argentina','الأرجنتين'), flag: 'assets/country_flags/ar.png'), + _CountryItem(name: context.translate('Bahrain','البحرين') ,flag: 'assets/country_flags/ba.png'), + _CountryItem(name: context.translate('Denmark','الدنمارك'), flag: 'assets/country_flags/de.png'), + _CountryItem(name: context.translate('Finland','فنلندا'), flag: 'assets/country_flags/fi.png'), + _CountryItem(name: context.translate('Oman','عمان') ,flag: 'assets/country_flags/am.png'), + _CountryItem(name: context.translate('Singapore','سنغافورة'), flag: 'assets/country_flags/si.png'), + _CountryItem(name: context.translate('Saudi Arabia','المملكة العربية السعودية'), flag: 'assets/country_flags/sa.png'), + ], + ), ), ), ), ), - ), - const Padding( - padding: EdgeInsets.symmetric(horizontal: 8), - child: DottedDivider(), - ), - _CountryRankingItem( - title: 'First in Arab Countries', - country: 'UNITED ARAB EMIRATES', - flagPath: 'assets/country_flags/ga.png', - ), - ], + const Padding( + padding: EdgeInsets.symmetric(horizontal: 8), + child: DottedDivider(), + ), + _CountryRankingItem( + title: context.translate('First in Arab Countries','الأول في دول مجلس التعاون الخليجي'), + country: context.translate('UNITED ARAB EMIRATES','الإمارات العربية المتحدة'), + flagPath: 'assets/country_flags/ga.png', + ), + ], + ), ), - ), - ], + ], + ), ), ), ); @@ -179,14 +242,14 @@ class _RankingCard extends StatelessWidget { width: 160, padding: const EdgeInsets.all(12), decoration: BoxDecoration( - color: Colors.grey[100], + color: Color(0xFFF5F5F5), ), child: Column( children: [ Text( title, textAlign: TextAlign.center, - style: const TextStyle(fontSize: 13, color: Colors.black54), + style: TextStyle(fontSize: context.translate(13,11),fontWeight: FontWeight.w500,), ), const SizedBox(height: 4), Row( @@ -194,8 +257,8 @@ class _RankingCard extends StatelessWidget { children: [ Text( value, - style: const TextStyle( - fontSize: 36, + style: TextStyle( + fontSize: context.translate(36,32), fontWeight: FontWeight.bold, ), ), @@ -238,13 +301,13 @@ class _CountryRankingItem extends StatelessWidget { children: [ Text( title, - style: const TextStyle(fontSize: 14, color: Colors.black54), + style:TextStyle(fontSize: context.translate(14,11), color: Colors.black), ), const SizedBox(height: 4), Text( country, - style: const TextStyle( - fontSize: 20, + style: TextStyle( + fontSize: context.translate(20,18), fontWeight: FontWeight.bold, ), ), @@ -252,17 +315,29 @@ class _CountryRankingItem extends StatelessWidget { ), ), const SizedBox(width: 16), - ClipOval( - child: Container( - width: 50, - height: 50, - decoration: const BoxDecoration( - shape: BoxShape.circle, - color: Colors.transparent, - ), - child: Image.asset(flagPath, width: 50, height: 50, fit: BoxFit.cover), + + Container( + padding: EdgeInsets.zero, + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all(color: Colors.white, width: 3), + ), + child: CircleAvatar( + radius: 20, + backgroundImage: AssetImage(flagPath,), ), ), + // ClipOval( + // child: Container( + // width: 50, + // height: 50, + // decoration: const BoxDecoration( + // shape: BoxShape.circle, + // color: Colors.transparent, + // ), + // child: Image.asset(flagPath, width: 50, height: 50, fit: BoxFit.cover), + // ), + // ), ], ), ), diff --git a/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/competitiveness.dart b/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/competitiveness.dart index 6f0e331b..29a2fcb4 100644 --- a/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/competitiveness.dart +++ b/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/competitiveness.dart @@ -14,20 +14,26 @@ class Competitiveness extends StatelessWidget { if (didPop) return; context.go('/myhomepage'); }, - child: BaseScaffold( - title: Text( - context.translate( - 'UAE Competitiveness', - 'تنافسية دولة الإمارات العربية المتحدة', - ), - style: TextStyle( - fontFamily: context.translate( - 'Roboto', - 'NotoKufi', - ) + child: Theme( + data: ThemeData( + fontFamily: context.translate( + 'Roboto', + 'NotoKufi', ), ), - body: CompetitivenessState(context), + child: BaseScaffold( + mytitleColor: Colors.black, + title: Text( + context.translate( + 'UAE Competitiveness', + 'تنافسية دولة الإمارات العربية المتحدة', + ), + style: TextStyle( + fontSize: context.translate(22, 16), + ), + ), + body: CompetitivenessState(context), + ), ), ); } @@ -36,59 +42,76 @@ class Competitiveness extends StatelessWidget { final List> reports = [ { 'rank': 44, + 'title-ar':'تقرير مؤشر الازدهار (2023)', 'title': 'Prosperity Index (2023)', 'logo': 'assets/competitiveness/solo.png', 'borderColor': Colors.blue, }, { 'rank': 26, + 'title-ar':'تقرير السعادة العالمية (2023)', 'title': 'World Happiness Report (2023)', 'logo': 'assets/competitiveness/soloo.png', 'borderColor': Color(0xFF844F36), }, { 'rank': 7, + 'title-ar':'مؤشر أداء الخدمات اللوجستية (2023)', 'title': 'Logistics Performance Index (2023)', 'logo': 'assets/competitiveness/solo.png', 'borderColor': Colors.blue, }, { 'rank': 10, + 'title-ar':'مؤشر الإرهاب العالمي (2023)', 'title': 'Global Soft Power Index (2023)', 'logo': 'assets/competitiveness/soloo.png', 'borderColor': Colors.blue, }, { 'rank': 76, + 'title-ar':'مؤشر الإرهاب العالمي (2023)', 'title': 'Global Terrorism Index (2023)', 'logo': 'assets/competitiveness/solo.png', 'borderColor': Color(0xFF844F36), }, { 'rank': 10, + 'title-ar':'الكتاب السنوي للتنافسية العالمية (2023)', 'title': 'The World Competitiveness Yearbook (2023)', 'logo': 'assets/competitiveness/soloo.png', 'borderColor': Colors.blue, }, { 'rank': 71, + 'title-ar':'تقرير الفجوة بين الجنسين العالمية (2023)', 'title': 'Global Gender Gap Report (2023)', 'logo': 'assets/competitiveness/solo.png', 'borderColor': Colors.blue, }, { 'rank': 29, + 'title-ar':'مؤشر الأداء الصناعي التنافسي (2023)', 'title': 'Competitive Industrial Performance Index (2023)', 'logo': 'assets/competitiveness/soloo.png', 'borderColor': Color(0xFF844F36), }, ]; + Widget rankDivider=Container( + margin: EdgeInsets.all(5), + width: 1, + height: 40, + color: Colors.grey, + ); + return Column( children: [ SizedBox(height: 16), Text( - '(22) Competitive Reports', + context.translate( + '(22) Competitive Reports', + 'التقارير التنافسية (22)',), style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600), ), SizedBox(height: 12), @@ -102,7 +125,9 @@ class Competitiveness extends StatelessWidget { child: InkWell( onTap: () { // Navigate to detail page with arguments - context.push('/reportDetail', extra: report); + context.push('/reportDetail', extra:{ + 'title':context.translate(report['title'],report['title-ar']), + }); }, child: Container( decoration: BoxDecoration( @@ -126,10 +151,11 @@ class Competitiveness extends StatelessWidget { ), ], ), - const SizedBox(width: 12), + const SizedBox(width: 8), + rankDivider, Expanded( child: Text( - report['title'], + context.translate(report['title'],report['title-ar']), style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500), ), ), diff --git a/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart b/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart index ccc44536..fb6e9e68 100644 --- a/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart +++ b/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart @@ -1,7 +1,10 @@ import 'dart:ui'; +import 'package:external_repos/external_repos.dart'; 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'; +import 'package:uae_stat/domain/use_cases/language.dart'; class DetailedCountryProfilePage extends StatelessWidget { final String countryName; @@ -16,134 +19,157 @@ class DetailedCountryProfilePage extends StatelessWidget { @override Widget build(BuildContext context) { double width = MediaQuery.of(context).size.width; - - return BaseScaffold( - title: const Text('Country Profile'), - showBackButton: true, - body: Padding( - padding: const EdgeInsets.all(16.0), - child: Column( - children: [ - // Country name and flag (Header Section) - Center( - child: Column( - children: [ - Text( - flag, - style: const TextStyle(fontSize: 48), - ), - const SizedBox(height: 8), - Text( - countryName.toUpperCase(), - style: const TextStyle( - fontSize: 22, - fontWeight: FontWeight.bold, + final country = ISOCountry.fromAlpha2(flag); + return Theme( + data: ThemeData( + fontFamily: context.translate( + 'Roboto', + 'NotoKufi', + ), + ), + child: BaseScaffold( + title: const Text('Country Profile'), + showBackButton: true, + body: Padding( + padding: const EdgeInsets.all(16.0), + child: Column( + children: [ + // Country name and flag (Header Section) + Center( + child: Column( + children: [ + Container( + padding: EdgeInsets.zero, // optional inner spacing + decoration: BoxDecoration( + shape: BoxShape.circle, + border: Border.all(color: Colors.white, width: 3), + boxShadow: [ + BoxShadow( + color: Colors.black.withValues(alpha:0.3), + spreadRadius: 2, + blurRadius: 6, + offset: Offset(0, 4), + ), + ], + ), + child: CircleAvatar( + radius: 20, + backgroundImage: AssetImage(country.flagImgPath), + ), ), - ), - ], + const SizedBox(height: 8), + Text( + context.translate(countryName.toUpperCase(),country.nameAR), + style: const TextStyle( + fontSize: 22, + fontWeight: FontWeight.bold, + ), + ), + ], + ), ), - ), - const SizedBox(height: 16), + const SizedBox(height: 16), - // Government Officials (Grid Section) - SizedBox( - height: 220, // Fixed height for the GridView to control its size - child: GridView.count( - crossAxisCount: 2, - shrinkWrap: true, - physics: const NeverScrollableScrollPhysics(), - mainAxisSpacing: 12, - crossAxisSpacing: 12, - childAspectRatio: 2.0, - children: const [ - _LeaderCard( - imagePath: 'assets/country-profile/alberto.png', - name: 'Alberto Fernández', - position: 'President', - ), - _LeaderCard( - imagePath: 'assets/country-profile/alberto.png', - name: 'Cristina Fernández de Kirchner', - position: 'Vice-President', - ), - _LeaderCard( - imagePath: 'assets/country-profile/alberto.png', - name: 'Agustin Rossi', - position: 'Chief of the Cabinet of Ministers', - ), - _LeaderCard( - imagePath: 'assets/country-profile/alberto.png', - name: 'Cecilia Moreau', - position: 'President of Chamber of Deputies', - ), - ], + // Government Officials (Grid Section) + SizedBox( + height: 220, // Fixed height for the GridView to control its size + child: GridView.count( + crossAxisCount: 2, + shrinkWrap: true, + physics: const NeverScrollableScrollPhysics(), + mainAxisSpacing: 10, + crossAxisSpacing: 4, + childAspectRatio: 2.0, + children: [ + _LeaderCard( + imagePath: 'assets/country-profile/president.png', + name: context.translate('Alberto Fernández','ألبرتو فرناندس'), + position: context.translate('President','الرئيس'), + ), + _LeaderCard( + imagePath: 'assets/country-profile/president.png', + name: context.translate('Cristina Fernández de Kirchner','كريستينا فرنانديز دي كيرشنر'), + position: context.translate('Vice-President','رئيس الجمهورية'), + ), + _LeaderCard( + imagePath: 'assets/country-profile/vicePresident.png', + name: context.translate('Agustin Rossi','أغوستين روسي'), + position: context.translate('Chief of the Cabinet of Ministers','رئيس مجلس الوزراء'), + ), + _LeaderCard( + imagePath: 'assets/country-profile/vicePresident.png', + name: context.translate('Cecilia Moreau','سيسيليا موريو'), + position: context.translate('President of Chamber of Deputies','رئيس غرفة النواب'), + ), + ], + ), ), - ), - const SizedBox(height: 12), // Further reduced spacing + const SizedBox(height: 12), // Further reduced spacing - // Category Buttons (Button Section) - Flexible( - fit: FlexFit.loose, // Allow the section to take only the space it needs - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Expanded( - child: _CategoryButton( - title: 'Demography', - overlayColor: const Color(0xE6AA947F), - backgroundImagePath: 'assets/country-profile/CategoryFile/Demo.png', - onTap: () => showCategoryPopup(context, 'Demography'), + // Category Buttons (Button Section) + Flexible( + fit: FlexFit.loose, // Allow the section to take only the space it needs + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Expanded( + child: _CategoryButton( + title: context.translate('Demography','التركيبة السكانية'), + overlayColor: const Color(0xE6AA947F), + backgroundImagePath: 'assets/country-profile/CategoryFile/Demo.png', + onTap: () => showCategoryPopup(context, 'Demography'), + ), ), - ), - const SizedBox(width: 12), - Expanded( - child: _CategoryButton( - title: 'GDP', - overlayColor: const Color(0xFFAEC6CF), - backgroundImagePath: 'assets/country-profile/CategoryFile/GDP.png', - onTap: () => showCategoryPopup(context, 'GDP'), + const SizedBox(width: 12), + Expanded( + child: _CategoryButton( + title: context.translate('GDP','الناتج المحلي الإجمالي'), + overlayColor: const Color(0xFFAEC6CF), + backgroundImagePath: 'assets/country-profile/CategoryFile/GDP.png', + onTap: () => showCategoryPopup(context, 'GDP'), + ), ), - ), - ], - ), - const SizedBox(height: 12), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Expanded( - child: _CategoryButton( - title: 'FDI', - overlayColor: const Color(0xD8C39898), - backgroundImagePath: 'assets/country-profile/CategoryFile/FDI.png', - onTap: () => showCategoryPopup(context, 'FDI'), + ], + ), + const SizedBox(height: 12), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Expanded( + child: _CategoryButton( + title: context.translate('FDI','الاستثمار الأجنبي المباشر'), + overlayColor: const Color(0xD8C39898), + backgroundImagePath: 'assets/country-profile/CategoryFile/FDI.png', + onTap: () => showCategoryPopup(context, 'FDI'), + ), ), - ), - const SizedBox(width: 12), - Expanded( - child: _CategoryButton( - title: 'Trade', - overlayColor: const Color(0xD8B0C5A4), - backgroundImagePath: 'assets/country-profile/CategoryFile/Trade.png', - onTap: () => showCategoryPopup(context, 'Trade'), + const SizedBox(width: 12), + Expanded( + child: _CategoryButton( + title: context.translate('Trade','التجارة'), + overlayColor: const Color(0xD8B0C5A4), + backgroundImagePath: 'assets/country-profile/CategoryFile/Trade.png', + onTap: () => showCategoryPopup(context, 'Trade'), + ), ), - ), - ], - ), - const SizedBox(height: 12), - // Full-width button - _CategoryButton( - title: 'Bilateral Trade', - overlayColor: const Color(0xB29CAFAB), - backgroundImagePath: 'assets/country-profile/CategoryFile/BilateralTrade.png', - onTap: () => showCategoryPopup(context, 'Bilateral Trade'), - ), - ], + ], + ), + const SizedBox(height: 12), + // Full-width button + _CategoryButton( + title: context.translate('Bilateral Trade','التجارة الثنائية'), + overlayColor: const Color(0xB29CAFAB), + backgroundImagePath: 'assets/country-profile/CategoryFile/BilateralTrade.png', + onTap: () => showCategoryPopup(context, 'Bilateral Trade'), + ), + ], + ), ), - ), - ], + ], + ), ), ), ); @@ -274,63 +300,128 @@ class _CategoryButton extends StatelessWidget { } } -class CategoryPopupContent extends StatelessWidget { +class CategoryPopupContent extends StatefulWidget { final String category; const CategoryPopupContent({super.key, required this.category}); + @override + State createState() => _CategoryPopupContentState(); +} + +class _CategoryPopupContentState extends State { + late String bilateralTrade=context.translate('Import','الواردات'); + late bool selected; + late List> tradeList=importLists; + + String updateTrade(String newTrade) { + setState(() { + bilateralTrade = newTrade; + if (bilateralTrade=='Import'){ + tradeList=importLists; + }else if(bilateralTrade=='Export'){ + tradeList=exportLists; + }else if (bilateralTrade=='ReExport'){ + tradeList=reExportLists; + }else { + tradeList=[]; + } + + }); + print ('my new bilsteral is $bilateralTrade'); + return bilateralTrade; + } + List> importLists=[ + {'image':PopupAssetPath.vegetable,'content-eng':'Vegetable Products','content-ar':'المنتجات النباتية','value': 198.6}, + {'image':PopupAssetPath.food,'content-eng':'Foodstuffs, Beverages, Spirits And Tobacco','content-ar':'المواد الغذائية والمشروبات والمشروبات الروحية والتبغ','value': 89.9}, + {'image':PopupAssetPath.metal,'content-eng':'Base Metals And Articles Of Base Metal','content-ar':'المعادن الأساسية ومصنوعاتها','value': 65.6}, + {'image':PopupAssetPath.animal,'content-eng':'Live Animals And Their Products','content-ar':'الحيوانات الحية ومنتجاتها','value': 23.7}, + {'image':PopupAssetPath.chemical,'content-eng':'Products Of The Chemical or Allied Industries','content-ar':'منتجات الصناعات الكيميائية أو المرتبطة بها','value': 4.7}, + ]; + + List> exportLists=[ + {'image':PopupAssetPath.vegetable,'content-eng':'Vegetable Products','content-ar':'المنتجات النباتية','value': 19.6}, + {'image':PopupAssetPath.food,'content-eng':'Foodstuffs, Beverages, Spirits And Tobacco','content-ar':'المواد الغذائية والمشروبات والمشروبات الروحية والتبغ','value': 9.9}, + {'image':PopupAssetPath.metal,'content-eng':'Base Metals And Articles Of Base Metal','content-ar':'المعادن الأساسية ومصنوعاتها','value': 12.7}, + {'image':PopupAssetPath.animal,'content-eng':'Live Animals And Their Products','content-ar':'الحيوانات الحية ومنتجاتها','value': 0.0}, + {'image':PopupAssetPath.chemical,'content-eng':'Products Of The Chemical or Allied Industries','content-ar':'منتجات الصناعات الكيميائية أو المرتبطة بها','value': 0.0}, + ]; + List> reExportLists=[ + {'image':PopupAssetPath.vegetable,'content-eng':'Vegetable Products','content-ar':'المنتجات النباتية','value': 0.0}, + {'image':PopupAssetPath.food,'content-eng':'Foodstuffs, Beverages, Spirits And Tobacco','content-ar':'المواد الغذائية والمشروبات والمشروبات الروحية والتبغ','value': 0.0}, + {'image':PopupAssetPath.metal,'content-eng':'Base Metals And Articles Of Base Metal','content-ar':'المعادن الأساسية ومصنوعاتها','value': 0.0}, + {'image':PopupAssetPath.animal,'content-eng':'Live Animals And Their Products','content-ar':'الحيوانات الحية ومنتجاتها','value': 23.7}, + {'image':PopupAssetPath.chemical,'content-eng':'Products Of The Chemical or Allied Industries','content-ar':'منتجات الصناعات الكيميائية أو المرتبطة بها','value': 16.3}, + ]; + @override Widget build(BuildContext context) { - switch (category) { + 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, + ), + ), + ); + final yellowDivider=Divider( + color: Color(0xFFE9BF70), + ); + final screenWidth=MediaQuery.of(context).size.width; + switch (widget.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, - title: 'Capital City', - value: 'Buenos Aires', + context:context, + icon: PopupAssetPath.capital, + title: context.translate('Capital City','العاصمة'), + value: context.translate('Buenos Aires','بوينس آيرس'), ), - const Divider(), + lineBorder, _DemographyItem( - icon: Icons.map, + context:context, + icon: PopupAssetPath.area, title: 'Surface Area', value: '2,780,400 sq. km', ), - const Divider(), + lineBorder, _DemographyStatItem( - icon: Icons.groups, - title: '2021 Population', + icon: PopupAssetPath.population, + title: context.translate('2021 Population','السكان 2021'), value: '45.81 M', - suffix: '32 ↑ Rank', - suffixStyle: const TextStyle(color: Colors.green, fontSize: 12), + suffix: '32', + arrow:Icons.arrow_upward, + suffixText: context.translate('Rank','رتبة'), ), - const Divider(), + lineBorder, _DemographyStatItem( - icon: Icons.male, - title: '2021 Male Population', + icon: PopupAssetPath.male, + title: context.translate('2021 Male Population','السكان الذكور 2021 '), value: '22.35 M', - suffix: '0.98% ↑ Growth Rate', - valueColor: Colors.deepPurple, + suffix: '0.98%', + arrow:Icons.arrow_upward, + suffixText: context.translate('Growth Rate','معدل النمو'), + valueColor: Color(0xFF00205B), ), - const Divider(), + lineBorder, _DemographyStatItem( - icon: Icons.female, - title: '2021 Female Population', + icon:PopupAssetPath.female, + title: context.translate('2021 Female Population','السكان الإناث 2021'), value: '23.46 M', - suffix: '0.93% ↑ Growth Rate', - valueColor: Colors.purple, + suffix: '0.93%', + arrow:Icons.arrow_upward, + suffixText: context.translate('Growth Rate','معدل النمو'), + valueColor: Color(0xFF751398), ), const SizedBox(height: 16), ], @@ -340,54 +431,48 @@ 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, - title: '2021 Nominal GDP (AED)', + context: context, + icon: PopupAssetPath.nominal, + title: context.translate('2021 Nominal GDP (AED)','2021 الناتج المحلي الإجمالي الاسمي (درهم)'), value: '1.8 T', rank: '26', - rankDirection: '↓', - rankColor: Colors.red, + rankDirection: Icons.arrow_downward, + rankColor: Color(0xFFED1C24), ), - const Divider(), + lineBorder, _GDPMetricItem( - icon: Icons.public, - title: '2021 Real GDP (AED)', + context: context, + icon: PopupAssetPath.real, + title: context.translate('2021 Real GDP (AED)','2021 الناتج المحلي الإجمالي الحقيقي (درهم)'), value: '2.08 T', rank: '22', - rankDirection: '↓', - rankColor: Colors.red, + rankDirection: Icons.arrow_downward, + rankColor: Color(0xFFED1C24), ), - const Divider(), + lineBorder, _GDPMetricItem( - icon: Icons.groups_3, - title: '2021 GDP Per Capita (AED)', + context: context, + icon: PopupAssetPath.perCapita, + title: context.translate('2021 GDP Per Capita (AED)','الناتج المحلي الإجمالي الحقيقي'), value: '39.38 K', rank: '64', - rankDirection: '↓', - rankColor: Colors.red, + rankDirection: Icons.arrow_downward, + rankColor: Color(0xFFED1C24), ), - const Divider(), + lineBorder, const SizedBox(height: 8), - const Icon(Icons.stacked_bar_chart, color: Colors.grey), + Image.asset(PopupAssetPath.IncomeLevel,width: 40,height: 40,), const SizedBox(height: 4), - const Text( - 'Income Level', - style: TextStyle(color: Colors.grey), + Text( + context.translate('Income Level','مستوى الدخل'), + style: TextStyle(color: Color(0xFF666666),fontSize: 16), ), const SizedBox(height: 4), - const Text( - 'Upper Middle Income', - style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16), + Text( + context.translate('Upper Middle Income','الدخل المتوسط الأعلى'), + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 28), ), const SizedBox(height: 16), ], @@ -397,35 +482,29 @@ 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, - title: '2020 FDI Outflows (AED)', + context: context, + icon: PopupAssetPath.outflows, + title: context.translate('2020 FDI Outflows (AED)','2020 تدفقات الاستثمار الأجنبي المباشر الخارجية (درهم)'), value: '4.75 B', growthRate: '-15.94%', isPositive: false, ), - const Divider(), + lineBorder, _FDIItem( - icon: Icons.swap_horizontal_circle_outlined, - title: '2020 FDI Inflows (AED)', + context: context, + icon: PopupAssetPath.inflows, + title: context.translate('2020 FDI Inflows (AED)','2020 تدفقات الاستثمار الأجنبي المباشر (درهم)'), value: '14.75 B', growthRate: '-39.68%', isPositive: false, ), - const Divider(), + lineBorder, _FDIItem( - icon: Icons.thumb_up_alt_outlined, - title: '2021 FDI Stocks (AED)', + context: context, + icon: PopupAssetPath.stocks, + title: context.translate('2021 FDI Stocks (AED)','2021 أسهم الاستثمار الأجنبي المباشر (درهم)'), value: '18.98 B', growthRate: '89.75%', isPositive: true, @@ -438,35 +517,29 @@ 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, - title: '2021 Total Trade (AED)', + context: context, + icon: PopupAssetPath.trade, + title: context.translate('2021 Total Trade (AED)','2021 إجمالي التجارة (درهم)'), value: '603 B', growthRate: '39.89%', isPositive: true, ), - const Divider(), + lineBorder, _TradeItem( - icon: Icons.download_outlined, - title: '2021 Imports (AED)', + context: context, + icon: PopupAssetPath.imports, + title: context.translate('2021 Imports (AED)','2021 الواردات (درهم)'), value: '272.9 B', growthRate: '40.79%', isPositive: true, ), - const Divider(), + lineBorder, _TradeItem( - icon: Icons.upload_outlined, - title: '2021 Exports (AED)', + context: context, + icon: PopupAssetPath.exports, + title: context.translate('2021 Exports (AED)','الصادرات (درهم)'), value: '330.1 B', growthRate: '39.15%', isPositive: true, @@ -479,103 +552,164 @@ 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), + Padding( + padding: const EdgeInsets.all(16.0), + child: Center( + child: Text( + textAlign: TextAlign.center, + context.translate('UAE Bilateral Trade (2022)','التجارة الثنائية بين الإمارات العربية المتحدة (2022)'), + style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), ), ), ), - const SizedBox(height: 16), - const Center( - child: Text( - 'UAE Bilateral Trade (2022)', - style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), - ), - ), const SizedBox(height: 8), - const Center( - child: Text( - 'Total \$472.5M', - style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), + Center( + child: Text.rich( + TextSpan( + text:context.translate('Total ','المجموع '), + style: TextStyle(fontSize: 20,), + children: [ + TextSpan( + text:'\$472.5M', + style: TextStyle(fontSize: 28,fontWeight: FontWeight.w500), + + ) + ] + ) ), ), const SizedBox(height: 16), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: const [ - _BilateralTradeValueBox( - label: 'Total Import', - value: '\$390.2M', - color: Color(0xFF00B292)), - _BilateralTradeValueBox( - label: 'Total Export', - value: '\$42.2M', - color: Color(0xFFDE4D86)), - _BilateralTradeValueBox( - label: 'Total ReExport', - value: '\$40.2M', - color: Color(0xFF4D52A1)), - ], + Center( + child: Container( + decoration: BoxDecoration( + color: Color(0xFFF8F8F8), + borderRadius: BorderRadius.circular(10), + ), + alignment: Alignment.center, + width: screenWidth * 0.90, + child:Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + _BilateralTradeValueBox( + label: context.translate('Total Import','إجمالي الواردات'), + value: '\$390.2M', + color: Color(0xFF5BB3AA), + isSelected: updateTrade, + defaultTrade:bilateralTrade + ), + _BilateralTradeValueBox( + label: context.translate('Total Export','إجمالي الصادرات'), + value: '\$42.2M', + color: Color(0xFFB57184), + isSelected: updateTrade, + defaultTrade: bilateralTrade, + ), + _BilateralTradeValueBox( + label: context.translate('Total ReExport','إجمالي إعادة التصدير'), + value: '\$40.2M', + color: Color(0xFF243E83), + isSelected: updateTrade, + defaultTrade: bilateralTrade, + ), + ], + ), + ), ), const SizedBox(height: 24), - const Center( + Center( child: Text( - 'Top 5 Import Commodities', + context.translate('Top 5 $bilateralTrade Commodities','أهم 5 سلع $bilateralTrade'), style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.bold, - color: Color(0xFF4FBFA8)), + fontSize: 20, + fontWeight: FontWeight.bold, + color: Color(0xFF4FBFA8),), ), ), const SizedBox(height: 12), - _CommodityRow( - icon: Icons.eco, - label: 'Vegetable Products', - value: '\$198.6M'), - _CommodityRow( - icon: Icons.liquor, - label: 'Foodstuffs, Beverages, Spirits And Tobacco', - value: '\$89.9M'), - _CommodityRow( - icon: Icons.build, - label: 'Base Metals And Articles Of Base Metal', - value: '\$65.6M'), - _CommodityRow( - icon: Icons.pets, - label: 'Live Animals And Their Products', - value: '\$23.7M'), - _CommodityRow( - icon: Icons.science, - label: 'Products Of The Chemical or Allied Industries', - value: '\$4.7M'), + yellowDivider, + Expanded( + child: ListView.separated( + itemCount: tradeList.length, + itemBuilder: (context, index) { + final item = tradeList[index]; + return ListTile( + contentPadding: EdgeInsets.symmetric(horizontal: 10,vertical: 1), + leading: Image.asset( + item['image'], + width: 30, + height: 30, + ), + title: Text( + context.translate(item['content-eng'], item['content-ar']), + style: const TextStyle(fontSize: 15,fontWeight: FontWeight.w500) + ), + trailing: Text( + '\$${item['value']}', + style: const TextStyle(fontSize: 15, + fontWeight: FontWeight.w500, + color: Color(0xFF54AFA6),), + ), + ); + }, + separatorBuilder: (context, index) => Padding( + padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2), + child: yellowDivider, // or use Dash widget if using flutter_dash package + ), + ), + ), + // _CommodityRow( + // icon: PopupAssetPath.vegetable, + // label: context.translate('Vegetable Products','المنتجات النباتية'), + // value: '\$198.6M',), + // yellowDivider, + // _CommodityRow( + // icon: PopupAssetPath.food, + // label: context.translate('Foodstuffs, Beverages, Spirits And Tobacco','المواد الغذائية والمشروبات والمشروبات الروحية والتبغ'), + // value: '\$89.9M',), + // yellowDivider, + // _CommodityRow( + // icon: PopupAssetPath.metal, + // label: context.translate('Base Metals And Articles Of Base Metal','المعادن الأساسية ومصنوعاتها'), + // value: '\$65.6M',), + // yellowDivider, + // _CommodityRow( + // icon: PopupAssetPath.animal, + // label: context.translate('Live Animals And Their Products','الحيوانات الحية ومنتجاتها'), + // value: '\$23.7M',), + // yellowDivider, + // _CommodityRow( + // icon: PopupAssetPath.chemical, + // label: context.translate('Products Of The Chemical or Allied Industries','منتجات الصناعات الكيميائية أو المرتبطة بها'), + // value: '\$4.7M',), const SizedBox(height: 16), ], ); default: - return Center(child: Text('$category details coming soon.')); + return Center(child: Text('${widget.category} details coming soon.')); } } } Widget _DemographyItem({ - required IconData icon, + required String icon, required String title, required String value, + required BuildContext context, }) { 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),fontSize: 20),), const SizedBox(height: 4), Text( value, - style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16), + style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20), textAlign: TextAlign.center, ), ], @@ -583,197 +717,315 @@ 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), - const SizedBox(height: 4), - Text(title, style: const TextStyle(color: Colors.grey)), - const SizedBox(height: 4), - RichText( - textAlign: TextAlign.center, - text: TextSpan( - children: [ - TextSpan( - text: '$value ', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16, - color: valueColor ?? Colors.black, - ), - ), - if (suffix != null) - TextSpan( - text: suffix, - style: suffixStyle ?? - const TextStyle(fontSize: 12, color: Colors.green), - ), - ], - ), + Image.asset( + icon, + width: 40, + height: 40, ), + const SizedBox(height: 4), + Text(title, style: const TextStyle(color: Color(0xFF666666),fontSize: 16)), + const SizedBox(height: 4), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + value, + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 28, + color: valueColor ?? Colors.black, + ), + ), + SizedBox(width: 6,), + if (suffix != null) + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Text( + suffix, + style: suffixStyle ?? + 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 BuildContext context, + 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),fontSize: 16)), const SizedBox(height: 4), - RichText( - textAlign: TextAlign.center, - text: TextSpan( - children: [ - TextSpan( - text: '$value ', - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 18, - color: Colors.black, - ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + value, + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 28, + color: Colors.black, ), - TextSpan( - text: '$rank $rankDirection\n', - style: TextStyle( - fontSize: 12, - color: rankColor, - ), + ), + SizedBox(width: 12,), + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + Text( + rank, + style: TextStyle(fontSize: 16, color:rankColor,fontWeight: FontWeight.w500),), + Icon(rankDirection, size: 16, color: rankColor), + ], + ), + Text( + context.translate('Rank','رتبة'), + style: const TextStyle(fontSize: 12, color: Color(0xFF666666)), + ), + ], ), - const TextSpan( - text: 'Rank', - style: TextStyle(fontSize: 10, color: Colors.grey), - ), - ], - ), + ], ), ], ); } Widget _FDIItem({ - required IconData icon, + required String icon, required String title, required String value, required String growthRate, required bool isPositive, + required BuildContext context, }) { return Column( children: [ - Icon(icon, size: 32, color: Colors.grey), - const SizedBox(height: 4), - Text(title, style: const TextStyle(color: Colors.grey)), - const SizedBox(height: 4), - Text( - value, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 18, - color: Colors.black, - ), + Image.asset( + icon, + width: 40, + height: 40, ), - const SizedBox(height: 2), - Text( - '$growthRate Growth Rate', - style: TextStyle( - color: isPositive ? Colors.green : Colors.red, - fontSize: 12, + const SizedBox(height: 4), + Text(title, style: const TextStyle(color: Colors.grey,fontSize: 16),), + const SizedBox(height: 4), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + value, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 28, + color: Colors.black, + ), ), + const SizedBox(width: 12,), + Column( + children: [ + Row( + children: [ + Text( + growthRate, + style: TextStyle(fontSize: 16, color:isPositive ? Colors.green : Colors.red,fontWeight: FontWeight.w500), + ), + Icon(isPositive ? Icons.arrow_upward:Icons.arrow_downward, size: 16, color: isPositive ? Colors.green : Colors.red), + ], + ), + + Text( + context.translate('Growth Rate',''), + style: const TextStyle(fontSize: 12, color: Color(0xFF666666)), + ), + + + ], + ), + + ], ), ], ); } Widget _TradeItem({ - required IconData icon, + required String icon, required String title, required String value, required String growthRate, required bool isPositive, + required BuildContext context, }) { return Column( children: [ - Icon(icon, size: 32, color: Colors.grey), - const SizedBox(height: 4), - Text(title, style: const TextStyle(color: Colors.grey)), - const SizedBox(height: 4), - Text( - value, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 18, - color: Colors.black, - ), + Image.asset( + icon, + width: 40, + height: 40, ), - const SizedBox(height: 2), - Text( - '$growthRate Growth Rate', - style: TextStyle( - color: isPositive ? Colors.green : Colors.red, - fontSize: 12, - ), + const SizedBox(height: 4), + Text(title, style: const TextStyle(fontSize: 16,color: Colors.grey)), + const SizedBox(height: 4), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + value, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 28, + color: Colors.black, + ), + ), + const SizedBox(width: 12,), + Column( + children: [ + Row( + children: [ + Text( + growthRate, + style: TextStyle(fontSize: 16, color:isPositive ? Colors.green : Colors.red,fontWeight: FontWeight.w500), + ), + Icon(isPositive ? Icons.arrow_upward:Icons.arrow_downward, size: 16, color: isPositive ? Colors.green : Colors.red), + ], + ), + + Text( + context.translate('Growth Rate','معدل النمو'), + style: const TextStyle(fontSize: 12, color: Color(0xFF666666)), + ), + + + ], + ), + + ], ), ], ); } -class _BilateralTradeValueBox extends StatelessWidget { +class _BilateralTradeValueBox extends StatefulWidget { final String label; final String value; final Color color; + final String Function(String) isSelected; + final String? defaultTrade; const _BilateralTradeValueBox({ required this.label, required this.value, required this.color, + required this.isSelected, + this.defaultTrade, }); @override + State<_BilateralTradeValueBox> createState() => _BilateralTradeValueBoxState(); +} + +class _BilateralTradeValueBoxState extends State<_BilateralTradeValueBox> { + late String title; + + @override + void initState() { + super.initState(); + title = widget.label.split(' ').last; + } + + @override + Widget build(BuildContext context) { - return Container( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), - decoration: BoxDecoration( - color: color.withOpacity(0.1), - borderRadius: BorderRadius.circular(10), - border: Border.all(color: color), - ), - child: Column( - children: [ - Text( - label, - style: TextStyle(fontSize: 12, color: color), - ), - const SizedBox(height: 4), - Text( - value, - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 14, - color: color, + final bool selected=title==widget.defaultTrade; + return GestureDetector( + onTap: (){ + setState(() { + widget.isSelected(title); + }); + }, + child: Container( + height: 90, + padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 8), + decoration: BoxDecoration( + color: selected?Colors.white:Colors.transparent, + borderRadius: BorderRadius.circular(10), + border: selected?Border.all(color:Color(0xFFAA8E83)):null, + boxShadow:selected ?[ + BoxShadow( + color: Color(0xFFAA8E83).withValues(alpha: 0.5), + blurRadius: 15, + spreadRadius: 0, + offset: Offset( + 0, + 5, + ), ), - ), - ], + ]:null, + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + widget.label, + style: TextStyle(fontSize: 13), + ), + const SizedBox(height: 4), + Text( + widget.value, + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 22, + color: widget.color, + ), + ), + ], + ), ), ); } } Widget _CommodityRow({ - required IconData icon, + required String icon, required String label, required String value, }) { @@ -781,15 +1033,20 @@ Widget _CommodityRow({ padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 12), child: Row( children: [ - Icon(icon, size: 20, color: Colors.grey[600]), + Image.asset( + icon, + width: 35, + height:35, + ), const SizedBox(width: 12), Expanded( - child: Text(label, style: const TextStyle(fontSize: 14)), + child: Text(label, style: const TextStyle(fontSize: 13,fontWeight: FontWeight.w500)), ), Text( value, - style: const TextStyle( - fontWeight: FontWeight.bold, color: Colors.teal), + style: const TextStyle(fontSize: 13, + fontWeight: FontWeight.w500, + color: Color(0xFF54AFA6),), ), ], ), @@ -799,18 +1056,22 @@ Widget _CommodityRow({ void showCategoryPopup(BuildContext context, String category) { showDialog( context: context, - barrierColor: Colors.black.withOpacity(0.3), + barrierColor: Colors.black.withValues(alpha: 0.3), builder: (context) => BackdropFilter( filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), - child: Dialog( - backgroundColor: Colors.white, - insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40), - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(16), - ), - child: Padding( - padding: const EdgeInsets.all(16.0), - child: CategoryPopupContent(category: category), + child: Theme( + data: ThemeData( + fontFamily: context.translate( + 'Roboto', + 'NotoKufi', + ),), + child: Dialog( + backgroundColor: Colors.white, + insetPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 40), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(16), + ), + child: CategoryPopupContent(category: category), ), ), ), diff --git a/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/country_profile.dart b/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/country_profile.dart index cc6306f9..5847afc9 100644 --- a/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/country_profile.dart +++ b/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/country_profile.dart @@ -1,7 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:shared_preferences/shared_preferences.dart'; import 'package:go_router/go_router.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:uae_stat/config/theme/theme_provider.dart'; @@ -9,18 +8,191 @@ import 'package:uae_stat/domain/use_cases/language.dart'; import 'package:uae_stat/infrastructure/services/img_asset_paths/icons/misc_icon_asset_path.dart'; import 'package:uae_stat/presentation/routes/drawer_routes/custom_drawer_routes.dart'; import 'package:fl_chart/fl_chart.dart'; +import 'package:external_repos/external_repos.dart'; +import 'package:flutter_hooks/flutter_hooks.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:hooks_riverpod/hooks_riverpod.dart'; -final localeProvider = StateProvider((ref) => const Locale('en')); +// final localeProvider = StateProvider((ref) => const Locale('en')); -class CountryProfilePage extends ConsumerStatefulWidget { - const CountryProfilePage({Key? key}) : super(key: key); +// class CountryProfilePage extends ConsumerStatefulWidget { +// const CountryProfilePage({Key? key}) : super(key: key); +// +// @override +// ConsumerState createState() => _CountryProfilePageState(); +// } +// +// class _CountryProfilePageState extends ConsumerState { +// final TextEditingController _searchController = TextEditingController(); +// +// final List> _allCountries = [ +// {"name": "Afghanistan", "flag": "🇦🇫",'code':'AF'}, +// {"name": "Albania", "flag": "🇦🇱",'code':'AL'}, +// {"name": "Algeria", "flag": "🇩🇿",'code':'DZ'}, +// {"name": "American Samoa", "flag": "🇦🇸",'code':'AS'}, +// {"name": "Andorra", "flag": "🇦🇩",'code':'AD'}, +// {"name": "Angola", "flag": "🇦🇴",'code':'AO'}, +// {"name": "Anguilla", "flag": "🇦🇮",'code':'AI'}, +// {"name": "Antigua And Barbuda", "flag": "🇦🇬",'code':'AG'}, +// {"name": "Argentina", "flag": "🇦🇷",'code':'AR'}, +// {"name": "Armenia", "flag": "🇦🇲",'code':'AM'}, +// {"name": "Aruba", "flag": "🇦🇼",'code':'AW'}, +// {"name": "Australia", "flag": "🇦🇺",'code':'AU'}, +// {"name": "Austria", "flag": "🇦🇹",'code':'AT'}, +// {"name": "Azerbaijan", "flag": "🇦🇿",'code':'AZ'}, +// {"name": "Bahamas", "flag": "🇧🇸",'code':'BS'}, +// {"name": "Bahrain", "flag": "🇧🇭",'code':'BH'}, +// {"name": "Bangladesh", "flag": "🇧🇩",'code':'BD'}, +// ]; +// +// String _searchTerm = ''; +// +// void filterData(String value) { +// setState(() => _searchTerm = value); +// } +// +// @override +// Widget build(BuildContext context) { +// final locale = AppLocalizations.of(context)!; +// final filtered = _allCountries +// .where((c) => c['name']!.toLowerCase().contains(_searchTerm.toLowerCase())) +// .toList(); +// +// double myheight = MediaQuery.of(context).size.height; +// double mywidth = MediaQuery.of(context).size.width; +// +// return PopScope( +// canPop: false, +// onPopInvokedWithResult: (didPop, result) { +// if (didPop) return; +// context.go('/myhomepage'); +// }, +// child: BaseScaffold( +// title: Text( +// context.translate( +// 'Country Profile', +// 'ملف الدولة', +// ), +// style: TextStyle( +// fontFamily: context.translate( +// 'Roboto', +// 'NotoKufi', +// ) +// ), +// ), +// body: Column( +// children: [ +// Padding( +// padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 12.0), +// child: Container( +// decoration: BoxDecoration( +// color: Colors.white, +// borderRadius: BorderRadius.circular(30.0), +// border: Border.all(width: 1, color: Color(0xFFAA8E83)), +// ), +// child: TextField( +// controller: _searchController, +// onChanged: (value) { +// filterData(value); +// }, +// decoration: InputDecoration( +// hintText: AppLocalizations.of(context)!.searchCountry, +// hintStyle: TextStyle( +// color: Color(0xFFAA8E83), +// fontFamily: context.translate('Roboto', 'NotoKufi'), +// fontSize: 14, +// height: 1.8, +// ), +// prefixIconConstraints: BoxConstraints( +// maxWidth: 42, +// maxHeight: 42, +// ), +// prefixIcon: Container( +// padding: EdgeInsets.only(right: 5, left: 5), +// alignment: Alignment.center, +// child: SvgPicture.asset( +// MiscIconAssetPath.Search, +// semanticsLabel: 'Search', +// colorFilter: ColorFilter.mode(Color(0xFFAA8E83), BlendMode.srcIn), +// height: 18, +// width: 18, +// ), +// ), +// suffixIcon: _searchController.text.isNotEmpty +// ? IconButton( +// icon: Icon( +// Icons.clear, +// color: Color(0xFFAA8E83), +// size: 18, +// ), +// onPressed: () { +// _searchController.clear(); +// filterData(''); +// }, +// ) +// : null, +// border: InputBorder.none, +// contentPadding: EdgeInsets.symmetric(vertical: 9, horizontal: 18.0), +// ), +// ), +// ), +// ), +// +// // Updated section for "No country found" +// Expanded( +// child: filtered.isEmpty +// ? Center( +// child: Text( +// 'No country found', +// style: TextStyle( +// fontSize: 16, +// color: Colors.grey, +// fontWeight: FontWeight.w500, +// ), +// ), +// ) +// : ListView.builder( +// itemCount: filtered.length, +// itemBuilder: (context, index) { +// final country = filtered[index]; +// return ListTile( +// leading: Text( +// country['flag']!, +// style: const TextStyle(fontSize: 24), +// ), +// title: Text(country['name']!), +// onTap: () { +// context.push('/country-profile-detail', extra: { +// 'countryName': country['name'] as String, +// 'flag': country['code'] as String, +// }); +// }, +// ); +// }, +// ), +// ), +// ], +// ), +// ), +// ); +// } +// } + +class ListCountriesRoute extends HookConsumerWidget { + const ListCountriesRoute({super.key}); @override - ConsumerState createState() => _CountryProfilePageState(); -} + Widget build(BuildContext context, WidgetRef ref) { + final screenWidth = MediaQuery.of(context).size.width; + final _searchController = useTextEditingController(); + final searchTerm = useState(''); -class _CountryProfilePageState extends ConsumerState { - final TextEditingController _searchController = TextEditingController(); + final filteredCountries = ISOCountry.values.where((country) { + final query = searchTerm.value.trim().toLowerCase(); + if (query.isEmpty) return true; // 🔥 show all if search is empty + return country.nameEN.toLowerCase().contains(query) || + country.nameAR.toLowerCase().contains(query); + }).toList(); final List> _allCountries = [ {"name": "Afghanistan", "flag": "🇦🇫"}, @@ -140,44 +312,118 @@ class _CountryProfilePageState extends ConsumerState { ), ), ), - ), - - // Updated section for "No country found" - Expanded( - child: filtered.isEmpty - ? Center( - child: Text( - 'No country found', - style: TextStyle( - fontSize: 16, - color: Colors.grey, - fontWeight: FontWeight.w500, + child: SearchBar( + constraints: BoxConstraints( + maxWidth: MediaQuery.of(context).size.width*0.9, + maxHeight: 50, + ), + elevation: WidgetStatePropertyAll(0), + backgroundColor: WidgetStatePropertyAll(Colors.white), + controller: _searchController, + hintText: AppLocalizations.of(context)!.searchCountry, + hintStyle: WidgetStateProperty.all( + TextStyle( + color: Color(0xFFAA8E83), + fontFamily: context.translate('Roboto', 'NotoKufi'), + fontSize: 14, + height: 1.8, ), ), - ) - : ListView.builder( - itemCount: filtered.length, - itemBuilder: (context, index) { - final country = filtered[index]; - return ListTile( - leading: Text( - country['flag']!, - style: const TextStyle(fontSize: 24), - ), - title: Text(country['name']!), - onTap: () { - context.push('/country-profile-detail', extra: { - 'countryName': country['name'] as String, - 'flag': country['flag'] as String, - }); - }, - ); + leading: Container( + padding: EdgeInsets.only(right: 5, left: 5), + alignment: Alignment.center, + constraints: BoxConstraints( + maxWidth: 42, + maxHeight: 42, + ), + child: SvgPicture.asset( + MiscIconAssetPath.Search, + semanticsLabel: 'Search', + colorFilter: ColorFilter.mode(Color(0xFFAA8E83), BlendMode.srcIn), + height: 18, + width: 18, + ), + ), + onChanged: (value){ + searchTerm.value=value; }, ), ), - ], + ), + Expanded( + child: ValueListenableBuilder( + valueListenable: _searchController, + builder: (context, value, child){ + if (filteredCountries.isEmpty) { + return Center( + child: Text( + context.translate( + 'No countries match your search term.', + 'لا توجد بلدان تتطابق مع مصطلح البحث الخاص بك.', + ), + ), + ); + } + return ListView.builder( + itemCount: filteredCountries.length, + itemBuilder: (context, index)=> _CountryListTile( + key: ValueKey(filteredCountries[index].alpha2), + countryCode: filteredCountries[index].alpha2,), ); + },), + ) + ], + ), title: Text('Country Profile'), + ); + return body; + } +} + +class _CountryListTile extends ConsumerWidget { + const _CountryListTile({ + required super.key, + required this.countryCode, + }); + + final String countryCode; + + @override + Widget build(BuildContext context, WidgetRef ref) { + final country = ISOCountry.fromAlpha2(countryCode); + final flag = Image.asset( + country.flagImgPath, + fit: BoxFit.contain, + height: 18, + width: 18 * (3 / 2), + cacheHeight: 32, + cacheWidth: 48, + ); + return ListTile( + leading: flag, + contentPadding: const EdgeInsets.symmetric( + horizontal: 24, + vertical: 0, ), - ), + dense: true, + minTileHeight: 40, + title: Text( + context.translate( + country.nameEN, + country.nameAR, + ), + style: TextStyle( + fontFamily: context.translate( + 'Roboto', + 'NotoKufi', + ), + fontSize: 14, + fontWeight: FontWeight.w400, + ), + ), + onTap: () => context.push('/country-profile-detail', extra: { + 'countryName': country.nameEN, + 'flag': country.alpha2, + }) ); } } +