Flutter - Setup localization in your application

Localization is one of the most common parts that you should add to your project at the beginning. This will be helpful and save you a lot of time later when you decide to add more languages into your app. In this post, we will learn how to setup localization step by step.

0. Install Flutter Intl on your IDE (Android Studio or VSCode)

Before starting, you have to install Flutter Intl on your IDE:

For Android/IntelliJ IDEA: https://plugins.jetbrains.com/plugin/13666-flutter-intl

For VS Code: https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl

1. Enable localization in your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  # New
  flutter_localizations:
    sdk: flutter
  # ...

# Add this to end of your pubspec.yaml
flutter_intl:
  enabled: true

2. Run command to generate code

Run below command to generate localization files:

flutter pub global run intl_utils:generate

This command will generate 2 folders/directories:

generated/: you don’t need to touch this folder at all, it contains necessary (auto generated) code for localization working. Under /generated/ you will see a l10n.dart file where the S class is generated, this S class will be used later.

l10n/: this is where you add your localized files (.arb files), each .arb file is for one language (Ex: intl_en.arb – English, intl_vi.arb – Vietnamese, intl_fr.arb – French). The content of .arb file is similar to JSON, there are keys – values:

{
  "hello": "Hello Coflutter"
}

{
  "hello": "Xin chào Coflutter"
}

3. Config localization in your app

Under your MaterialApp (or similar kind of XApp depending on your top level App).

import 'package:coflutter/generated/l10n.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(LocalizationDemo());

class LocalizationDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        // Use our delegate here
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      // Supported languages list are auto generated, you just need to declare it here
      supportedLocales: S.delegate.supportedLocales,
      // ... Other code
    );
  }
}

4. Use the localized strings

// Great! We don't even need context
Text(S.current.hello)

// OR

Text(S.of(context).hello)

5. Switch to a supported Locale

// English
S.load(Locale('en'));

// Vietnamese
S.load(Locale('vi'));

// French
S.load(Locale('fr'));

6. Handle Plurals

I will come back to this part later when I get more time.

7. Notes:

When you add new key-value to your .arb files, then save it the code will be generated again in almost the cases. But if it does not work, run the command in step 2 above to generate code.
In your .arb file, avoid using the keys which are already used by Dart/Flutter as their keywords (Ex: switch, default, int…).

8. Demo

import 'package:coflutter/generated/l10n.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

void main() => runApp(LocalizationDemo());

class LocalizationDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      title: 'Coflutter - Localization',
      home: Scaffold(
          appBar: AppBar(
            title: Text('Coflutter - Localization'),
            backgroundColor: const Color(0xffae00f0),
          ),
          body: LocalizationScreen()),
    );
  }
}

class LocalizationScreen extends StatefulWidget {
  @override
  _LocalizationScreenState createState() => _LocalizationScreenState();
}

class _LocalizationScreenState extends State<LocalizationScreen> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(S.current.hello),
          SizedBox(
            height: 10,
          ),
          RaisedButton(
            onPressed: () {
              S.load(Locale('en'));
              setState(() {});
            },
            child: Text(S.current.english),
          ),
          SizedBox(
            height: 10,
          ),
          RaisedButton(
            onPressed: () {
              S.load(Locale('vi'));
              setState(() {});
            },
            child: Text(S.current.vietnamese),
          )
        ],
      ),
    );
  }
}

If you are looking for mobile/web Software Engineers to build you next projects, please Drop us your request!