DEV Community

loading...
Localizely

Flutter localization

aleksakrstic profile image Aleksa Krstic ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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'),
        );
    }
}
Enter fullscreen mode Exit fullscreen mode

4. Add string keys to main ARB file

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

{
    "title": "Hello world!"
}
Enter fullscreen mode Exit fullscreen mode

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
    );
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion

pic
Editor guide
Collapse
vaclavhodek profile image
vaclavhodek

Localazy is also a great solution for managing ARB files, automating localization, managing translators and volunteers around your projects.

Also, it comes with shared translations that translate a huge portion of the app automatically to up to 80 languages.

Also, it's virtually free for the usual apps. All the above included.