Locale Addon

The LocaleAddon in Widgetbook lets developers preview how widgets behave under different localization settings. This becomes essential when developing applications for a global audience, accommodating differences in language, text direction, and regional conventions.

Usage

You need to export the supportedLocales and localizationsDelegates from your app, so that you can use them in Widgetbook. You can do so as follows:

1. Change the l10n.yaml file by setting the synthetic-package option to false:

   l10n.yaml

   arb-dir: lib/l10n
   template-arb-file: app_en.arb
   output-localization-file: app_localizations.dart
   synthetic-package: false
   

2. Update your .gitignore file to include the generated localization files:

   .gitignore

   # Generated localization files
   lib/l10n/*.dart
   

3. Generate the localization files by running the following command:

   flutter gen-l10n
   

4. Add the addon to your Widgetbook app:

   widgetbook/lib/widgetbook.config.dart

   import 'package:my_app/l10n/app_localizations.dart';  
   
   final config = Config(
     // ...
     addons: [
       LocaleAddon( 
         locales: AppLocalizations.supportedLocales,
         localizationsDelegates: AppLocalizations.localizationsDelegates,
       ),
     ],
   );
   

Order

The order of this addon doesn't matter, you can place it anywhere in the list of addons.

Mode

Each addon has a corresponding Mode to lock its value in scenarios. For this addon, use LocaleMode:

final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'German',
      modes: [
        LocaleMode(Locale('de')), 
      ]
    ),
  ],
)