Guides Flutter i18n/l10n using ARB files, flutter_localizations, and BuildContext extensions. Useful for adding translations, setting up locales, or handling RTL layout.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vgv-ai-flutter-plugin:internationalizationWhen to use
Use when adding, modifying, or reviewing ARB translations, locale setup, BuildContext l10n extensions, or RTL/directional layout support.
sonnetThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Internationalization (i18n) and localization (l10n) best practices for Flutter applications using Flutter's built-in localization system with ARB files as the single source of truth.
Internationalization (i18n) and localization (l10n) best practices for Flutter applications using Flutter's built-in localization system with ARB files as the single source of truth.
Apply these standards to ALL internationalization work:
flutter_localizations + intl, never third-party i18n librariesBuildContext extension for cleaner l10n access — use context.l10n instead of AppLocalizations.of(context)AppLocalizationsEdgeInsetsDirectional (start/end) instead of EdgeInsets (left/right) — ensures correct layout in RTL languages| Term | Definition |
|---|---|
| Locale | Set of properties defining user region, language, and preferences (currency, time, numbers) |
| Localization (l10n) | Process of adapting software for a specific language by translating text and adding regional layouts |
| Internationalization (i18n) | Process of designing software so it can be adapted to different languages without engineering changes |
Add flutter_localizations and intl as dependencies, enable generate: true in pubspec.yaml, configure l10n.yaml, create ARB files in lib/l10n/arb/, run flutter gen-l10n, and wire up MaterialApp with localizationsDelegates and supportedLocales. ARB files support simple strings, placeholders, and ICU plural syntax.
See references/setup.md for the full step-by-step setup pipeline and ARB file format examples.
Create an extension for ergonomic l10n access throughout the codebase:
extension AppLocalizationsX on BuildContext {
AppLocalizations get l10n => AppLocalizations.of(this);
}
Usage:
// Preferred
Text(context.l10n.helloWorld);
// Avoid
Text(AppLocalizations.of(context).helloWorld);
Shared widgets that live in separate packages should not depend on AppLocalizations directly. Instead, pass localized strings as constructor parameters:
// Shared widget — no l10n dependency
class ConfirmDialog extends StatelessWidget {
const ConfirmDialog({
required this.title,
required this.message,
required this.confirmLabel,
required this.cancelLabel,
super.key,
});
final String title;
final String message;
final String confirmLabel;
final String cancelLabel;
@override
Widget build(BuildContext context) {
return AlertDialog(
title: Text(title),
content: Text(message),
actions: [
TextButton(onPressed: () => Navigator.pop(context), child: Text(cancelLabel)),
FilledButton(onPressed: () => Navigator.pop(context, true), child: Text(confirmLabel)),
],
);
}
}
// App-level usage — passes localized strings
showDialog<bool>(
context: context,
builder: (_) => ConfirmDialog(
title: context.l10n.deleteTitle,
message: context.l10n.deleteMessage,
confirmLabel: context.l10n.confirm,
cancelLabel: context.l10n.cancel,
),
);
Use EdgeInsetsDirectional (start/end) instead of EdgeInsets (left/right) for all padding and margins. Use directional widget variants (PositionedDirectional, AlignDirectional, BorderDirectional) for RTL-aware layouts. Icons mirror automatically in RTL; images require matchTextDirection: true.
See references/directionality.md for the full directionality guide including visual vs directional widgets, icon/image mirroring rules, and Material Design bidirectionality standards.
Store backend content with per-locale translations and require clients to transmit the user's locale. For error messages, map HTTP status codes or custom backend error constants to l10n keys on the frontend.
See references/backend.md for multi-language content storage patterns and error message localization approaches.
app_<locale>.arb in lib/l10n/arb/ (e.g., app_fr.arb)flutter gen-l10nAppLocalizations.supportedLocalesapp_en.arb)@key metadata with description and placeholders if neededflutter gen-l10ncontext.l10n.newKey"type": "int"context.l10n.itemCount(items.length)| Package | Purpose |
|---|---|
flutter_localizations | Flutter's built-in localization support |
intl | Internationalization utilities |
| Command | Purpose |
|---|---|
flutter gen-l10n | Generate localization classes from ARB files |
| File | Purpose |
|---|---|
l10n.yaml | Localization configuration (ARB dir, output, etc.) |
app_en.arb | Template ARB file (source of truth) |
app_<locale>.arb | Translated ARB file for each locale |
npx claudepluginhub verygoodopensource/very-good-claude-code-marketplace --plugin vgv-ai-flutter-pluginGuides iOS localization with Xcode String Catalogs for translations, pluralization, RTL layouts, and SwiftUI LocalizedStringKey patterns.
Guides internationalization and localization: detecting hardcoded strings, managing translation files, implementing RTL support, and using i18n libraries like react-i18next, next-intl, and gettext.
Provides CDSS development patterns for drug interaction checking, dose validation, clinical scoring (NEWS2, qSOFA), and alert classification integrated into EMR workflows.