CODEWITHSUNDEEP
flutterlocalizationinternationalizationflutter-dependenciesflutter-packages
Taha Ali
Taha Ali

Reputation: 1324

How to add localization support inside Flutter packages

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?

Upvotes: 23

Views: 5646

Answers (2)

luiges90
luiges90

Reputation: 4598

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

  1. 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.

  2. 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

  1. 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.

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

  3. 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.

Upvotes: 12

Ali Riza Reisoglu
Ali Riza Reisoglu

Reputation: 7

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
  1. make sure your main localization file and the 'template-arb-file' names are the same
  2. 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
  1. run 'flutter pub get' inside the package root location
  2. Wrap your main UI widget with a MaterialApp
  3. Update MaterialApp as below
MaterialApp(
              localizationsDelegates: AppLocalizations.localizationsDelegates,
              supportedLocales: AppLocalizations.supportedLocales,
      ),
  1. 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

Upvotes: -3

Related Questions