Automatically Translate Your Flutter App

A Flutter Package Spotlight

Introduction

If you want to reach a global audience, internationalizing your app is key. Flutter makes this easy with the flutter_localizations & intl packages combined with ARB files. However, you still need to translate your messages. That’s why I am excited to introduce auto_translator! Not only because it is a great addition to your workflow when internationalizing your Flutter app, but also because it is the first package that I have officially published! 😃

After designing this program for my personal use, I felt it was worth sharing with the Flutter community. I should note that between the time I wrote the code and decided to publish, a couple of packages that similarly perform the task made there way to pub.dev. In fact, I had to rename my package in order to publish because the original name was now taken. 😅 However, I feel that my package brings a different value to developers, so I went ahead and published. Let’s take a look at what auto_translator can do.

Features

This package was created with 4 primary goals in mind:

1. Ease of use.
2. Work with complex ARB strings, conditions & variables.
3. Quality contextual translations with minimal quota usage.
4. Seamless integration with the flutter_localizations and intl packages, Flutter’s preferred approach to internationalization.

How do each of these goals look in practice?

Ease of Use & Seamless Integration

These two goals go somewhat hand-in-hand. auto_translator uses the same files as flutter_localizations & intl for configuration. In l10n.yaml, an additional translator section allows you to define your target languages, and in the metadata sections of your template ARB file, you can tell auto_translator to ignore or force translations for specific strings as needed.

The only other step before running, is setting up Google Cloud Translate if you you don’t already have access to the service. Instructions for doing so can be found here. Then save your API key to a file in your project root named translator_key.

To use auto_translator, simply add auto_translator under dev_dependencies in pubspec.yaml. Then, once configured, run flutter pub run auto_translator.

Minimal Cloud Translate Quota Usage

auto_translator uses a novel approach to Google Cloud Translate queries to reduce the character count in these queries while maintaining the quality of the contextually based translations. This is of course designed to save on the quota usage, minimizing costs. If you are not translating a crazy number of strings, there should be no issue staying under the free usage limits.

To ensure no unnecessary quota usage, auto_translator will never request a translation for a phrase that has already been translated to a specific target language (unless using the force option). Plus, you can tell auto_translator to ignore any string that has no need to be translated.

Complex ARB Strings

Translating a file of string constants using Google Cloud Translate is relatively simple, but when you start to use the advanced capabilities of the ARB format, it grows much more difficult. ARB strings are capable of using placeholder variables, other ARB strings as variables, and conditional expressions, so they can get quite complex. Let’s look at an example:

"userSelection": "{choice, select, 0{$name chose $otherString} 1{$name chose $someOtherString} other{$name chose $yetAnotherString}}",
"@userSelection": {
  "placeholders": {
    "choice": {
      "type": "int"
    },
    "name": {
      "type": "String",
  }
}

Here, we are taking an integer and a string input and evaluating a conditional expression based on the integer to output a string value containing both the string input and a string defined elsewhere in the ARB file.

As strings get this complex, it becomes difficult to achieve the correct contextual translation for a given phrase. Fortunately, auto_translator is designed specifically to address this issue, all while minimizing Cloud Translate quota usage.

Considerations & Future Work

As mentioned, this started out as a project for personal use. I decided to use Google Cloud Translate because I had worked with it before, and I feel that it does a great job at translating quite accurately. I have considered expanding the package to integrate other translation services, so I am fielding suggestions for services that should be included.

If you are interested in checking out a full-fledged app that was translated with auto_translator, take a look at Lights: A Memory Game. This was a fun side project of mine that expands on the classic memory game Simon says.

As always, thank you for reading! Follow me to keep up with future articles about Flutter, Software Development, IT Administration, and much more!