Loading...
Loading...
Complete guide for internationalizing Flutter apps using gen-l10n and intl packages. Use when Claude needs to add localization support to Flutter applications, translate UI text, format numbers/dates for different locales, or configure multi-language support for Material/Cupertino apps.
npx skill4agent add madteacher/mad-agents-skills flutter-internationalizationIntl.message()pubspec.yamldependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: anyflutter pub add flutter_localizations --sdk=flutter
flutter pub add intl:anypubspec.yamlflutter:
generate: truel10n.yamlarb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dartlib/l10n/lib/l10n/app_en.arb{
"helloWorld": "Hello World!",
"@helloWorld": {
"description": "Greeting message"
}
}lib/l10n/app_es.arb{
"helloWorld": "¡Hola Mundo!"
}flutter gen-l10nflutter runimport 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'l10n/app_localizations.dart';
MaterialApp(
localizationsDelegates: [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
Locale('en'),
Locale('es'),
],
home: MyHomePage(),
)Text(AppLocalizations.of(context)!.helloWorld){
"welcome": "Welcome to our app",
"@welcome": {
"description": "Welcome message"
}
}{
"greeting": "Hello {userName}!",
"@greeting": {
"description": "Personalized greeting",
"placeholders": {
"userName": {
"type": "String",
"example": "Alice"
}
}
}
}Text(AppLocalizations.of(context)!.greeting('Alice')){
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
"@itemCount": {
"placeholders": {
"count": {
"type": "int"
}
}
}
}Text(AppLocalizations.of(context)!.itemCount(5)){
"pronoun": "{gender, select, male{he} female{she} other{they}}",
"@pronoun": {
"placeholders": {
"gender": {
"type": "String"
}
}
}
}Text(AppLocalizations.of(context)!.pronoun('male')){
"price": "Price: {value}",
"@price": {
"placeholders": {
"value": {
"type": "int",
"format": "simpleCurrency"
}
}
}
}compactcurrencysimpleCurrencydecimalPattern{
"eventDate": "Event on {date}",
"@eventDate": {
"placeholders": {
"date": {
"type": "DateTime",
"format": "yMMMd"
}
}
}
}yMdyMMMdyMMMMdHmLocalizations.override(
context: context,
locale: const Locale('es'),
child: CalendarDatePicker(...),
)supportedLocales: [
Locale.fromSubtags(languageCode: 'zh'),
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'),
Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'),
]MaterialApp(
localeResolutionCallback: (locale, supportedLocales) {
// Always accept user's locale
return locale;
},
)Locale myLocale = Localizations.localeOf(context);class DemoLocalizations {
DemoLocalizations(this.localeName);
static Future<DemoLocalizations> load(Locale locale) {
final String name = Intl.canonicalizedLocale(locale.toString());
return initializeMessages(name).then((_) => DemoLocalizations(name));
}
static DemoLocalizations of(BuildContext context) {
return Localizations.of<DemoLocalizations>(context, DemoLocalizations)!;
}
String get title {
return Intl.message(
'Hello World',
name: 'title',
desc: 'Title',
locale: localeName,
);
}
}class DemoLocalizationsDelegate extends LocalizationsDelegate<DemoLocalizations> {
const DemoLocalizationsDelegate();
bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
Future<DemoLocalizations> load(Locale locale) => DemoLocalizations.load(locale);
bool shouldReload(DemoLocalizationsDelegate old) => false;
}dart run intl_translation:extract_to_arb --output-dir=lib/l10n lib/main.dart
dart run intl_translation:generate_from_arb --output-dir=lib/l10n lib/main.dart lib/l10n/intl_*.arbclass DemoLocalizations {
DemoLocalizations(this.locale);
final Locale locale;
static DemoLocalizations of(BuildContext context) {
return Localizations.of<DemoLocalizations>(context, DemoLocalizations)!;
}
static const _localizedValues = <String, Map<String, String>>{
'en': {'title': 'Hello World'},
'es': {'title': 'Hola Mundo'},
};
String get title {
return _localizedValues[locale.languageCode]!['title']!;
}
}l10n.yaml