Flutter i18n: Un código fuente, cada idioma, cada plataforma
Flutter utiliza archivos ARB (Application Resource Bundle) y el paquete intl para gestionar la localización en iOS, Android, web y escritorio desde un único código fuente. La herramienta gen-l10n genera código Dart con tipos seguros a partir de sus plantillas ARB, proporcionando seguridad en tiempo de compilación y autocompletado en el IDE para cada clave de traducción.
Get started in 4 steps
Enable generation
Add the generate flag to your pubspec.yaml to enable localization code generation.
# pubspec.yaml
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: any
flutter:
generate: trueConfigure l10n.yaml
Create l10n.yaml in your project root to configure the localization generator.
# l10n.yaml arb-dir: lib/l10n template-arb-file: app_en.arb output-localization-file: app_localizations.dart
Create ARB template
Add your source language ARB file with translation keys and metadata.
{
"@@locale": "en",
"welcome": "Welcome to {appName}",
"@welcome": {
"placeholders": {
"appName": { "type": "String" }
}
},
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
"@itemCount": {
"placeholders": {
"count": { "type": "int" }
}
}
}Use in your app
Wrap your app with localization delegates and use AppLocalizations.of(context) in widgets.
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: AppLocalizations.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Text(l10n.welcome('Flutter'));
}
}Funcionalidades de localización en Flutter
La localización de Flutter en la práctica
Use AppLocalizations.of(context) para acceder a los métodos de traducción generados en sus widgets, con soporte completo para pluralización y formato de fechas.
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
class ProductPage extends StatelessWidget {
final int itemCount;
const ProductPage({required this.itemCount});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Column(
children: [
Text(l10n.welcome('My Store')),
Text(l10n.itemCount(itemCount)),
// Date formatting respects locale
Text(DateFormat.yMMMd(
Localizations.localeOf(context).toString()
).format(DateTime.now())),
],
);
}
}Guías relacionadas
Android Localization
Compare la localización de Flutter con los patrones nativos de strings.xml y calificadores de recursos de Android.
iOS Localization
Consulte cómo iOS gestiona la localización con String Catalogs y SwiftUI para una comparativa específica de cada plataforma.
Comparativas de TMS
Compare plataformas de gestión de traducciones para encontrar la mejor opción para su proyecto Flutter.
Explore otras guías sobre marcos de trabajo
Simplifique la Localización de Flutter Hoy
Gestione sus traducciones ARB con flujos de trabajo impulsados por IA, sincronización CLI con su proyecto Flutter y entrega por CDN en menos de 50 ms.