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

<Tabs
  values={[
    { label: "German", value: "de" },
    { label: "English", value: "en" },
  ]}
>
  <TabItem value="de">
    <iframe
      src="https://demo.widgetbook.io/#/?path=features/basket/basketscreen/default&device={name:None}&locale={name:de}&preview"
      width="100%"
      height="560px"
    />
  </TabItem>
  <TabItem value="en">
    <iframe
      src="https://demo.widgetbook.io/#/?path=features/basket/basketscreen/default&device={name:None}&locale={name:en}&preview"
      width="100%"
      height="560px"
    />
  </TabItem>
</Tabs>

## Usage

<Info>
  This guide assumes that you are using the
  [`flutter_localizations`](https://docs.flutter.dev/ui/accessibility-and-internationalization/internationalization#introduction-to-localizations-in-flutter)
  package. If you are not using it, you can skip steps 1-3.
</Info>

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`](https://docs.flutter.dev/ui/accessibility-and-internationalization/internationalization#configuring-the-l10n-yaml-file:~:text=won%27t%20be%20generated.-,synthetic%2Dpackage,-Determines%20whether%20the) option to `false`:

   ```yaml title='l10n.yaml'
   arb-dir: lib/l10n
   template-arb-file: app_en.arb
   output-localization-file: app_localizations.dart
   synthetic-package: false  // [!code highlight]
   ```

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

   ```gitignore title='.gitignore'
   # Generated localization files
   lib/l10n/*.dart
   ```

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

   ```bash
   flutter gen-l10n
   ```

1. Add the addon to your Widgetbook app:

   ```dart title=widgetbook/lib/main.dart
   import 'package:my_app/l10n/app_localizations.dart';  // [!code highlight]
   import 'package:widgetbook/widgetbook.dart';

   class WidgetbookApp extends StatelessWidget {
     const WidgetbookApp({super.key});

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

## 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](/cloud/snapshots/multi-snapshot) via the `LocalizationAddonConfig`. Here's how to configure it:

```dart title=widgetbook/lib/main.dart
import 'package:my_app/l10n/app_localizations.dart';  // [!code highlight]
import 'package:widgetbook/widgetbook.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart';

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

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