How to use run time downloaded localization arb/json file in flutter?

Question

I have read so many tutorials and blogs on flutter localization. They use arb/json file for localization from the assets folder or l10n folder. That is the fixed language list. Means if I use English localization and now at run time I want to provide Spanish/Chinese/Italian/French to the user then I have to put that localization arb/json file in the project and then user can use that language. So is there any way that I can download the localization file at run time and use it in the app? Is there any library available to do that?

Madden

You would likely have to do a different system. One where you would have to load your localization files from your own server in JSON format (as an example) and make sure all your widgets, that have localization, load that data from methods that can check on the current localization and get the correct translations. – Ubiquitous

Thanks João Soares, but how to load that downloaded json localization in our app ?? as per the articles we can load only project directory json localization. – Madden

Why can't you have the JSON files as part of the assets? I believe the answer from another user below might help you. – Ubiquitous

Answer 1

I made a simple multilanguage Android app with GetX and Hive.

This project does the following tasks, it:

• toggles between different languages,
• installs new languages packages from external sources, and
• offers local data persistence.

After installing new language packages the app needs to restart for the changes to take effect.

The source code can be found here.

UPDATE August 7, 2021

A new version of this project was released here.

Phosphatize

wow this is the perfect example. Thank you. in the example "wnetworking" package is missing. cold you please update the repo or provide a link where I can get wnetworking package. +1 – Madden

wnetworking package is not ready to publish yet, it contains operations related to API, etc. You can replace HttpReqService.getJson with your typical http.get but keep in mind the return value and exceptions. – Wardieu

I made a improved version for this project, you can get it in this repo. – Wardieu

Answer 2

I used the flutter_i18n package on a Flutter project. It allows to retrieve translations from a remote source, thanks to the NetworkFileTranslationLoader class.

To use it, you need to add it to your localizationsDelegates as shown in the documentation. The example below shows how to load all translations files from the static directory on a remote server.

localizationsDelegates: [
        FlutterI18nDelegate(translationLoader: 
          NetworkFileTranslationLoader(baseUri: Uri.https("example.com", "static")),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate
],

Gregory

That is interesting. but how do I use it? any article/tutorial/demo... – Madden

the package documentation i attached to my answer gives you all the steps to make it work. i just highlighted the localizationsDelegates because this is where translations files are retrieved from a remote source. – Gregory

Answer 3

All the default localization approaches via l10n or arb/json are not capable of runtime localizing. It is because they use InheritedWidget/BuildContext resolving of the localization - thus the assets bundle with resources should be prebuilt beforehand - as with fonts, images, etc(otherwise you will have an error Unable to load asset).

But what you want is possible. You will have to set up your own approach though. The easiest way to do it is to on app load download all the needed JSON localization files and store them in shared prefs(db/file system). Before entering each screen check current localization and retrieve the needed(language-wise) file, parse it and use it in your Text widgets.

Also, you can do it backends style - each request to the backend should contain locale query in its URL or locale field in body. It will retrieve not only values but also titles in key-value style like

some-get/data?locale=en
{
   "userName": {
       "key":"User name",
       "value": "John Dou"
   }
}

All the approaches of dynamic localization will need additional work both on the frontend(flutter) and backend. I assume there are services already that provide some solutions for that(not flutter specific maybe) but quick googling was unsuccessful.

Bladder