Flutter Localization

Since app localization is very common with mobile app development

This article shows you step-by-step to add a flutter localization to your Flutter application. Here’s what you’re visiting build today:

Usage

The first step is to add the easy_localization as a dependency in the pubspec.yaml file

dependencies:
  ... 
  easy_localization: ^3.0.0

Create a folder and add translation files like this

assets
└── translations
    ├── {languageCode}.{ext}                  //only language code
    └── {languageCode}-{countryCode}.{ext}    //or full locale code

Example:

assets
└── translations
    ├── en.json
    └── en-US.json

Declare your assets localization directory in pubspec.yaml:

flutter:
  assets:
    - assets/translations/

Note on iOS

For translation to work on iOS you need to add supported locales to ios/Runner/Info.plis

Example:

<key>CFBundleLocalizations</key>
<array>
  <string>en</string>
  <string>nb</string>
</array>

 Initialize library

Call EasyLocalization.ensureInitialized() in your main before runApp.

void main() async{
  // ...
  // Needs to be called so that we can await for EasyLocalization.ensureInitialized();
  WidgetsFlutterBinding.ensureInitialized();

  await EasyLocalization.ensureInitialized();
  // ...
  runApp(....)
  // ...
}

Add EasyLocalization widget like in the example.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:easy_localization/easy_localization.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();
  
  runApp(
    EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('de', 'DE')],
      path: 'assets/translations', // <-- change the path of the translation files 
      fallbackLocale: Locale('en', 'US'),
      child: MyApp()
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage()
    );
  }
}

Change or get locale

context.locale = Locale('en', 'US');

print(context.locale.toString());

Translate tr()

The main function for translate your language keys

You can use extension methods of [String] or [Text] widget, you can also use tr() as a static function.

Text('title').tr() //Text widget

print('title'.tr()); //String

var title = tr('title') //Static function

Now your app is ready to change the language. You can create the TranslationDemo class as a stateful widget with, widgets you want and a preferred Ui design. In your language JSON files add the words that you need to translate. Add as many as JSON files you want and add the language to supported locales. The keys that I used for my demo are as follows.

en-UK.json

{
  "title" : "Title",
  "app_local_demo" : "Application localization example",
  "demo_details" : "This is a sample project to change the language with a drop down menu of languages"
}

es-SP.json

{
  "title" : "Título",
  "app_local_demo" : "Ejemplo de localización de aplicaciones",
  "demo_details" : "Este es un proyecto de ejemplo para cambiar el idioma con un menú desplegable de idiomas"
}

To get the words just import the package and add the key as below example.

'title'.tr()

That’s it will meet in next article.

You’re looking for resources….

Here it is: https://github.com/umeshvision/multi_language_demo