Flutter + Localisation + Google Sheets API + Python => Internalisation paradise

Aurimas Deimantas
ITNEXT
Published in
7 min readFeb 14, 2020

--

Introduction

As many as you know, localised apps in local markets gives really good user experience. All we need to remember back in the day, when Facebook localised their app to other markets — their traction just went through the roof.

Currently, I’m in the progress to unleash another startup. And this time I’m not alone. I’m working side by side with my talented co-founders and since our product is aimed to many different markets — we needed a way to make localisation within the app.

We are a startup, cost really matters for us. And I’ve decided to dig deeper — how could I come up with some approach for easy localisation approach and easy scalability with it. And most importantly, easy collaboration so anyone at any time could review and update languages if needed.

Current approach allows us very easily to update/add/remove translations. It works extremely well as we are sticking with this approach for several weeks and we are very happy with it.

TLDR; End Result

All you need to do is run the script and languages automatically being localised and replaced in your Flutter folder.

Google Sheets

Translations in Google Sheets

Running the script

Languages generation

Output files automatically overriden in Flutter folder.

Auto-Generated files in Flutter

Mobile DEMO

Repos

Flutter — https://bitbucket.org/deimantasa/tutorial-translations-mobile/src

Translation script — https://bitbucket.org/deimantasa/tutorial-translations-api/src

Flutter

For localisation I’m using easy_localization (currently 2.1.0+2).

Project Structure

Project Structure

We’ve very simple structure. main.dart main our launch file which will execute and open home_page.dart . You’ll have to add new directory assets/languages and put there whichever languages you prefer. This path is very important.

In order to let Flutter access its files, in pubspec.yaml you’ll need to append the file.

All you do is telling Flutter that files can be accessed from this particular path.

Localisation

First and foremost, we need to wrap MyApp (line 17) with EasyLocalization. It comes with several parameters we need to provide. It’s a list of supportive languages (line 11) and a path, where we keep our language assets (line 16). Path should be the same as we provided in pubspec.yaml earlier.

After going further, we meet MaterialApp (line 31). We’ve to provide localizationDelegates (line 33), supportedLocales (line 38) and locale (line 39). After we did all that — we are set! Kind of.

LanguageHelper

As you noticed in main.dart file I’ve some references to LanguageHelper. Here I just keep various helper methods and supported languages. I like to keep things tidy and in one place.

HomePage

Very straightforward page with text and a button. Here you notice that in Text widget I use key-value pair from my JSON which calls tr() method. Here is where magic happens. Depending on which locale is selected — appropriate language file (json) will be read and then specified string from key (homePage.appBarTitle) will be taken.

For selecting the language, we simply show dialog.

To change the language, we’ve to simply assign new locale to our EasyLocalizations provider (EasyLocalization.of(context).locale = newLocale;) . Then whole provider tree from EasyLocalization gets triggered and rebuilds giving our new texts changes. Very easy concept.

Script

Now interesting part — our python automated script. Once you open generate_translations file, you’ll need to change couple of variables.

  1. Flutter project path — path, where is your language files (jsons) stored locally;
  2. Credentials json file path — local path, where is credentials.json located (this doesn’t need to be changed, as it’s located in the same folder);
  3. Translations sheet name — name of the google sheet you will be working with.

I won’t go deep in the script itself, I hope it’s self explanatory enough.

Key function is generation of json file with provided languages.

We generate language json file based on columns (in Google Sheets) Page, Key and provided language. I’ll run more about this in following section.

Obtaining google credentials

In order to have credentials.json filled up, we need to do several steps, which includes:

  1. Creation of project in google cloud;
  2. Enabling Google Sheets and Google Drive APIs;
  3. Creating Services Account within Google Sheets credentials.

First we go to https://console.cloud.google.com/ and click on new project.

Then type project name and click Create.

Once we created our project, within our dashboard we navigate to our API section and click to Go to API Overview.

Once there, we need to enable Drive and Sheets API. Let’s click on Enable APIs and Services

Here we search for Sheets and Drive APIs and enable them

Once both Sheets and Drive APIs are enabled, we navigate to Sheets API credentials section.

We need to create new service account.

After entering name, continue and create serviced account.

Once created, click on that and create new JSON file with your credentials.

After creation, you will receive json file. Paste its content to credentials.json file which is in python root directory.

That’s it, now we have serviced account.

Google Sheets

Last step is to create google sheets. Simply go to http://sheets.google.com/ and create one sheet. Its name is very important as it has to be referenced in TRANSLATIONS_SHEET_NAME variable.
Sheet structure is as follows:

Page, Key, <your languages>

As you noticed from script, these strings are case sensitive. Final version:

Now you can invite service-account user. Click on Share

And paste the address you find from downloaded credentials with key client_email.

After that your serviced-account will be able to access Google Sheet.

And we are done.

Running the script

Now all what’s left is to run the script. Simply go to root of python directory and write python3 generate_translations.py In couple of seconds script will finish and you see, which languages are generated.

And that’s it. You have fully scalable automated script.
Following improvements can be made:

  1. Script made as a service in cloud;
  2. After generating languages json files, they will automatically be uploaded to some cloud storage;
  3. Once building on Flutter, it triggers the language service. If there are some updates, language service generate new languages and they are automatically downloaded and replaced in Flutter.

That would be full automation. But, as for this moment, I’m quite happy with current approach. Maybe once I’ve more time, I’ll proceed to further enhance the script.

Hope you could learn something new in this article and it helps and inspires you to build something cool! Have a bright week ahead!

--

--