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

This guide assumes that you are using the flutter_localizations package. If you are not using it, you can skip steps 1-3.

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

To use this addon for testing, you can enable the LocalizationMode in your stories:

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