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.
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:
Change the l10n.yaml file by setting the synthetic-package option to false:
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
synthetic-package: false // [!code highlight]Update your .gitignore file to include the generated localization files:
# Generated localization files
lib/l10n/*.dartGenerate the localization files by running the following command:
flutter gen-l10nAdd the addon to your Widgetbook app:
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,
),
],
);
}
}The order of this addon doesn't matter, you can place it anywhere in the list of addons.
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,
),
],
);
}
}