Flutter Localization - Official Documentation

[Music] hello and welcome to part coder in this tutorial we'll learn how to localize our flatter application to support multiple languages according to the latest official documentation if you already subscribed to the podcoder channel on youtube you know that there is a mini series showing how to implement a flatter localization from a scratch unfortunately in that series there are some features for example null safety missing and it is not aligned with the latest official documentation on how to localize our flat application so in this tutorial we will learn how to localize our flatter application according to the latest official documentation which implements some features like null safety so without further ado let's start coding so to start coding and follow along with me i have provided link in the video description which takes you to the github account and here you can select the branch which is called initial ui boilerplate and copy the link from there and head over to terminal or whatever source version control you use so get a clone and paste that link please specify the branch which is initial ui boilerplate i'm sorry for my slow typing it will clone the project so let me clear and list the project you can see that it is being cloned flatter localization version 2. i'm going to open it with my visual studio code and here you can see that this is a minimum bare minimum project and you can verify that with the poppyspec.dml file you can see there is no dependency and nothing else so the first thing that we need to do is to install the dependencies here that minimum dependencies and you can see here inside the lib we have the classes which has this language class with some properties and this list of languages which we are showing inside this uh drop down menu and also we do have some pages for example about pitch you can see that this does not have anything and with home page inside the home page we have first of all this app bar which is here and also it does have this drop down menu items which is this one and this looping through that language list and showing one i item at a time and also we do have here a main forum which is this part and there are some text fields with this button and finally we do have this drawer list and this is here so you can see it is just a simple ui and if you click on any of these you can see it does not do anything so there is nothing other than a ui we do have this not found page and we have a settings page which is just a widget that's it and inside the router we do have a custom router which takes us to uh some pages like for example home pages about pitch and we do have this route constants defined here and inside the main we do have just a material app and implementing the routing nothing else without any dependency i just didn't want to waste your time writing this ui so let's start implementing flatter localization so to do that head over to the official documentation and here you can see that this localization is applicable to the material app capertino app and also if you are doing it in a much lower level which is the widget app so this can help you so to do that the first thing is to install this dependency which is flatter localization so head over to the popspic.eml file and inside the dependencies just paste it here make sure about the indentation because the yaml files are really sensitive about the indentation once the dependencies are installed so let me run the project which will i'm sorry i should have not run it in in the yaml file should have run it inside the main so this will take some time i will fast forward the video and we'll be back so now our project is running so let me come to the code and here you can see we do have three languages purposely i remove the hindi language to add it again and to do that you can add another instance of this language class with with its properties so um let me just paste the code that i've copied from other screen and here you can see the ids4 and this one is an emoji and emoji is basically a special kind of a string that you can show and to to get these emojis just head over to the google and write um countries flag emojis and here you will find a bunch of emojis and write the country name for example india and after that you can see here the indian flag and once you're here you just copy the code from here and and paste it so that's it and once i have that if i save it right now and if i click here again you can see the hindi language is being added here so you can add as many languages as you want inside this language class and this dynamically will render it inside the main and which is here in this drop down menu great so we do have this dependencies installed which is the flatter localization and right now we need to just go import the path inside the main file for example let me just bring it inside the main file and after adding that we can just copy and paste this part which is which are some delegates and i will tell you what these delegates are let me um i think i'm running the code again anyway let me paste it here and save it so it is going to take some time for me once you paste it the application and save it the application will restart and supported locals put your supported application local so here we support four languages persian english arabic and hindi so we do have the english i need to provide the arabic so let me remove this part i'm sorry i i think i broke that so let me copy here let me remove this comment and two more languages so here this one is farsi and the last one would be the hindi great so we do have all these supported locals so you will be wondering what these delegates are so if you come here you can see that these delegates are a list of factories that produce collections of localized values so you have it for the global material localization and also global widgets localization what is what does this mean so first of all this global widget localization is used for left right and right to lift support basically and this library or this delegates is used for some material components that you will get by default so let me show it to you right now if i click on this calendar you can see the calendar opens and by default it is in english language for example let me specify the local for this application and i will going to put that as hindi so h i and the country code is empty and if i save that and if i click again on this you can see that is already translated or localized to hindi language and for example if i change this one to arabic for example the arabic is a right to live language and if i save that you can see i'm sorry i need to save this one if i save that you can see it changes the direction of the application directly from right to left i know these are not translated yet but it already it's affecting and that's because of this delegates that are there so let's move on and to do that and to add more localized messages and everything you can you need to add the intel and if you want the add ones feature there are some like kind of uh steps that you can follow and um kind of localize all the intel's messages as as you want and as you wish to so let me add this intel which we are not going deep inside that if you want me let me know i will be happy to uh like go much more deeper inside the localization which takes some time so yeah once we add that we need to add the generate inside the like the popsicle.yaml file again so let me copy and paste it here after this flatter so let me paste it we do have that and once we have that we need to add something called l10n.dml file let me copy and paste it here so it is it should be inside the main project not inside the lib just make sure to click here and create a new file just call it at as elton in which in l stands for localization and then just paste this values that i'm going to explain what these are basically so the first thing is that it is a source directory of your localized values which is inside the lib directory and l10 folder which we don't have it yet and also the default template which is english and this is also does not exist and once you have this this is the output file that you will have which is by default called app localizations so let's create one by one inside the lib directory we are going to create a folder called l10n and once we do have we need to create a for a file which is called app uh en dot a r b which is a ruby file you can name this one anything and the the first part is as you wish like you can put it as like your app name but you need to add the um like the language code after that which is english and also you can add it in this way for example at en and us dot arb so this is also valid but this will take consideration that this is a country code is being added with that so i'm going to remove this one and i am going to create like four files um with the same thing um with the same name but different language code so the first would be f a dot a r b and then i'm going to create another one so the app h i or hindi.arb and the last one i think i forgot to add the arabic so ar dot a r b so these are uh four files that we are going to use for our localization so let me save this one and right now we'll get an error and the error is right now i think uses material design i think we missed something inside the yeah the indentation i told you before so we missed that inside the yaml file great okay so now once we do have that if i refresh the application we get some error and this is because of that ruby file and the ruby file should have some json like this inside this ruby file we need to have some json files i'm going to copy this um things from the files that i have so let me just copy and paste it here so you can just copy and paste from the code so you can see here we have like some key and values like homepage personal info and there is nothing much inside that so this is for the arabic language inside the english i'm going to copy and paste the english the same way you can see that the keys are the same but the values are just translated the same thing for persian language i'm going to copy and paste that and the last one is the hindi language that i am going to copy and paste the values inside there once you have these values right now if i refresh this and once it is refreshed the app you can come inside the dart tools and flatter gin you will see something called jin ah el tin and inside that the first thing you can see is the app localizations.dart and if this file basically is familiar to you because we named that right app localizations that dart that being generated inside this folder and you can see that this basically implements the localizations and if i scroll you can see that it listed all these supported locals with its delegates and generated a key by default for each and every key values inside this files for example home page and everything like that you can see home page personal information and everything and also this file is being overwritten in this like in each each of the other languages for example for hindi we have app localization hi hindi which extends that file and also overwrites those keys and provides with different values you can see the keys are the same which are being overwritten and the values are different so we do have this for each language but the values are different right for arabic for everything so now that we have this one and you just i think you have observed this part that we do have this list of localization delegates and we do have this supported locals defined here so what we can do is just come along we did this part we can come along this part also we have done that we we can do it right now but let me show it something to you and here and instead of all those things inside our material app what we can do is just first import that app localization flow from flatter gin and once we do that let me do it and head over to the main.dart and paste it here once i did that now what i will do i will going to copy this localization delegates and also supported locals and import it directly from that generated file and paste it here so let me just paste it here and let me refresh the app because right now it is complaining about this part which is saying that i am not able to find and if if it does not work you can stop and run the project again which will definitely works once you restart the application you can see those radius quickly lines are gone and right now we do have a working application but with list code inside this material app and you can still verify that it is working because you can see that it is still in arabic language and if i change it for example to en or english you can see that the direction is changed plus this component is being translated back to english so this is how it is going to work so what about these like changing the language and also applying the localization so that is also fairly simple how you can do is that instead of like all these things there is no necessary for this thing here you can access the app localization of context and the key for example we do have many keys here home page personal information and name let's verify whether it's working or not let's head over to the home page here we do have this home page and before that what we need to do is let's import this app localizations from that gin so we need to just paste it here so once we do paste it here and now we are able to translate these values so it is app localizations i'm sorry localizations dot off context and the key but before that what we need is we need to verify that it is not null so we need to paste the home page so once we do that this is no longer a constant and we can save that you can see is still it is home page but for example if i come back here and change the language to persian you can see that it is changed and if i change it to hindi and save that you can see it is changing but the rest of the thing is in english so let me add a few more if i come back here inside the personal information the same way i can write app localizations the dot of context and then here the personal information you can see it is also complaining about this constant value and the good thing about that is we do have the intellisense so if i press the dot key after that you can see all of our keys are listed here so we can pick any of this for example personal information and now it is translated what about the functionalities of changing the language from this drop down to implement this feature what we need to do is inside this drop down menu button and on change value of this we need to implement some kind of method to change that so in order to implement that the first thing we need to do some change is inside the main and inside the main we need to change this and make sure that your app is a stateful widget so we need to create a set local method here so i already have that inside my other screen let me just copy and paste it and explain it to you and let me paste it here okay great so i do have this set local which is a static and which accepts the build context with a new local and which is first creating or finding the estate of the application which is my app is it and inside that you you're sure that this is like nullable and this could be no so that's why it's we we need to provide this null safety check here and once we found the state of the application which we are trying with this context dot find ancestor instead of type my state and inside that we need to create this sid local method and and paste this local so let me create and implement that so in order to do that let me create this local and this should be nullable by default let me create this local and then we need to create a set local method to see the state of this local so let me paste the code and here you can see that we have this set local method which accepts the local and which was called from here and once we have the local we are able to basically sit these tits from here so unfortunately missing a bracket so once we do have this local we can initialize the local here let me paste it here and still if i refresh that everything works fine but still we are not able to change the language the reason is that we are not calling this sit local method so let me go back here inside this change language and let me implement that for example we can check if the language is not null we can call my app which is coming from the main here this is my app and if i come back inside the home dot sit local which is a static method accepts the what they call is accepts the context and we are passing a new local so let's create a new local with the language dot language code and also once we do have we don't have the country so let let's check whether it is working or not let me refresh the application and let me change the language from english to persian yes it does work let me change back to english awesome let me change to hindi wow and it is working but there is uh some kind of labels missing to be translated and also the language is not persisted correct because for now it is in persian language if i restart the application it is going to be changed to english again which is not a desirable feature so to implement this storage we need to have some kind of a storage mechanism or local storage mechanism so the simplest way is to use a flatter package called shared preferences let me add this shared preferences to the dependencies once it is there just get the packages and to implement that i have created something called a language constants that i am going to just copy and paste it and i am going to explain it to you so let me create this language constant dart and i'm going to paste this code this looks scary but it is not believe it or not this is not a scree so first we do have this app localization that we imported and then after that we have some constants like this language code and also this um we can say the language quote constants and we do have this set local which returns a future local and what we are doing is we are accepting a language code and also we are creating an instance of this shared preferences and we put that language code with the link selected language code inside the shared preferences and we call this local method and this local mid earth basically returns a new local based on the local that we are passing or the user is selected and also we do have a get permitted here so the gator method also will create an instance of shared preferences will get that stored language inside the shared preferences and just return it to the user and finally we have created this uh like translation method which accepts the belt context and will return this value so this will this is a handy way instead of writing all these what we call is app localization of context.home page and then what we can do is we can write the translations and pass the context and then called home page so it is currently not working because uh it is complaining about this what we need to do is we need to refresh the project to uh sync the project again and i found it that sometimes this does not work what you need to do is you need to close the close your visual studio code and just open it again which is here let me open it so now everything is fixed and we do have those methods already inside this language constants and we can use it you can see that this translation method worked inside the home page and it is now a much shorter way to write the and and to access these things so let me just implement it back inside here instead of writing all these things we can write that translation method and pass the context and instead of everything we can write personal information which is cool and now let's implement this persistence right so instead of this way like what we can do let me close this navigation so we can define this method as a sync and then we can do one thing create a local variable here local which will be returned from so i'll call it as local and this is going to be returned but that's it local right this it local will accept the language code language code and will return what will return a local so this is coming from this method so set method we'll set it inside the shared preferences and also will return a local a feature local so we can wait here for it and once we do have the local directly we can pass it here inside our set local which is inside the main so in this way right now we are able to persist the selected language let me show it to you we do have the persian language let me refresh that but it is persisted but still it is not showing and the reason for that is we need to implement another mechanism and that is inside the my app instead once we run or we launch the application and on did dependencies changed we need to call that get local method right that get local method which is coming from this file get local method which return a future of local which is getting from the shared preferences so to do that we do have this git method and once it is run inside the din because it is a future we once it is completely like finished executing so we'll get a new local and what we can do is we can just call this set local which is inside here and pass this local and now we are able to persist this uh language or selected language already you can see after refreshing that is getting that language is already being fetched from the shared preferences so let me change it for example to english and restart the application it is working let me change it to hindi and let me refresh the application awesome it is working so now what is remaining is to translate these labels and in addition to that how we can change this language from anywhere inside this application for example from this settings page so in order to do that let me head over to the settings page and here you can see that inside the sittings page unfortunately we only have this uh text so what i'm going to do is i'm going to just paste some code here and i know it's like pasting too much code sorry for that but it is like kind of helping us um from uh wasting too much time so let me implement this uh language and it is just that drop down that we have looping through these the same items inside that and showing a kind of menu right so we do have this menu again here and now what we need to do is the same way that we implemented inside the home page this part we can just you know copy this part and paste it inside this uh settings page and bring the main app and once we do have that we need to bring that language constant and now we do have it here so let me refresh the app and let me go to the settings page so now inside the settings page for example let me change to arabic language it is working you can see already the direction is changed but as these labels are not translated you can see these livers are not showing so let's do that as well so here in a set of settings we can call that sorry i missed that so we can call that translations method and pass the context and then from that we can call the settings right so remove this constant and let's check whether it's working or not i think i need to remove that one bracket yes it is it is working let's try it for this one which is translation and then what is called is change language and let me try that awesome it is working now let's try to change it to hindi awesome it is working correct wow it is beautiful and let me go back to the changes you can you can see it is working here and if i change it to hindi and go back to the settings you can see it is in hindi language and let's change it from hindi to arabic and come back to the home page awesome it is working now the only part that is remaining is that like changing these labels and instead of hard coded value to this translated values and that's it and also what you need to do is inside this main method for the first time that we run the application you you can see that for few seconds this part is needs to be loaded and which takes some time so you can add a loader here to load for the first time and once the language is set up then you can render this part so this is all for this tutorial what i will do i will stop the video i will implement or i will put all those labels translate these labels and i will uh just push this quote on github so thank you for watching and please subscribe to my channel and also please comment um your thoughts and ideas your constructive ideas will help me to basically develop what you think it is good and also i am ready to accept any kind of feedback thank you so much have a good time

Channel: PodCoder

Views: 33,005

Keywords: Flutter, Flutter localization, Flutter internationalization, flutter i18n

Id: WrqH5fF2ZuY

Length: 35min 1sec (2101 seconds)

Published: Tue Apr 12 2022