Flutter Multiple Language App | Localization Support

hello everyone assalamualaikum so this is something that we are going to build now this is a multilingual app as you can see you select your language here as you do that it changes the language including here we can go back to English like that so it changes everywhere you can save it well of course I saved it in different language so you can do your login or things like that but do remember after signing in we are going to switch back to English language now here as you see this is not English language it's my native language and over here we do have settings so go to settings and here we can change length to English and we'll save it and it will come back and we do see that change everything back to English so this is something that we are going to build right now okay now to be able to do that first we need to go ahead and install two plugins so we're gonna use get X to do that so we're gonna um look for pops get pubspect.waml file over here and over here we are going to install say get X or get actually and the other one we need that's a shared preference this one with this two would be good to go now get X package has not only State Management any routing it also supports the localization which means you could do multiple languages in one app so get X is always one of the best options for developing app right after block so make sure you click on this and then install it okay now this would be a simple project so the project itself should not be difficult in terms of structure anyway so here I'm going to create a folder and I'll just simply call it screens over here and here we do a screen and we'll call it splash screen so we'll have splash screen dot Dart okay so over here we are going to create a stateful class and we'll call it splash screen well so here is a splash screen file and it's a stateful class and over here because we are into the animation and we have the sticker provider State Maxine otherwise we'll get error we won't be able to do that and we have defined an animation variable and animation controller variable and as well as over here this initi state and insert in its state actually we first create controller variable and we say that okay the animation should continue for two seconds and after it just should go forward which also means that just happen once okay and this is the type of Animation we want all right and after that we'll have a timer now after three seconds later we'll see that we say this should be printed now in future we're gonna replace this section with a route over here we don't have the router ready anyway so this init State this function uh method over here initialize the controller and the animation based on the controller and three seconds later it triggers something and once we are once we are on the page actually so we see this section over here so it would be saying a logo uh well two sections so logo One logo two together and at the same time we set this Global key to avoid some unexpected errors anyway so inside this skill transition we have set our animation like the animation variable the one that we created over here at the top based on this controller beautiful okay now here we do see that we have some assets so let's go ahead and take a look at the asset folder now first thing we do have to see our pop spec.yml file over here we are saying our assets are in this kind of folder so images are in IMG folder and we'll also have assets for language now our languages are over here first take a look at the IMG folder so we'll have two logos okay and together we do animation as we do boot up our app and inside This Ss folder we do have this language now this is English language and this is another language which is my native language which is called Bangla but anyway so these are the two language options our app will have and would be able to switch between those two languages and we'll also be able to save them for futures so that whenever a user reports the app it stays there so from now on everything we are going to do is going to be based on this two now anyway before we go ahead and do that so first let me remove this and inside this instead of keeping this let's remove everything and for now over here we do splash screen okay great now I'll select another emulator which should be Android so well yeah this is what we see over here and yeah that's all now of course we also see that it printed over here timer the one we wanted to see in our splash screen once the app uh runs okay all right but anyway as soon we're going to redirect it to a new route now whatever we do they have to be based on these two languages okay so we are going to deal with languages so the first thing we want to do over here create another folder and we'll call it model and inside this will have a new DOT file and we'll call it language model dot Dart okay now inside this we are going to have this model now here actually if we want to do localization or internationalization in flutter which also means that using multiple language support you have to have at least few things language name language code country code and I think actually the last two are the most important and first two are optional why because these two actually we have to save something called Locale so our framework has local like flutter or any other popular framework they support multi-language and they also have a function or a class which is called local now in local actually we save language code and country code and every time you change something about your language like you want to switch languages then you have to change them and set them in the local so very soon we'll see how to work with local and the language model together oh anyway so with this we are almost done with the language model set up next we are going to we are going to create another folder and we'll call it utils and inside this we'll have a new file and we'll call it appcon stands dot Dart so here is our app constant file and here we have this country code and language code now you may ask why we we have this one well we want to save them in the local storage remember previously we have installed shared preferences so because of that one we need them because we need the string as a key and this is what actually we have worked so far so here we are going to create a list using this language model so as you can see our list is our list and over here we are creating instance using them and as we do that we save them in a variable which is called languages now since this is a static member we'll be able to access this less languages I'll set up this class using this appconstance dot languages like that okay so anyway so we just created instance using our language model and uh why we do that because as I said that we need to work with the Locale so in the Locale as we save data actually we need to read them from this list you really don't want to read directly I mean like this or any other way so create an instance and because this is a list so look through it and use an index to find the country code and language code like that so hopefully it makes sense so now next step or next step actually we are going to create a new folder and we'll call it controller and then inside this will create a new file and we'll call it language controller.dart you can name it actually anything you want a lot of people might call it localization controller well so this is the localization controller the one that we created and it extends get x controller and implements get X service the reason is why service because we want this controller to in the memory for a long time once the app starts that's because it's going to help us to save the data in the shared preference and we want this controller to be alive because the user may go back and set the data or change the data so that's why we need that anyway so right over here we do have this Constructor as you can see so wherever whenever we inject this in the dependencies then we'll pass the share preference object uh for now we don't have so whatever we have here we are keeping that in the Constructor body actually you want to do this load current language now this is a method that we are going to see very soon but before that just now I was talking about Locale so this is the Locale that we should know now local this class is actually directly coming from Dart UI as you can see it takes language code and country code and this is what we were talking earlier as we are creating this F constants class so as you see over here we have this country code and language code so the local itself need them now since we created this list which is called languages this is the list that we create it already so we can access the language code now this is the one that we set at default so we are using for example over here index 0 so which refers to English language of course you can set it to one if you have more languages you can set them differently the way you want so the idea is first you have to have this language code and the country code which we have over here and in this list so we are accessing them in the Locale so this would be our default Locale but of course for now we don't see where to set it very soon we'll see where and how to sit set to this Locale and we do have some additional variables so now this one will see that we can change our like say for example uh over here so we can we'll be able to switch between them so we need to be able to keep the track of the index so that's why we have and over here we also have this languages list just like the one we had early now because we want everything to be accessed from controller from the UI so over here we'll load the languages one more time so from the UI actually would be using this variable now this Locale directly we would set in the main.dart file so you can access them inside from this app constants it doesn't really matter but later on the future changes would be happening through this one so in future if we want to change this country code language code we may be we will be able to use that now of course this is a getter for local the one we had already so let me move it up it would make more sense now these two together so now here we also have a getter for languages and over here we have this load current language method so which is over here actually now this gets called from The Constructor body now as you can see over here now this is pretty simple straightforward this part may look scary but it's not so over here we are also we also have a Locale over here as you can see now this Locale what it does it tries to read information from our shared preference if it's not there actually it takes from the default one earlier I said that index 0 refers to the default language so of course you can set it to anything it doesn't matter the same for the country code if country code it can't find it goes to this app constants uh the languages over here now as we said that because we want to be able to click on them and as we click the index changes so for this reason we want to Loop through them and in future when we change actually over here we'll select the index and wherever it click that index would be set to that one and that's why I also have a getter for this selected index and of course after that our language is list we initialize initialize it to empty list and load everything from here and we also let the UI know that okay you should call the update method and update your UI okay great so now with this basic setup actually we are a few more steps away to actually see like this now to be able to work on this we need to come to our folder over here and inside there's screens will actually create a new file and we'll call it language screen dot Dart and inside this would be able to draw an UI like this so here we'll create a stateless class uh from now on get X will take care of a lot of the other State Management things and okay so it's not stateful we want to State less this one okay and here we'll call it language screen on language screen and inside this let's import the library and after this so you can do scaffold okay now is it the scaffold will have body and here we could do safe area will have child and so this for now we'll have column and then we'll have children so anyway so here is our language screen which is a stateless class and inside this we have scaffold safe area and column and inside the column we have only one child which is expanded then we want to put everything in the center and as well as as because we want to be able to scroll so we have the scroller and the single child scroll view inside this expanded child um and now here we put everything whatever the content we have that is as uh like our logo and things like that and the basic UI over here inside this column as well as you can see now we do have grid Builder now we have this grid Builder because we want to put two boxes next to each other like this so with this we also have some basic setup so we want aspect ratio one which means that we want to have a square and we just want two elements on the horizontal axis and we also say item con 2 and things like that and that's it now with this actually we are one step away to see a screen like this now for this reason here uh well inside utils I'll create a new file and I'll call it app routes dot dot when you see this we need to have our routes for now we don't have routes because what do we have here right now this is our splash screen but after three seconds later we want to go to a new screen so here we created this Rod helper class and we have initial route and route for splash screen and then we also want to go to language screen like that now well our here initial route in future will refer so in future initial route this one will refer to home screen which we don't have yet but it will create one but so far inside this uh get pagelized we have this get page for splash screen and then we also have for language screen and for now we just say splash screen of course in our main.dart actually we are not using that so let's find our main.dart and we'll see that how to use a splash screen over here uh from the routes itself now the first thing we want to do we want to get get material app over here now let's import get X at the top so here we would import get okay like this now over here we need to set up our routes so to be able to do that let's remove this home properly and right after this let's do like that so let's import our Rod helper class which is uh this one rod Helper and since all the members are static so you can directly access them using the class so definitely the first one refers to this get Splash route eventually it refers to this one over here right so now we get stuck over here which is the splash screen and from there we want to go this screen and how to do that now you see that here I have this timer so we don't want to that one we want something like this yes just like this and now we do see that we have a bit of issues so let's import libraries at the top the first thing you want to do is input get package and also as over here let's import that one and we do see that we also a bit of issues so let's do this and the error is gone so yeah so this is a callback function that gets called automatically right after three seconds and it would take us to the language route page now we know that language route actually takes us to the language screen we know that and if it does it would be seeing things like that okay so let's go ahead and yeah say this if it takes us to the language page or not yes it did now we do see that we have the basic things already for example we do see that there's two logos this one and that one over there as well as this text and we also have sized box actually there are two size blocks but because right now it doesn't have any color so we don't see this anyway and uh one thing first we could do see if we can set up this background color so you do colors dot White and let's save it and it looks much better and as well as over here this instead of this sized box actually we can use container container and let's see yes and for now over here we could do color so container color okay now we do see that we should have Index right so over here index well we just have two items so we can have like index zero if it is in this zero then we do colors.red okay otherwise we do colors dot blue just like that and let's see we do have a bit of cannot be assigned okay now there is gone okay so that's what we see currently which means that these two sections are working well now this is the time actually we go and set our local over here inside this main file main.dart file and here we'd set the locals like this so we set locales uh actually from the very beginning inside this get material app now we do have some issues and we'll take care of them slowly one by one let's go ahead and do that now here we do see that we have this messages and languages problem now here we also need a localization controller or language controller we can name it anything we want and how to get this instance now here we are going to wrap this get material around a widget or actually uh just wrap it around get Builder and if we do that we'd be able to access our localization controller the one that we created now I'm going to put get Builder right over here we do return like this and right after this we'll have this semicolon brackets and then let's import this language controller and good to go and I guess we need one more of this bracket now we still have problem this message is class and what to do with that before we go ahead and one more thing one more time is that because we want this to be available from the very beginning so that's why we wrap our get material app using this localization controller and if we can do that you see that we can access this Locale object from here like so this is the local object that we are accessing because we created a getter for this one and as well as we also have fallback locale now if this is not found this is the fallback one now of course in our case this and this they are the same one but you can choose a different one to do no problem with that one let's go ahead and create a messages class and we'll do that inside this utils over here and we'll just simply call it messages dot Dart and over here we'll have this now this messages class extends the translation class and which is actually coming from get X so let's import get and the error should be gone now this messages class has a getter over here as you can see case and it Returns the languages object over here and which is a map type object okay so which also means that there is map map inside map and this is required for localization in flutter if you use get X this block or other or actually not really blog I mean other plugins that that also does localization so they might be different so you have to have one it tells us that okay how to store the languages that are all together in this device uh because if you just take a look this is a simple map format right which means key and value q and value but we have two of this file one for BN dot Json that is en.json so in future very soon we'll also see we combine them together so that's actually gets saved in this translation class I wouldn't say that gets saved but the getex has to know from our flutter has to know from getting that how you're storing all of your languages in a node which and what format so that's my understanding because there's there isn't much documentation about it actually anyway so the idea is we have this two we have this two a Json files so all together how you put them together how you combine them in a certain format and that's what is told in this messages class anyway so now if you come over here the error should be gone even before that there's another problem so you need to pass an instance because here you do see that in the Constructor it takes this language is object which is map map strike so we can be smart so just copy this one and put it right over here and let's see now we do see we still have this error and if you say the final variable languages can be assigned because it is potentially unassigned at this moment now this is a class actually this class is getting cold and it's get cold actually we don't want to like this uh well we do have this one let's see well now actually we don't want to put it here I'm gonna put it first outside and then inside this instead of having it like this we could do like this now in that case from here we need to send this languages object and as we do that that value should be initialized now once again how do you send the value from here from my app now of course we need to add it over here how to do that now this is where dependency injection comes into place so over here first we can inject our dependencies but right now we are going to put everything here so here we'll call it Dev dot Dart here is our dev.f file and here we do have uh edit method and we have this shared preference instance and we load it first all definitely we get the ins get the instance and then we load it and once we load it we send the instance to this localization controller remember localization controller actually takes shared preference instance which we have seen before and this is what actually we are doing right now so yeah so that's how you send an instance in get X if you need one and after that here we declared a map and this is the map object that actually get uh referred over here and we'll send it to this value as an argument and it would be caught over here so they all align together so from here actually we are going to send map map type object so it will have map inside the map now I have a detailed tutorial about it how to what is map inside map or nested map and how to read so you can check out that link below and I have explained thoroughly this section actually and but that section is dedicated for just to understand what is map inside map and how to load a Json file from your local device anyway so yeah we get all the languages list remember inside this we have this languages list so we can access them and each of them we take as language model and do remember each language model has a language code if you see that we have this language code right so what will happen here it will become assets language en.json assets language bn.json so this refers to those Json files the one we had already so each time we take one of the Json file and we save it in a variable map variable after decoding and then as we do that we save we create another map variable and we store them inside this uh map variable one by one what happens with this is that once you take all this information like each time it will go through one of this right say for example it would take all this information and then for each key there should be value so it puts in this new Json okay and in the new Json actually when it's done with the first Loop uh first time in the loop so it would save information just like en USB and BD format and this is what actually our localization wants if you see Locale it takes language code and country code so what do we do over here we take from whatever we have from the Json file we take all of them and then we put in this map list now remember for each of them so when it goes through this tries to put information in this languages map this should be the key so for the first one it should be e and us so that should be the key and for that key all this value would be loaded hopefully it makes sense and then in the second Loop it would get B and or Json it would take all this information and save it in this key but all those bn.json information from the Json file and eventually it will return what do we return we return something like this map inside a map and that's what we are saying that over here we'll have map inside map and we're also telling flutter that our information is coming like map inside map hopefully it makes sense and right after this we have to actually right over here we do have to do the injection make sure that your file has correct path if it doesn't get automatically recognized and over here we have this one so first we do widgets binding and we load our dependencies at the top as you can see so this is the dependencies that I was talking about so over here you loaded our shared preference and localization controller as well as our Json file now we do have uh this languages and this is the languages object that we pass to this my app and Maya takes that one and initializes that value value to this language is variable and we tell this messages class that our language format is going to be mapped inside a map and it should work like that now let's go ahead and run it one more time and we'll see how it goes how to know that this is working well to be able to know that this is working actually we can come to this one and you do see that here we have a default Locale that is the Locale that gets uh set over here first time so what it does it takes this the first one but in our case maybe we can change it to the second one okay and now we'll see that how it works so now let's restart our app and um we'll see but it does look like nothing happened now let's come to this uh okay let me erase them and we don't need this we also don't need this one so just come to those languages dot screen and over here we would use the tag TR which is coming from get hex and let's say it wants us to import get so let's do that next I didn't import well we still have this error import package let's see the most really we can't have this const over here now let's restore it now it does look like it's working and over here actually I also changed instead of const I remove the const and then I added TR which means the translation and it's the same over here well now in the language control itself we have to make another change so instead of zero over here we can have one and right now we say English but if we restart now I think it'll change to a different language you see that yes it's already a different language so if we change it to zero over here it will change to English back so which means that our Locale is already working but now we need to find a way to click on them and change not of course not change from this code directly the way we are doing so anyway so I'll put back everything to index 0 which refers to the default settings or default locale so now we need to work on how to make this boxes clickable and set the locale now to be able to do that actually we are over here and as you see it does loop through it so we need to inject our not really inject we need to find our controller over here this localization controller and if we can do that then you'd be able to access the properties like select index languages even local all of them and then we'll be able to change on the bottom click that's what we want to do now to be able to do that over here inside this uh screens we'll create a new file and we'll call it language widget dot Dart this one over here so here we created a stateless widget or class which is called language widget and we want to send it to the language model localization controller and we do basic setup of the value in our Constructor and inside this we have this Inkwell because we want this to be part of this widget and we want them to be clickable and after this we have this basic setup and we also have this stack widget so over here we want to show the language name yes and we're going to put everything in the center and we want to be able to check which of them has been selected and based on that actually we want to be able to change uh selection like that now with that so we'll come over here now just now we had this section over here so we'll uncomment that okay now we'll cover the top and for this column itself we're gonna wrap it around a widget and we'll call it get Builder so let's call it get Builder and right after this get Builder should be like this and inside this we have this localization controller we need to import that but before we import actually instead of doing like this child we want to return actually the column and right before it we should have this otherwise it will get error and then now let's put this semicolon and import the library and we should be good to go so we want our section like this two section to be clickable and change immediately so that's why we put everything around this get Builder because we want it to be a dynamic reactive because we are using get X all right and right after this actually you have to know another thing we created an instance of our controller we call it localization controller and because we did that so you can count to this bottom over here and we can change them now over here we do see uh let's say what do we need I think I can go back and check for the error okay right so first we're gonna remove this which we don't need and then I'm gonna put it like this so here I have this language widget let's import it so what's gonna happen over here uh well let's see we do have a bit of issue should we yeah okay great so yeah over here we are what we are doing so we access this localization controller and then we also find the language model based on this object remember this is this part of this getter which has a list of language models so this one language is actually saves all the languages in a list so that means that we'll be able to access them from the list over here based on these two index anyway the language is already only have two items and here we say two items and since this is inside grid Builder it'll start from zero so the index would be 0 and 1 and each time we also pass localization control object and the certain index that's being looked through you already see that it changed automatically and updated automatically on its own now yes so this is the default one right the one that is being used for English and which means that it's already working now let's go ahead and click on that and uh now we do see that it's not working now there is a reason if you come to this uh okay let me close this one we don't need this we also don't need splash screen uh we need language widget so yeah over here actually we also want to have this method where it says the set language so this is the default one right now and this is all coming from our Json file but as we click we want to be able to change and set them and how to do that now to be able to do that uh we need to go ahead and create a new method which is called set language we'll go to our localization controller over here right below it actually will create three methods the first one is set language now this is the one that should get called and as it does it would update the locale in the get get X and the controller itself and save it in the shared preference so this method saves all local information actually the one we change the code and the language code and we save them in the shared preferences because next time we want to read them back and well we want to get the current index for the selected one that's why we have so from UI actually would be calling this one first so this is our UI so now let's take a look how it should work okay so over here we have this localization controller with this we have access to it and as we click we are able to change the index as well as of course first we change the local information because each of them gets this one so they have different index and different language code and country code so let's restart it one more time and we'll see how it goes so let's change it as you see the language changes immediately over here and over there yeah and actually it does get saved in the shared preferences directly so let's see so it was saved in the shared preferences so it changed immediate I mean our savings has been saved okay now we save it to English and we restart it and we'll see that it's saved so it means that our multi-language app is actually working anyway so if you liked and learned something don't forget to share and subscribe thank you so much

Channel: dbestech

Views: 16,142

Keywords: flutter getx localization, flutter localization, flutter multiple languages support, flutter locale, flutter getx tutorial, flutter tutorial, flutter multi language json, flutter multi language support

Id: 1qkIJx0A9WY

Length: 44min 32sec (2672 seconds)

Published: Wed Nov 02 2022