npx skills add ...
npx skills add flutter/skills --skill flutter-setup-localization
npx skills add flutter/skills --skill flutter-setup-localization
Add `flutter_localizations` and `intl` dependencies, enable "generate true" in `pubspec.yaml`, and create an `l10n.yaml` configuration file. Use when initializing localization support for a new Flutter project.
The same skill content is published under more than one repo. The install counts are split across them; any of these commands works.
Flutter handles internationalization (i18n) and localization (l10n) via the flutter_localizations and intl packages. The standard approach uses App Resource Bundle (.arb) files to define localized strings, which are then compiled into a generated AppLocalizations class for type-safe access within the widget tree.
Copy and track this checklist when initializing internationalization in a Flutter project:
pubspec.yaml.generate flag.l10n.yaml configuration file.MaterialApp or CupertinoApp.Add the required localization packages to the project. Execute the following commands in the terminal:
Verify your pubspec.yaml includes the following under dependencies:
Open pubspec.yaml and enable the generate flag within the flutter section to automate localization tasks:
Create a new file named l10n.yaml in the root directory of the Flutter project. Define the input directory, template file, and output file:
Import the generated localizations and the flutter_localizations library in your main.dart. Inject the delegates and supported locales into your MaterialApp or CupertinoApp.
Follow this workflow when adding or modifying localized content.
lib/l10n/app_en.arb). Include a description for context..arb files and update the values.Create corresponding files for other locales (e.g., app_es.arb):
Run the following command to trigger code generation:
Feedback Loop: Run validator -> review terminal output for ARB syntax errors -> fix missing commas or mismatched placeholders -> re-run flutter pub get.
Access the localized strings in your widget tree using AppLocalizations.of(context). Ensure the widget calling this is a descendant of MaterialApp.
Use placeholders for dynamic data, plurals, and conditional selects.
Define parameters within curly braces and specify their type in the metadata object.
Use the plural syntax to handle quantity-based string variations. The other case is mandatory.
Use the select syntax for conditional strings, such as gendered text.
l10n.yamlflutter:
generate: truearb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
synthetic-package: trueimport 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart'; // Adjust path if synthetic-package is false
// ... inside build method
return MaterialApp(
localizationsDelegates: const [
AppLocalizations.delegate,
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: const [
Locale('en'), // English
Locale('es'), // Spanish
],
home: const MyHomePage(),
);{
"helloWorld": "Hello World!",
"@helloWorld": {
"description": "The conventional newborn programmer greeting"
}
}{
"helloWorld": "¡Hola Mundo!"
}flutter pub getText(AppLocalizations.of(context)!.helloWorld)"hello": "Hello {userName}",
"@hello": {
"description": "A message with a single parameter",
"placeholders": {
"userName": {
"type": "String",
"example": "Bob"
}
}
}"nWombats": "{count, plural, =0{no wombats} =1{1 wombat} other{{count} wombats}}",
"@nWombats": {
"description": "A plural message",
"placeholders": {
"count": {
"type": "num",
"format": "compact"
}
}
}"pronoun": "{gender, select, male{he} female{she} other{they}}",
"@pronoun": {
"description": "A gendered message",
"placeholders": {
"gender": {
"type": "String"
}
}
}arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
synthetic-package: true
use-escaping: trueimport 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class GreetingWidget extends StatelessWidget {
final String userName;
final int notificationCount;
const GreetingWidget({
super.key,
required this.userName,
required this.notificationCount,
});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Column(
children: [
Text(l10n.hello(userName)),
Text(l10n.nWombats(notificationCount)),
],
);
}
}