How to add localization support inside Flutter packages

Question

I am creating a Flutter package that has some text inside it. I want the consumer application of my package to pass locale to it, based on that locale my package should decide whether to show this text in 'Arabic' or 'English' (This means my package will have resource file containing strings inside it for these locales). How can I achieve this?

The only thing I was able to achieve was that my consumer application has the resource file and both my consumer application and package have to register the same localization plugin as dependency. I do not want my consumer app to worry about localization and instead my package should handle showing of translated strings based on locale. Is there anything wrong with my approach?

Selfcontained

I have implemented the same by following what is done in another package - Catcher. Here is the file - github.com/jhomlala/catcher/blob/master/lib/model/… – Again

have you found nay solutions – Snowshed

@Again how do yo implement it. any example – Snowshed

Answer 1

Since then, Flutter team has introduced their own localization support. This answer aims to integrate official solution and adapting it into use for packages.

The key is to configure flutter l10n to generate output in out library package instead of .dart_tool by setting synthetic_package: false in l10n.yaml

1. Edit l10n.yaml

arb-dir: lib/l10n
output-dir: lib/l10n
template-arb-file: app_en_hk.arb
output-localization-file: app_localizations.dart
nullable-getter: false
use-escaping: true
synthetic-package: false // this line

2. Add flutter_gen in dev_dependencies (ref) in pubspec.yaml, in addition to build_runner. I ran the command flutter pub add flutter_gen --dev in command line to ensure I get the newest available version.

3. Execute following commands to generate the localization files

flutter clean
flutter pub get
flutter gen-l10n # required command
dart run build_runner build --delete-conflicting-outputs

4. In your code where localization is needed, instead of importing import 'package:flutter_gen/gen_l10n/app_localizations.dart';, import import 'package:<your_package>/l10n/app_localizations.dart'; instead. Android Studio should be able to pick it up and offer quick fixes for this.

5. When publishing, also include the generated l10n files (i.e. lib/l10n in the above l10n.yaml)

6. Dependent apps will still need to include localization delegates in their MaterialApp constructor, as instructed here. Particularly, they will need to include your libraries' custom AppLocalizations.delegate. Make this clear in your README Usage guides.

Condemn

I don't think you need to add the flutter_gen package to the dependencies (pub.dev/packages/flutter_gen). It is an unrelated package that coincidentally has the same name as the one generated automatically by build_runner. – Archbishop

Answer 2

In order to generate localization files inside a package:

1. Create localization files in .arb format
2. add l10n.yaml file inside the root folder of the package with these settings:

# Where to find translation files
arb-dir: lib/l10n

# Which translation is the default/template
template-arb-file: app_en.arb

# What to call generated dart files
output-localization-file: app_localizations.dart

3. make sure your main localization file and the 'template-arb-file' names are the same
4. update 'dependencies' and 'flutter' in pubspec.yaml file of the package as below:

dependencies:
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0


flutter:
  uses-material-design: true
  generate: true

5. run 'flutter pub get' inside the package root location
6. Wrap your main UI widget with a MaterialApp
7. Update MaterialApp as below

MaterialApp(
              localizationsDelegates: AppLocalizations.localizationsDelegates,
              supportedLocales: AppLocalizations.supportedLocales,
      ),

8. Call the localization key inside a widget:

Text(AppLocalizations.of(context)!.helloWorld)

Note: Basically do almost same steps in official documentation inside your package root folder with a Custom MaterialApp https://docs.flutter.dev/development/accessibility-and-localization/internationalization

Grout

This is not very useful, as you're most likely not going to use MaterialApp widget inside a package. – Arvo

@Arvo have you found any solutions – Snowshed