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

<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/widgetbook.config.dart
   import 'package:my_app/l10n/app_localizations.dart';  // [!code highlight]

   final config = Config(
     // ...
     addons: [
       LocaleAddon( // [!code highlight]
         AppLocalizations.supportedLocales,
         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](/addons/modes) to lock its value in scenarios. For this addon, use `LocaleMode`:

```dart
final $Default = _Story(
  scenarios: [
    _Scenario(
      name: 'German',
      modes: [
        LocaleMode(Locale('de')), // [!code highlight]
      ]
    ),
  ],
)
```