Streamlining Internationalization with Flutter Intl

Key Takeaways

yes my name is tensor welcome to another photo tutorial video in today's tutorial we're gonna be taking a look at internationalization in flutter some of you may be aware that I have made a tutorial on this topic in the past however one of the principal complaints that I've noticed with regards to that video is that some people seem to think that the entail process is a little bit more complicated than it actually is also since I made that video there are quite a few new plugins and libraries and stuff they really streamline the process and the main one that I'm going to show you today is actually a extension that you can install in Visual Studio code IntelliJ or Android studio and I'll leave a link for this extension in the description of this video if you want to check it out for this tutorial we're just going to be using the basic flutter counter app that gets generated when you make a new flutter application and the main reason for this is to allow the logic of the application to kind of take a backseat to the Intel logic we want to set up our application for Intel and we can do this by going and opening up the command palette and you can do this by hitting ctrl shift P and typing in flutter into L initialize this initialize command will generate a couple of folders and it will add some dependencies and the plug-in to our post by chiamo as you can see we now have this generated folder and this l10n folder if we go into our pub spec PMO and we go all the way to the bottom we have this flutter underscore in our key and it has been enabled we do still need to manually add the flutter localizations dependency so let's go ahead and do that so just flutter localizations and then we're pointing it at the flutter sdk alright so let's take a look at what's inside of our folders if we go into l10n you can see that we have this intel en dot ARB file and it's empty this is where we're going to put the strings that we want to use in our application and there's a bit of templating logic that we can use to call to certain functions in Intel and I'll show you all of that inside of the generated folder we've got a file called Elton and dart and in here we've got a class this wraps around our application localization delicate which we'll use to essentially add the localization data to our widget tree and then we've also got this generated code so this is code for selecting the English localization and then if we add more locales it will add more cases as well and it initializes messages and does a bunch of other stuff and then we specifically have a file for English which has the appropriate functions and stuff inside of it and this code here gets generated based off of what's in our air B files oh and by the way I don't think I mentioned this in the last tutorial but the ARB files stand for application resource bundle and they're also used in the Google translation toolkit all right let's go ahead and add a few more locales to our project and we can do this again by invoking the command palette and typing in flutter in tell add locale first I want to add French from France this is just FR underscore FR and then I'll add Japanese from Japan which is just JP underscore JP we automatically get our ARB files for these associated locales and then of course the generated dart files now one thing I should mention is if you're on iOS you do need to add a key to your info dot P list so the key is just CF bundle localizations and then you just need to add an array of all of the different localizations that you're using in your application so in this case we have English then French from France and then Japanese from Japan now let's go into our main dot dart file and let's import the flutter localizations library and then import the l10n file from our generated folder so the text that we want to localize in this application is the title of the application then the title in our my home page stateful widget and then the text for the counter and for this counter what I'm going to do is combine the counter itself with the text rather than have them show up as two separate widgets that way we can that way we can show off the plural features of Intel so we could combine the two like this where it just says you have pushed the button this many time and of course this is always going to say times even if our counter value is say 0 or 1 but we can use in 2l to make it so that the string that we produce here changes based off of the counter value itself let's go ahead and set up our material app for our localization so we need to specify the localization delegates inside of the material app widget our custom delegate that was generated by the plugin is called s let me just say s delegate to put it in here and then we're gonna bring in the global material localizations delegate which will localize our material widgets and then the global widgets localizations delegate which will localize any other non specific widgets there's also a cuppa tea know based localization delegate that we could put in but because we have no Cupertino widgets in our application we'll just leave it out like this we then want to add the supported locales to the material app widget and we can do this by calling to our custom class and then calling to the delegate and then getting the list which is just a list of locales and you can see here that it's just a list of locales with each of our locales in it so we have English which is non specific to any country then we have French from France and then we have Japanese from Japan now let's start to add our string values into our error be files so first we'll start with the app title and we'll just call this application the counter app next we want to add the page title the page title is just the title for the home page and we'll just say counter app - home page and then finally we want to add our counter text string and this string is going to be a little bit different than the other two because we want it to be dynamic based on the value of the counter itself all right so there's set this up we want to use curly brackets then we want to put in the value that we want this to be dependent on so I'm going to call that value the counter then we want to the type for this particular string so the string is going to change based on whether or not it's plural then we can put in the cases for the plural function so we've got cases for when the counter is zero when the counter is one and when the counter is any other value when our counter is zero we'll just have it print out that you have never pushed this button then when our counter is one we'll print out that you have pushed this button one time now notice I've hard coded the one in here you could put in the counter variable if you wanted to but it's not really gonna make a difference because it will be equal to one regardless then finally for the other case we'll have it print out that you have pushed this button counter times with the counter being the variable that this entire string is dependent upon all right now once we save that ARB file if we go into the messages underscore en dart file you can see that there's now a lot of logic that has just been automatically generated in here so we've got logic for our app title and we've got logic for the page title and both of these are basically hard-coded in here and then we've got the logic for our counter text which calls out to a static function that takes in the counter and then it calls into our plural with the counter in it and then it has all of the cases 0 1 and then other alright so now let's fill out the French and the Japanese fields and I've just gone ahead and used Google Translate to get some fairly accurate translations so for the French it's going to be very similar to the English in the sense that we've got three different cases for the counter and then for the Japanese we'll only have two different cases because there's no difference between the one case and the other case and of course like with our English when we save the air B files the logic gets generated in these message files now let's go into our main dart file and start modifying the application with our new fields inside of our material app widget we need to change the title field to an on generate title field which takes in a builder function with the build context and we can use that build context to call to our s object and then get the app title and notice of course that the s object kind of works like a inherited widget so we call to the inherited widget using an of method with the build context and then that allows us to get to the app title string now the reason why we want to generate the title this way rather than using a static title is because the app delegate information that is all of the stuff inside of our s class and all the stuff inside of these delegates isn't added to the build context until after the material app is put on the widget tree and this specific field here on generate title allows us to get access to the build conducts with the localization delegates inside of it so when we call to this it won't come back as null instead it will already have the localization delegates set up and then we'll be able to use it now the same issue will happen with our my home page title if we initialize the title inside of this build function so instead what we'll do is we'll remove the title from here and then we'll initialize it down in our my home page app so now down here in the build function for the state object of this my home page app we can go ahead and call s dot our context set that into a variable called delegate and then just put the page title into the text of the app bar we can also use that same delegate variable to call to our counter text function and pass in the counter value so that it will properly change according to the counter value now the final thing that I want to do is add a button bar after our counter text so that we can dynamically change the locale of our application so the button bar will have three buttons in it each one will be a material button and each one will change the locale of our ass object so we can go ahead and just call s load pass in a locale and then call set state to have it change and we can do this for English US French France and then Japanese Japan alright so now let's open up our application and you can see here that we've got everything in English and we can go ahead and click one of these buttons to then change it to French and you can see that the app title up here has changed and the counter text text has also changed and then we can change everything to Japanese and you can see that that indeed worked as well and as we click this button the actual text in here changes based off of the number of times that the button has been pushed so when we've never pushed the button it just says you've never pushed this button and in French it has this little saying and I'm not even gonna try to pronounce that by the way and then in Japanese it has this little line and then if we push it once you can see that the Japanese changes and the France also changes and the English also changes and notice that time is singular and not plural and then when we push it a second time time becomes x and then in french we also have a change and in japanese there's no difference between 1 and 2 now before we finish this tutorial I want to show you guys how you can set up a gender value and then a more generic select value alright so let's take a look at how we can set up a string based off of gender so here we've got a gender value and again we're gonna open up some curly brackets or put in the gender and then we're going to say select and then we have our three cases female male and other the only case here that is required is the other case and this is of course also true for the plural cases so if we don't want female and male we could just put in the other case in this case we'll put in female and male and we can see inside of our messages underscore en file we now have a function that calls to an L gender passes into gender value and then it has cases for female Mae and other we can also do a more generic select string so say we want to select a string based on the role of the user you say they like login and we want to tell the user whether or not they're a member or an admin or whether or not they need to sign in we could have a value here and just use the Select function so we're going to select based off of the role and then we have our cases and the cases here are completely custom so here I've made a case called member and it says you're a member and then I have a case called admin which says you are an admin and then I have our other case and as we saw with our plural and gender functions we now have a new function for in an L select which selects off of role and then it passes in a map with the cases that we just created so member admin another alright guys well I hope this cleared things up and kind of showed you how Intel is much more streamlined if you liked this tutorial feel free to subscribe and like if you have any questions or comments feel free to leave them in the box below and if you dislike this video then by all means download it as much as you like if you want to support the channel feel free to go check out the patreon or just comment on this video have a good night