Source Code: https://github.com/rodydavis/flutter_take_5
In this video I show you how easy it is to internationalize your Flutter application. You can use VSCode to generate the code fo you, and have Google Translate create the other languages based off of your default locale.
0:00 · hey guys my name is ready in this video we’re going to internationalize our flutter applications if you want to get to where we are now please watch the other videos in the series and we build upon the application in each step so you’ll get caught up right where we are first thing you need to do is open up vs code and install this extension called vs code flutter by 18 and JSON this
0:21 · extension is really cool it allows us to generate dart code that has all the hard-coded values for us to use inside of our application so we can have autocomplete and be able to add new languages very very easily perfect so once we do that we need to open up our post by camel and add a new package so this is going to be flutter localization and this is also gonna come
0:50 · from the SDK wonderful and let’s go ahead and run packages get sorry this is an S photo localizations perfect okay so
1:08 · now that we have that we need to add our generated file so open up the command palette we’re gonna type in it and this will run the code generation for us we’re going to just leave the default and we hit enter awesome so what it does is it creates a config for us that we can customize where the generated path is being generated here’s the generated file that will we don’t want to modify by hand and see it generates these functions for us as well as our JSON
1:39 · file to write all of our strings inside so let’s go ahead and add a new one called title we’re going to say flutter rocks and then now once you do this you have to run this update command and this will update the generated file for you and this will do it for every language that you have awesome so once we have
2:03 · this we need to open up our main dart and start to customize this you know how we actually add the localization to the application so we’re going to do a final I won a ten equal to I 1 8 and delegate I can go ahead and import this okay let’s do down here at the bottom let’s provide our resolution callback so this would be locale resolutions callback
2:41 · yeah look how resolution callback here we go and then resolution and what we’re gonna do is this is basically to be if it can’t determine the locale we want to fall back to a lookout that we do have supported so in this case we’re just going to pour back to English wonderful and we also want to provide a supported locales and I’ll link to instructions on
3:11 · how you can set this up an iOS to be able to update your info plist to be able to support multiple languages because this is just for the flutter application itself when you release to an app store you still need to add update the info.plist manually so we’re gonna have the 118 and they’re gonna have this is a part that we had that package for so global material is like material localizations step delegate
3:40 · right here and we need that Cupertino one so global or sorry global widgets one level widgets localization delegate wonderful you can fix our imports sorts them and let’s see we also just need a locale to we can update this manually if we want so Ian us wonderful and now
4:11 · instead of having to hard code this title it’s something that we could do now is generate this title so you can do odd generate title this gives us access to the context and this is how we’re going to be adding our strings from now on we can have one eight n of context so uses inherited
4:30 · widget to look it up and we can looking for title that’s great so now we don’t have a hard-coded title anymore wonderful so let me just show you how easy it is to add new titles to our application so let’s go in and let’s go to our tabs because we know we have four different things so we have home about context and settings let’s go in here and there’s a really cool little thing that I’ll show you which you can actually separate your strings by folder so I can say home and you can say title
5:07 · this would be home and you may be asking well why would I want to do that well this way you can have your strings you know well when you have code complete you can see all the individual strings sorted by the thing you’re looking for so settings title will be settings we have contacts and about I believe yeah
5:43 · okay so once we have that we can run our update command just like before this we’re going to do command palette and then update it will update our titles for us see this is what I’m saying if you have the nested objects allows us to go in and scope it for what we’re looking for so you can just type contacts and it filters out all the strings that are related to the contacts let’s go into here and now we just do the same thing as before we do I want am of context and we’re going to do
6:14 · contacts title the cool part is you can do this very easily for multiple ones so we can do about title contacts title and this one is home title and settings title
6:34 · the only thing you have to import is this generated file and it takes care of everything else for you awesome so one quick thing I wanted to show you is how you can use this to generate your locales based on different languages so let me go ahead and get that set up for you if you want to support more languages than just English it’s actually very easy all you have to do is obtain a Google Translate API key and this extension will do everything for you so once you have an API key you can
7:04 · run the update command to set the API key here and once you do that you can then run the create automatic translations from the default locale in this case our default locale is English so we hit enter it will take the strings
7:20 · from your English file run over the Google Translate API and if we look we have our Spanish translation for example but what’s cool is if you notice here we have the name variable on the right and Japanese it includes it on the left so it knows where to put things inside the sentence that makes sense and you could do this for as many languages you want so for example we can add some new locales as well so let’s do French let’s
7:54 · add Chinese and Russia to the same
8:11 · command as before see at first it’s going to be empty and we’re gonna run up run our command again it’s gonna take a second and there it goes it generates it for us and we have French Japanese Russian and Chinese very
8:30 · cool now all that’s left is to just go out throughout your entire application using this command as before you can also set up custom dart extensions if you want to make this easier to grab the just you know using the bill conti to have access to this object but this is so small already I feel like it’s more hassle than it’s worth so that does it for this video if you have any questions please leave them down in the comments below please reach out to me on Twitter and make sure to follow me on my
9:03 · medium post to I like to blog about this stuff as well and of course I have a patreon if you want to support me thank you so much and I’ll see you in the next one