Localization Addon

The Localization Addon 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.

English locale	Arabic locale

Setup#

Here's how to configure it:

Step 1:#

Define Locales The first step in setting up the Localization Addon is to specify the Locale you want to support. In our case, we have chosen to use 'en-US' (English - United States).

const Locale('en', 'US'),

If your application supports more locales, you can add more Locale objects to the list.

Step 2:#

Next, you will need to define the LocalizationDelegates that are available. These delegates are used to fetch locale-specific strings and other values.

localizationsDelegates: [
    DefaultWidgetsLocalizations.delegate,
    DefaultMaterialLocalizations.delegate,
],

In this example, we have used two localization delegates provided by Flutter - DefaultWidgetsLocalizations.delegate and DefaultMaterialLocalizations.delegate.

Step 3:#

The final step is to construct the Localization Addon using the LocalizationAddon class. This class takes in the locales and localizationsDelegates you specified earlier.

LocalizationAddon(
    locales: [
        const Locale('en', 'US'),
    ],
    localizationsDelegates: [
        DefaultWidgetsLocalizations.delegate,
        DefaultMaterialLocalizations.delegate,
    ],
    initialLocale: const Locale('en', 'US')
),

Optional: the initialLocale is optional is always read the first value of locales if it is not defined.

This setup lets you preview widgets as they appear with the 'en-US' locale. The Localization Addon is an excellent tool for ensuring that your application provides an appropriate user experience across various locales.