Mastering Localization in Flutter with localization_plus

Localization is a crucial aspect of modern app development, allowing your Flutter apps to reach a global audience by supporting multiple languages. The localization_plus package in Flutter simplifies this process, making it easier to manage different language assets and integrate them into your app. This blog post will guide you through using localization_plus to add localization support to your Flutter application.

Introduction to localization_plus

The localization_plus package is a powerful and efficient tool for implementing localization in Flutter apps. It provides an easy-to-use API and supports both simple text translations and complex pluralizations and genderizations.

• ✅ Fully tested code (100% code coverage)
• 🌐 Easy translations for many languages
• 🛡️ Null safety
• 📂 Load translations from JSON file
• 🧩 Extension methods on BuildContext, String and Text
• 🚀 Supports plural, nesting, choice, RTL locales and more
• ↩️ Fallback locale keys redirection (Optional)
• 💾 Persistent locale storage (Optional)
• ❗ Error widget for missing translations
• 🎧 Listening to localization changes via controller
• 🔁 Context independent locale change via controller

Installation 

Add to your pubspec.yaml:

dependencies:
  localization_plus: <last_version>

Create folder and add translation files like this

i18n
    ├── {languageCode}.{ext}                  // useOnlyLangCode: true
    └── {languageCode}-{countryCode}.{ext}    // useOnlyLangCode: false (default)

Example:

i18n
    ├── en.json
    └── en-US.json 

Declare your assets localization directory in pubspec.yaml:

flutter:
  assets:
    - i18n/

🚨 Note on iOS 

For translation to work on iOS you need to add supported locales to ios/Runner/Info.plist as described here.

Example:

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

Usage/Examples 

import 'package:flutter/material.dart';
import 'package:localization_plus/localization_plus.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // If you wish, you can define it so that it can be accessed 
  // from anywhere in the system with a package such as the getIt library
  LocalizationPlusController controller = await LocalizationPlusController.init(
    path: 'i18n',
  );

  runApp(
    LocalizationPlus(
      controller: controller,
      supportedLocales: [
        'en_US'.toLocale(),
        'ar_DZ'.toLocale(),
        'tr_TR'.toLocale(),
        'ru_RU'.toLocale(),
      ],
      child: const MyApp()
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Localizations
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,

      home: MyHomePage()
    );
  }
}

Full example