‫‪Localizations‬‬

‫تعريفها ‪:‬‬
‫‪ -‬عباره عن اداه ‪ built in flutter‬من خاللها بقدر اخلي التطبيق‬
‫يدعم أكتر من لغه‪.‬‬
‫‪ -‬محتاج استدعيها داخل ملف ‪ pubsec.yaml‬كما بالصوره التاليه‪:‬‬

‫عشان اقدر اتعامل مع ‪ localizations‬بالتطبيق محتاج‬

‫استدعي كام حاجه داخل ‪ MaterialApp‬زي ‪:‬‬
‫▪ ‪: supportedLocales‬‬
 ‫• بتقبل ‪ List of Locale‬من خاللها بقدر احدد اللغات اللي‬
‫هيدعمها التطبيق‪.‬‬
‫• خلي بالك ‪ Locale‬بتحتوي ع ‪ arguments 2‬واللي هم‬
‫‪ languageCode‬او ‪ ISO code for language‬وده‬
‫اللي هو اول حرفين ف اللغه زي ‪ en‬ف االنجليزيه و ‪ ar‬للغه‬
‫العربيه بجانب ‪ country name‬وده ‪ optional‬ويفضل عدم‬
‫اسناد قيمها عشان لو عملت عربيه وحددت مصر ‪ ،‬لو الشخص‬
‫سعودي وعامل اللغه عربي سعودي مش هيدعمه التطبيق‪.‬‬

‫ف االفضل تكون كالتالي ‪:‬‬

‫بالتالي لو عامل اللغه عربي تبع دوله مصري او تبع اي دوله عربيه‬
‫التطبيق راح يدعمها الن محددتش ‪for name country‬‬
‫‪.language‬‬
 ‫▪ ‪: localizationsdelgates‬‬
‫ده بتقبل ‪List of Delegates‬‬ ‫•‬

‫كلمه ‪ delegate‬ده معناها مندوب‬ ‫•‬

‫• بالنسبه الول عنصر واخر عنصر ب ‪ list‬دول فايدتهم انها‬

‫بتخلي التطبيق يعمل ترجمه تلقائي لبعض الحاجات ‪built in‬‬
‫‪ Flutter‬زي مثال ‪ AlertDialog‬عندك لو التطبيق باالنجليزي‬
‫بتالقي ظهر لك ‪ buttons 2‬واحد ‪ ok‬والتاني ‪ cancel‬نفس‬
‫الشئ لو التطبيق عربي هتالقي ظهر نعم ‪ ،‬الغاء ‪ ،‬ف السطرين‬
‫دول بينتدبوا الكالس المسؤل انه يجيب كلمات ‪ widgets‬ده‬
‫علي حسب لغه التطبيق‪.‬‬
‫‪GlobalMaterialLocalizations.delegate‬‬
‫‪GlobalCupertinoLocalizations.delegate‬‬
‫ف االتنين دول زي مندوبين بيوفروا ليا الحاجه اللي هم معمولين‬
‫عشانها اال وهي جلب كلمات خاصه بالويدجت بناء علي لغه‬
‫التطبيق‪.‬‬
‫• بالنسبه لسطر‬
‫‪ GlobalWidgetsLocalizations.delegate‬ده بينتدب‬
‫الكالس المسؤل انه يهندل اتجاه ‪ widgets‬بناء علي لغه‬
 ‫التطبيق بمعني لو التطبيق انجليزي هتالقي اتجاها من الشمال‬
‫لليمين ولو عربي هيكون العكس‪.‬‬
‫‪ -‬بنفس فكره ‪ delegate‬هعمل انا ‪ delegate‬خاص بيا هيكون فيه‬
‫كلمات معينه مره بالعربيه ومره باالنجليزيه وهبقي اخد مندوب من‬
‫الكالس ده وهباصيه داخل ‪ List of delegate‬الخاصه ب‬
‫‪ property‬اللي اسمها ‪. localizationsDelegates‬‬

‫▪ ‪: resolutionCallBck‬‬
‫‪ o‬ده بتقبل داله بيجيلها ‪ two parameters‬وهما‬
‫‪ deviceLocale‬وده اللغه اللي شغال بها التطبيق حاليا وهو‬
‫شغال يعني بجانب ‪ supportLocales‬اللغات اللي بيدعمها‬
‫التطبيق واللي انا حددتها من خالل ‪supportedLocales‬‬
‫باألعلي‪.‬‬

‫‪ o‬هعمل ‪ loop‬علي ‪ supportedLocales‬عشان اشوف اذا كانت‬

‫م الدعومه يرجعها مش منها يرجع لغه انا هحددها وليكن اول لغه في‬
‫‪ supportedLocales‬بمعني هنا لو هو لغه الفون فرنسي‬
‫هيرجع اول لغه ب ‪ List of Locales‬اال وهي االنجليزيه ‪ ،‬طب‬
‫لو لغه الجهاز عربيه هيرجع العربيه الن التطبيق بيدعمها‪.‬‬
 ‫عمل ملفات ‪: json‬‬
‫دلوقتي بقي محتاج اعمل ملفين واحد خاص باللغه العربيه والتاني‬
‫االنجليزيه وهعمل بداخل كل واحد ‪ Map‬وهحط الكلمات بتاعتي ف االتنين‬
‫مع مراعاه ان ‪ key‬ف االتنين يكون واحد عشان لو جت ب ‪ access‬ع‬
‫كلمه معينه واللغه عربي يجيب الكلمه من ملف ‪ ar.json‬ولو باالنجليزي‬
‫يجيبها من ملف ‪ en.json‬بالتالي الزم ‪ key‬لنفس الكلمه يكون واحد‬
‫واللي هيختلف بس ‪.value‬‬

‫الزم استدعي الملف اللي حطت فيه الملفين واللي هو ‪ assets‬بداخل‬

‫‪ pubspec.yaml‬عشان اقدر بعدين اقرأ الملفين دول‪.‬‬
‫• الفكره من عمل الملفين هحتاج اقرأ الملفين واخزنهم ف‬
‫‪ String‬ومن ثم اعمل ‪ json decode for‬بالتالي هيكون ف‬
‫ايدي ‪ Map‬اللي ف كل ملف ف اقدر اعمل ‪ access‬علي‬
‫الكلمه اللي عاوزها من خالل ‪. key‬‬
‫‪------------------------------------------------------------------------‬‬
‫هعمل بقي ‪ delegate‬خاص بيا ‪ ،‬هيكون مسؤل ان يعمل ‪ load‬للكلمات‬
‫اللي حطتها ف ملفي ‪ json‬ويوفرها عند استدعائها زي ‪delegates‬‬
‫اللي استدعيتها داخل ‪: localizationsDelegates‬‬
‫‪ -‬طبعا هحتاج اباصيه ل ‪ localizationsDelegates‬اما اخلصه‪.‬‬
‫‪ Delegate -‬ده عباره ع كالس هيكون موجود داخل االساسي اللي‬
‫هعمله وال ‪ delegate‬هيكون عباره ع ‪ instance‬هعمله بداخل‬
‫الكالس االساسي بتاعي‪.‬‬
‫توضيحا للكالم اللي باألعلي ‪:‬‬
‫• هعمل كالس وليكن ‪ AppLocalizations‬هيكون فيه كل ما‬
‫يتعلق ب ‪ localizations‬سواء قراءه ملفي ‪ json‬او تخزين‬
‫‪ map‬اللي بهما ف ‪ Map‬لحتي اتعامل معاها بداخل التطبيق او‬
‫داله ترجمه الكلمه‪.‬‬

‫ده الكالس الخاص ب ‪ localizations‬اللي بعمله‪.‬‬

 ‫‪ -‬بالنسبه للمتغير ‪ locale‬عامله عشان ابقي اخد ‪ Locale‬اللي‬
‫شغال بها التطبيق الن بناء عليها هعمل ‪ load json file‬بس بتاع‬
‫اللغه ده بس وهكذا‪.‬‬
‫‪ -‬بالنسبه للميثود )(‪ of‬ده عشان اعمل ‪instance from this‬‬
‫‪ Class‬عشان اطبق مبدأ ‪ Dependency injection‬بعمني‬
‫اعمل ‪one instance from this class will be used‬‬
‫‪ ، across the app throw this method‬عملت‬
‫)‪Localizations.of(context, name of this class‬‬
‫عشان اعرف فالتر ان الكالس ده بيخص ‪ Localizations‬ألن انا‬
‫معملتش ‪ implement for abstract class‬او اي حاجه‬
‫لهيك حطيت السطر ده‪.‬‬
‫• قريبه من فكره ‪ getInstance method‬اللي كنت بعملها مع‬
‫الكالس اللي كان بيرث من الكيوبيت ‪ ،‬ف ده كانت بتعمل اوبجيكت‬
‫م الكالس بس كنت بستعمل ‪.BlocProvider‬‬
‫• نفس الشئ لو كنت عاوز اعمل ‪ instance‬من كيوبيت معين‬
‫كالس يعني كنت عامله كنت بعمل‬
‫)‪BlocProvider.of<className>(context‬‬
‫نفس الفكره بعمل ‪ instance from Localizations‬بس‬
‫حددت ‪ type‬تبعها واللي هو ‪.AppLocalizations‬‬

‫توضيحا للنقطه ده ‪:‬‬

 ‫نفس الفكره بالضبط انا عندي ‪ AppLocalizations‬هيكون تبع‬
‫‪ Localizations‬وعشان اعرف فالتر ب ده عملت‬
‫>‪Localizations.of<className‬عشان اعمله ‪ Inject‬لل‬
‫‪ children‬اللي تحته‪.‬‬
 ‫‪ -‬يعني عشان ‪ create‬اوبجيكت م ‪ localization‬ده بحيث يكون‬
‫‪ provide‬لل ‪ children‬عملت كده‬
‫)‪Localizations.of<myClass>(context‬‬
‫بكده انا عرفت فالتر ان ‪ AppLocalizations‬ده هو اللي مسؤل‬
‫ع ‪.localizations‬‬
‫بالنسبه لملفات ‪ json‬اول اما بجيبهم ( بقرأ الملفات يعني )‬
‫بيكونوا ك ‪ String‬ف الزم بعدين اعمل ‪ decode‬للملفات ده الن‬
‫بداخلها ‪ json‬عشان اقدر اتعامل مع ‪ Map‬اللي بداخلهم‪.‬‬

‫‪ -‬هعمل قراءه لملف واحد ف االتنين بناء علي ‪current Locale‬‬

‫واللي هأخدها من خالل ‪ argument‬تبع ‪ ، constructor‬بس‬
‫ازاي ‪....‬‬
‫• هيكون من خالل‬
‫)‪rootBundle.loadString(file’s path‬‬
‫‪ -‬بالنسبه للباث هجيبه من خالل ‪ locale.languageCode‬بما ان‬
‫مسمي ‪ files‬علي اسماء ‪. languageCode‬‬
‫‪ -‬هنا عملت ‪ decode for json file‬وخزنت ‪ map‬داخل متغير‬
‫اسمه ‪ jsonMap‬من خالل ‪.....‬‬
‫)‪json.decode(json file that I read‬‬
‫‪ -‬خلي بالك ‪ map‬بتكون‬
‫‪by default in Flutter String,dymanic‬‬
‫‪ -‬عشان كده هعمل ماب علي ‪ map‬اللي جايه م الملف واحول‬
‫ل ‪ value String‬الن هي اكيد هتكون ‪ String‬كما بالصوره‬
‫التاليه ‪:‬‬
 ‫اخر حاجه هعمل داله بتجيب الكلمه م ‪ Map‬بناء علي ‪ key‬اللي‬
‫هباصيه بس لو ‪ key‬مش موجود هخليه يرجع نص فاضي ‪:‬‬

‫اخر خطوه محتاج اعمل كالس تاني خاص ب ‪ delegate‬الفعلي ‪:‬‬

‫‪ -‬الن الكالس ده هعمل منه ‪ instance‬بداخل‬
‫‪ AppLocalizations‬عشان ف ‪ MaterialApp‬داخل‬
‫‪ property‬اللي اسمها ‪ localizationsDelegates‬هباصي‬
‫بقي ‪ instance‬ده واللي هيكون مسؤل ان يوفر لي الكلمات اللي‬
‫حطتها بداخل ملفي ‪ json‬بناء علي لغه التطبيق ‪.‬‬
 ‫الحظ هنا ‪:‬‬
‫• هو بيرث من ‪ LocalizationDelegates‬وحددت النوع‬
‫تبعه واللي هو ‪ AppLocalizations‬بس الكالس ده من‬
‫نوع ‪ abstract‬ف انا بحاجه لعمل ‪ override‬ل ‪three‬‬
‫‪ methods‬مهمه‪.‬‬
‫توضيح لل ‪ functions‬اللي عملتلها ‪: override‬‬
‫‪ -1‬بالنسبه الول فانكشن ده بتتأكد ان ‪ locale‬اللي جايه بيدعمها التطبيق‬
‫وال الء ‪....‬‬
 ‫ف هنا عملتلها ‪ implement‬ان لو ‪ languageCode‬اللي جاي م‬
‫‪ locale‬بيساوي واحد م االتنين دول يرجع ‪ true‬غير كده ‪.false‬‬
‫‪ - 2‬بالنسبه لتاني فانكشن ف ده المفروض هترجع ‪instance from‬‬
‫‪ AppLocalizations‬بس خلي بالك بتجيبلك م خالل البارمتر ‪locale‬‬
‫ف روحت عملت اوبجكت وبصت ‪ locale‬لل ‪ constructor‬وبعدين‬
‫استدعيت الداله اللي بتعمل ‪ loadJson‬عشان يحمل الملف‪.‬‬

‫‪ - 3‬بالنسبه للفانشكن التالته وده بتنفذ مع كل تحديث للواجهه بمعني انت‬

‫عاوزه يعمل ‪ reload‬مع كل تحديث للواجهه وال الء ف هخليها دايما ب‬
‫‪false‬‬
 : ‫ف االخير‬

AppLocalizations ‫ داخل‬delegate ‫ م ال‬instance ‫عملت‬

‫ عشان اقدر‬static ‫ وخلته‬MaterialApp ‫عشان استدعيه داخل‬
instance from ‫ عليها دون عمل‬access
: ‫ كما موضح بالصوره التاليه‬AppLocalizations
‫ف النهايه بقي هحط الكلمات داخل الملفات لحتي اقدر اصل لها ‪:‬‬
 ‫الحظ ‪ key‬واحده الن نفس الكلمه ولكن ‪ value‬هي اللي مختلفه ناقص‬
‫بقي ان استدعيها ‪.....‬‬

‫ندت علي الداله اللي اسمها )(‪ of‬ومن ثم ‪ translate‬واللي كانت بتجيب‬
‫الكلمه من ‪ Map‬بناء علي ‪ key‬تبعها وع حسب اللغه هترجع القيمه يعني‬
‫هنا عشان انجليزيه جاب !‪.... Hello There‬‬

‫الزم احط الملفات داخل ‪ pubspec.yaml‬لحتي اقدر اقرأها‬

 ‫هنا ظهرت مرحبا اما خلت اللغه عربيه‪.‬‬
‫وهكذا بقي هحط الكلمات اللي عاوزها تتغير علي حسب اللغه ف الملف مع‬
‫ارفاق القيمه ف كال الملفين‪.‬‬
‫مثال من تطبيق فعلي طبقت فيه فكره ‪: localizations‬‬

‫ده بالنسبه ل >‪Localization<MyLocalizations‬‬

 ‫ الفعلي اللي انا عامله واللي بيرث من‬delegate ‫ده بالنسبه ل‬
LocalizationsDelegate<MyLocalizations>