Flutter Localization - Internationalization with JSON

Learn how to track device locale and easily Localize and Internationalize your Flutter app

In this article, you’ll learn how to localize and internationalize your Flutter app using Flutter Localizations dependency and JSON files containing translated strings. But why do we need to localize our app? Why should we care about internationalization? First of all, let’s find out what localization and internationalization actually mean.

Localization vs Internationalization

• For any application to work in different languages, it first needs to know the current locale of the system where the application is running and then show the content in that particular locale; this process is called Localization.
• Internationalization describes the process of designing products to meet the needs of different users in different countries or designing them so they can easily be modified to achieve this target. Simply enabling an app to work with different languages is called Internationalizing the application.

Image source: locale.to

Well, 50% of the countries within the Top 10 downloads and revenue in iOS App Store and 80% of the countries within the Top 10 downloads and revenue in Google Play Store are non-English speaking countries from Europe and East Asia. [Source: here]

Localizing your content and app brings a lot of benefits to the table, including:

• Finding new opportunities
• Growing revenues
• Building closer customer relationships
• Providing a better experience.

Getting Started

If you want to follow along, this is the starter project which currently works in English, and our job is to localize this app for Hindi and Spanish. And we are going to achieve this goal using JSON files that contain your strings in different languages.

GitHub - thecodexhub/flutter-localizations-example — Starter Project

Create JSON files

First we need to create the JSON files for translated strings. We’ll create a folder ‘/lang’ in the root directory of the Flutter app to store different JSON files i.e., ‘hi.json’ and ‘es.json’ (also we need one more ‘en.json’ for English language). These JSON files contain simple key-value pairs, but the key should be the same in all three files.

Language folder with translated strings in JSON [en.json]

Language folder with translated strings in JSON [es.json]

Add dependency and assets

Now, in order to work with these files, we need to add these in pubspec.yaml file, specify them as assets. Also we will be required a dependency that comes with Flutter SDK itself, so we’ll add ‘flutter_localizations’ as well inside dependencies.

Updated pubspec.yaml file

Setting up the Internationalized app

By default, Flutter only provides US English localizations. So in order to enable our app to work with different languages, we need to add some properties to the MaterialApp (or CupertinoApp or WidgetsApp) widget.

• supportedLocales: List of the locales that our app will support
• localizationsDelegate: The delegates collectively define all of the localized resources and load localization data for proper language.
• GlobalMaterialLocalizations.delegate provides localized strings and values for Material components.
• GlobalWidgetsLocalizations.delegate defines the default text-direction, either left-to-right or right-to-left for the Widgets library.
• localeResolutionCallback: Checks if the current device locale is supported by the app and returns a locale that will be used by the app.

lib/main.dart file with additional properties for MaterialApp

Create AppLocalizations class

Apart from these, we need something like GlobalMaterialLocalizations that will be responsible for loading the translated strings from assets and use them when required in our application. Hence, we are going to create a file named ‘app_localization.dart’ under the ‘/lib’ folder. Here resides the actual logic of how load() and translate() methods are working.

N.B.- Localizations are accessed using InheritedWidget ‘of’ syntax.

AppLocalizations class with load() and translate() methods

Still there is some work left. Flutter needs to know when to load the translated strings from assets and use them in our app. Flutter Localizations use delegates for this purpose. So we are going to create _AppLocalizationsDelegate class that extends LocalizationsDelegate.

_AppLocalizationsDelegate class and static member delegate

Add to MaterialApp localizationsDelegate list

The AppLocalizations class is now ready to use and we’ll add the delegate in our MaterialApp widget’s localizationDelegate list.

Translating the UI

We are not finished yet. Come on! Let’s change the hard coded strings in our app UI. This step is very simple. We just need to call AppLocalizations.of(context).translate(“_KEY_”); this key is the same key that we have specified in our JSON files.

Translating the text in UI

Here we go. We have done all the necessary steps. Compile and run the application, it will show its content in English if your device’s locale is set to English. Close the application and go to Settings → System → Languages and Input → Language (This path may vary from device to device). Add a different language, e.g- Hindi or Spanish and set it to primary language. Now relaunch the application and you should see the contents in Spanish.

Conclusion

This article has covered everything you need to know to localize and internationalize your Flutter app by simply creating a JSON file for every supported language and using AppLocalizations throughout the UI.

I hope this blog will provide you sufficient knowledge to use it in your own projects. If you have any query or suggestions, let me know in the comments.

Don’t forget to clap 👏 if this article really helps you and teaches you something new. Actually you know you can click that clap button 50 times. Try it out.😅

Thanks for reading. Happy coding!

GitHub - thecodexhub/flutter-localizations-example

GitHub - thecodexhub - Overview