Flutter localization workflow streamlined

This guide will explain how you can streamline the localization workflow of Flutter applications.

Part 1: Setting up your Flutter app

Install IDE plugin

Install Flutter Intl plugin for IDE you’re using (Visual Studio Code or Android Studio).
In this article we will explain how to do it in Android Studio. It should be fairly similar in VS Code, just follow the steps in the extension documentation.

There is also a CLI tool intl_utils in case you need similar operations for Continuous Integration.

Initialize plugin for your project

Go to Tools | Flutter Intl and run Initialize for the Project.

By default en locale is added by auto-creating a file lib/l10n/intl_en.arb.

Note: The plugin generates and maintains files inside lib/generated/ folder which you should not edit manually. But you should keep these files in your project repository.

Set up your app

Add dependency needed for localization to pubspec.yaml file:

dependencies:
    // Other dependencies...
    flutter_localizations:
        sdk: flutter

Set up your localizationsDelegates and your supportedLocales which will allow accessing the strings.

import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            localizationsDelegates: [
                S.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: S.delegate.supportedLocales,
            title: 'Flutter Demo',
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}

Add other locales

You probably want to localize your Flutter app into more than one locale.

You can add more locales by going to Tools | Flutter Intl and running Add locale command.

Add string keys to main ARB file

Your main ARB file by default is lib/l10n/intl_en.arb. When you add new key-value pairs in it and save the file, those keys will be automatically available for auto-complete in your Dart code.

File content example:

{
    "title": "Hello world!"
}

In essence, ARB file is a JSON file with some conventions.

Reference the keys in Dart code

The ARB file’s keys now correspond to methods from the S class. For example:

Widget build(BuildContext context) {
    return Text(
        S.of(context).title
    );
}

As an alternative way, you can just add a translation string in Dart code, and extract it to ARB files via intention action in Android Studio or via code actions in VS Code. That way you can add the same key to all ARB files.

Part 2: Managing your translations

As your app grows with the number of string keys and the number of different languages for end-users, it gets more complicated to maintain translations.
Here is how to streamline the localization workflow:

Create a project in Localizely

Once you sign up to Localizely, just go to My projects page and tap “+” button (or explore the Sample Project if you wish to get more familiar with Localizely features first). Give your project a name and set your main and other languages. You can change the main language later if needed.

Each project gets a unique ID (you can find it in My projects page), that is needed for the next step.

Connect your IDE with Localizely

In your IDE go to Tools | Flutter Intl | Integrate with Localizely and run Connect command.
You will be asked for your personal API token which you can get from My Profile page, and project ID we mentioned in the previous step.

Enter the data and click connect.

Once connected, your personal API token will be stored inside the file <USER_HOME>/.localizely/credentials, and project ID will be added to pubspec.yaml file inside your project.
Check out plugin documentation for additional but optional config parameters inside pubspec.yaml file.

Upload main ARB file

During the development of the app, we constantly add new string keys that need to be translated later. A common practice is to add those new string keys only to the main locale during development.

Once planned features are implemented, you want to upload the main ARB file to Localizely, for your team to translate it.

In your IDE go to Tools | Flutter Intl | Integrate with Localizely and run Upload main ARB file command.

NOTE: Alternatively you can always add new string keys in Localizely platform first, and then download them for development. It depends on what fits into your workflow better.

Translate

Localizely has an editor on Translations page that reminds of Excel tables commonly used for translations management. Feel free to explore the Sample project or just take a look at Getting started guide to grasp the basic concept and options.

If you have previously invited your teammates to the Localizely project, you can assign them a task to translate newly added string keys.

Download translated ARB files

The translation part is done.
In your IDE go to Tools | Flutter Intl | Integrate with Localizely and run Download ARB files command.
ARB files will be downloaded from Localizely platform and put in the proper place in your Flutter project.

Publish your app

Your Flutter app now has ready translations for the next release.
You are ready to do QA check and publish the app!