Flutter localization

Flutter is a cross-platform technology that promises a lot. However, during its early days it didn't have practical localization support and many unofficial solutions were created. In this article we are going through streamlined Flutter localization that relies on official Intl package and ARB files.

The easiest way to localize your Flutter app is to use Flutter Intl extension for VS Code or Android Studio. It does a lot of work for you, and brings you some functionalities, such as autocomplete suggestions for the string keys in Dart code, extraction of strings from Dart code to ARB files, etc.

1. Initialize plugin for your project

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

2. Add dependency

Add following dependency to pubspec.yaml file:

dependencies:
    flutter_localizations:
        sdk: flutter

3. Set localizationsDelegates and supportedLocales for your MaterialApp

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'),
        );
    }
}

4. Add string keys to main ARB file

Your main ARB file by default is lib/l10n/intl_en.arb

{
    "title": "Hello world!"
}

Here is more info about ARB file syntax.

5. Reference the keys in Dart code

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

That's all 🙂

Translation management for Flutter apps

As you start adding more locales to your app, the translation management becomes complicated. Check out the original article Flutter Localization from Localizely for more info on simplified translation management.

If you need to manage translations over-the-air, without building and releasing a new app version for simple text changes, take a look at Flutter over-the-air translation updates.