Localization Addon

The LocalizationAddon 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/main.dart

   import 'package:my_app/l10n/app_localizations.dart';  
   import 'package:widgetbook/widgetbook.dart';
   
   class WidgetbookApp extends StatelessWidget {
     const WidgetbookApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return Widgetbook(
         // ...
         addons: [
           LocalizationAddon( 
             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.

Multi-snapshot Support

The LocalizationAddon is supported in the Multi Snapshot Reviews via the LocalizationAddonConfig. Here's how to configure it:

import 'package:my_app/l10n/app_localizations.dart';  
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';

@App(
  cloudAddonsConfigs: {
    'German': [
      LocalizationAddonConfig('de'), 
    ],
    'English': [
      LocalizationAddonConfig('en'), 
    ],
  },
)
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      // ...
      addons: [
        LocalizationAddon( 
          locales: AppLocalizations.supportedLocales, 
          localizationsDelegates: AppLocalizations.localizationsDelegates, 
        ), 
      ],
    );
  }
}