Internationalization on a Flutter app
Hello dev, in most part of the time we build apps for all of the world and having just the english language in the app is not enough, so in this case you need to translate all the content in order to make the app useful in certain cases where the user does not know english. In this article I’ll show an example doing the internationalization in a easy way.
First I’ll not build a beautiful app because the main point here is make things simple, so in this example we just have a title to use on the appbar and phrase on the center of the screen like the image below.
Now let’s start creating the asset folder on the root of the project and add the translations folder inside of it, and inside of the translations folder we can create the .arb files with our phrases translated according the language that we want. Just to give you a context ARB (Application Resource Bundle), is basically a json file intended for localization. The image below is the example that you should have.
The next step is add a few lines on the pubspec.yaml because we need the intl package to help us in this process, inform the flutter_localizations the Flutter SDK and give the generate property the value true because we want the Flutter generating everything we need automatically and last but not least, also add on the root of the project the l10n.yaml file as the image below.
So now the last thing you need to setup is on the MaterialApp widget adding the localizationsDelegates and the supportedLocales. And with that we are good to go.
To use the texts that you have translated you just have to use the AppLocalization.of(context).title and AppLocalization.of(context).phrase, according the properties defined on the .arb file.
Translate you app to different languages reach much more users, and this is really good, and as we can see, in Flutter going this translation thing is easy. I hope that I’d helped you with this simple tutorial and if you are interested in read more about that go check the Flutter Internationalization documentation.
