Flutter Tutorial - Localization & Internationalization with INTL & ARB Files

internationalization is a must for each app to adapt and reach more markets and users one approach is that you can choose locally your language and then you show the translation in your app another approach is to take the system language and then this language will be displayed within your application if you change it in your system if you are new here subscribe to my channel and make sure to watch this video till the end to get started with translating your app you need to go to your pop spec jammer file and here you need to add under your dependencies this flutter localizations inside and secondly you also put the intel package under your dependencies inside lastly you go to the flutter tag and here you put this generate to true insight after this make sure that you get your dependencies and then we can go back to our main file within your main file you go to the material app and here you put then a property inside supported locals and here inside we access here this localization class and here the old property which we want to create therefore i have here created a new class and here inside we put then all the locals inside which our app should support and this means that we have later for all of these different languages some translation files in our folders and in our case we will support your english arabic hindi spanish and german and if you later want to integrate another language then you can simply look up for language codes and then you can basically search here for your country for your language and then you can find here this code which you then put here inside now that we have added the supported languages we also want to add some translation for all the different languages in our system first of all you need to add here a file within your root directory and here inside you need to add these three lines the first line defines our input files which are later our translation files and we store them within the lib internationalization folder and this is basically here within the lib i have created this folder and here inside we put later all of our translation files so this is our input secondly we need to add here a template file and this template file we need to put inside of our lib internationalization folder therefore let's go to this folder and let's add here this file app english and this is then later our template file and lastly we need to add here an output statement and this will be later generated with all the different languages which we have put within our template file and the other translation files and now we can go inside of our template file and here inside you can put key value pairs so we have here a key language and the value is in later english and secondly you also need to put here this inside and here you can basically set a description which is later shown within our generated file and within this file we put then all of our english translations inside and now we also want to create all the other files to also put these translations inside therefore i have created right now for each of the locals here a different file and now we can for example go inside of this hindi file and here we add then the translation for this language key and here we put then our value inside which is our language and you also do the same thing for the other files so you put here the key and value inside and also for the other language and like you notice within our template file which is here this app english file we have here more inside like in the other ones so here you only need to put the key value pair inside and the other one you also need to put here this description inside now we have added one translation however you can also add here multiple translations to put simply a key inside and then the value and here within this template file you also need to put the description again inside and after this you also add for all the other files here your key and value again inside and also make sure that you put here between the different key value pairs every time a comma inside and you cannot put here a comma at the end otherwise you will get an arrow so remove it here also after that you have put your all your translations within your files you need to go to your pubspec jumble file and here make sure that you have put this generate to true inside because now you can simply stop your application and then you simply restart it again and sometimes you will see here some errors so it's pointing here to this file and here you see that we have at the end a comma which is not allowed and therefore you also need to remove it and then you can again restart your application after our application was restarted we can go to the dart tool file and here within the flutter gen here we have this folder and here you see that he has created all these different dart files and here we basically have then this language and hello world key insight and here we have for example the german translation and we also have the same thing for the other languages and here i see right now that we have made a mistake therefore you simply change here this key value pair click on save and hot restart and then we can go here back to this generated file and you see we have here this new value directly inside and next to these language files we also have this app localizations files and this is what we want to import right now in our application so that we can make use of all the different translations therefore we go again to our main.dart file and here within your material app you need to add this localization delegates inside and here we want to access now this app localizations file which we have generated before and this is exactly this file here and to make use of this file you also need to go here to the top and you need to add this package flutter gen and here you need to put this exact important statement inside and now that we have our apple localizations inside we can access all the different translations which we have here within our generated files and within your localization delegates you also need to add this global material localization and also this global cupertino localizations inside and with the material localizations we put all the translations of the material widgets inside and with the cupertino localization we put all the translation for the cupertino widgets inside because within the material package you have for example this daytime picker and they are also like different languages are displayed like a button for example and these need also to be translated and this is what you can support automatically by putting this here inside and lastly you also need to add this widgets localizations inside and this will make sure that also all the languages which are laid out from the right side to the left side are supported for example arabic is written from the right side to the left side and therefore also make sure that you put this here inside and at the end we want to make use of our translation therefore i go to this localization system page and here i basically create a text and then we simply call this app localization of context and with this statement we are referencing basically this generated app localizations file and within these localization files you have then all the key value pairs which we can now access therefore i simply write here dot and here language because this was our key and then we have here basically the translation of the language and secondly you also can put here textile inside and now it says your english because right now our system has here the language of english however you can also go to your settings and within your settings you search for language and here within the language section i select is simply a different language after this we go back to our application and then you should see here the translation of the language which you have chosen and secondly you can also put another text inside and this time i access you this hello world property and now you see here also the translation of this hello world and within our languages i can again change the language and now you see again the other language which you have selected and now we also want to display here within our app a flag and this changes every time if we change our language therefore i create here on top of our text a language widget which we want to create right now inside of the build method of the language widget we want to get first of all the local of our system and therefore you simply write your localizations local off and with this one we get then here back a local so we get here one of the local spec which our current system here has as a language set and out of this local we want to get then this flag and therefore i simply put you this local language code inside and like you remember the language code was always these two letters which identify a language and now we want to create this get flag method therefore i go to this internationalization file and here at this method get flag and here we get then this language code which we want to transfer to a flag and we keep it here really simple so basically we go over all of these different language codes and then we simply return here the flag as a text character and now we can go back to our language richard and we get here every time the flag of our current local if we have supported it and lastly we need to display our flag therefore i create a circle avatar and inside of the circle avatar i put a text widget inside and here we simply display then our current flag which we have selected and now we can try it out so you see here the usa flag which we have defined before here within this flex property however you can choose here any flag which you like for the english language because you can also choose the british flag or the australian flag whatever you like and also if we go back to our settings and change our language so i put here again another language inside and now you see that we also have here a different flag for our language insight we also want to look at how you can select a language within your application and secondly we also want to look at how you can add parameters for example a name to your translation and this will then be put inside of your translation and by the way if you want to get here this whole source code of this application you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer alright now let's put here this drop down menu at the top inside so that we can select a different language locally to store our local language i have created here a new file local provider and we make it here extendable from a change notifier and put here our local insight and this is then the local which we have here locally stored within our application and we also put here a getter and a setter inside so that we can later retrieve this value and also can set a new value here within this field and lastly we also want to make sure that our local which we set is here of the type of all the locals which we have supplied because we don't want to accept your other locals and lastly we also create a method which is called clear and here we clear our local again and set it to null after this we go again to our main file to our mutual app and we wrap our material app inside of this change notifier provider and inside of it we put then our local provider instance inside which we have created before and now within this builder we can access our local provider and then we go to our material app and here we have a property which is called local and then we access here from our provider this local field which we have created before and with this field local within our material app we basically can set the language of our application and this also locally and the cool thing is now that we simply need to change every time this local from our provider and then it is also changed here within our material app and therefore we simply need to call here this set local method and put here our local insight which we want to display here in our application and with this setup we can now create this drop down menu where we can then select all the different languages and then we basically call this method set local which we have set before to create this drop down button i have created a new widget and here we basically create a drop down button and within this drop down button we want to display here all the different flags which our system supports and therefore i simply map you over this old property which has all the locals which our system supports and now for each of these locals we want to create a menu item and therefore we simply create here a drop down menu item and inside of this drop down menu item we create here a text and here we basically put a flag inside so we simply take here all the locals and transfer it to the flag which we learned before and with this code we already make sure that all the flags here are shown and secondly you also need to put here this value property inside and here you put then the local inside which we are currently displaying and lastly we also want to click here on one of these items and then we want to select here this language as the main language of our app and therefore i simply put here this on tab handler inside and here we get then first of all access to our local provider and on this provider we call this set local method and here we put then the local insight on which we have clicked right now and with this we basically can now select here a different language and then it should be displayed within our application however we also need to put here the flag inside which we have selected before and therefore we go to our drop down button and inside you need to supply the value property and here you put then the local of our current language which we have selected and to get this local we simply access here our local provider and from this provider we can then access the local and this local sn here going inside and with this we basically make now sure that every time the language which we have selected is also displayed here at the top and lastly we need to go to this page here and within our app bar we simply add then this language picker inside so that we have it here at the end displayed within our actions and now we have here this language picker and can select a different language and then you also see here this flag and also the new translation and we can basically choose here any language which we like and at the very end we also want to add here some parameters like a username or any other field which you like to add to your translation therefore we go to our template file which is this app english file and here we add another translation and this time you also can put your variables inside and this is what you do within this brackets and now we also need to create again a description and next to it you also need to define here this variable therefore you add here this placeholders and then you have here this username so this has here the same name which is our variable and here inside you need to put then the type of this variable which is going here inside here inside so in our case this username is of a type of a string and then you also need to go to your other translation files and here you need to add a key value inside and here we can then basically access our username so make sure that this username has the same name as what you have defined here within this placeholder inside and the same thing you do also for the other translation files so you put your translation inside and again the username after this make sure that you save your all the files and click on hot restart and then you also can go again to your dart rule fluttergen and here within your localizations you should see that he has added this method hello for example and here inside we have then our username which we can later put inside and this is then put inside of our translation and the same thing is also for the other files here we have also the translation inside and our parameter and then you simply go to your app where you want to display this string and then you simply type your hello however this time you also need to add here this brackets because it is a method and the inside you need to add your username so in my case i put here john inside and now if i hot reload here you see that it shows you our translation and also john inside and i also can change to different languages and you see that we always have here the right translation inside hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music] you

Channel: HeyFlutter․com

Views: 68,161

Keywords: flutter tutorial, flutter localization, flutter localization tutorial, flutter internationalization tutorial, flutter i18n, flutter json, flutter localization example, flutter internationalization, flutter internationalization example, localization, flutter multiple language support, flutter, flutter intl, android, ios, translation, mobile

Id: Zw4KoorVxgg

Length: 17min 40sec (1060 seconds)

Published: Tue Feb 16 2021