
Täydellinen opas Flutter:in lokalisointiin
ARB-tiedostoista RTL-tukeen: lokalisoi Flutter-sovelluksesi easy_localization:illa, käsittele kaikkien kielten monikkomuodot ja automatisoi käännökset tekoälyllä.
Asenna easy_localization
Lisää easy_localization-paketti pubspec.yaml-tiedostoosi. Se on suosituin Flutter:in i18n-paketti ja tukee ARB- ja JSON-tiedostoja, monikkomuotoja sekä context-laajennuksia. Lisää SDK:sta myös flutter_localizations päivämäärien, lukujen ja tekstin suunnan kieliversiokohtaiseen muotoiluun.
dependencies:
easy_localization: ^3.0.7
flutter_localizations:
sdk: flutterLuo ARB-käännöstiedostot
Application Resource Bundle (ARB) -tiedostot ovat Flutter:in vakiomuotoinen lokalisointimuoto. Kukin tiedosto sisältää avain-arvopareja ja valinnaisia metatietoja, jotka kuvaavat kääntäjille paikkamerkit, monikkosäännöt ja asiayhteyden. Luo yksi tiedosto kieliversiota kohden assets/translations-hakemistoon.
{
"@@locale": "en",
"appTitle": "My App",
"@appTitle": {
"description": "The title of the application"
},
"greeting": "Hello, {name}!",
"@greeting": {
"description": "Greeting with user name",
"placeholders": {
"name": {
"type": "String",
"example": "Alice"
}
}
},
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}",
"@itemCount": {
"description": "Number of items in the cart",
"placeholders": {
"count": {
"type": "num",
"format": "compact"
}
}
}
}Määritä sovellus
Ympäröi sovelluksesi EasyLocalization-pienoisohjelmalla. Se hallitsee kieliversion tilaa, lataa käännökset resurssitiedostoistasi ja tarjoaa MaterialAppin tarvitsemat kieliversiodelegaatit. Kolme pakollista delegaattiominaisuutta ovat localizationsDelegates, supportedLocales ja locale, ja ne kaikki ovat saatavilla context-laajennuksilla.
import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
runApp(
EasyLocalization(
supportedLocales: [
Locale('en'),
Locale('ar'),
Locale('ja'),
Locale('de'),
],
path: 'assets/translations', // Path to your ARB/JSON files
fallbackLocale: Locale('en'),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
home: HomePage(),
);
}
}Käännä pienoisohjelmat
Hae käännetty teksti missä tahansa pienoisohjelmassa käyttämällä merkkijonoavainten .tr()-laajennusmetodia. Käytä monikkomuotoihin .plural()-metodia ja määräarvoa. easy_localization tarjoaa sekä merkkijonolaajennussyntaksin ('key'.tr()) että context-metodisyntaksin (context.tr('key')).
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('appTitle'.tr()), // Simple key
),
body: Column(
children: [
// String with variable interpolation
Text('greeting'.tr(args: ['Alice'])),
// Named arguments
Text('greeting'.tr(namedArgs: {'name': 'Alice'})),
// Plural form
Text('itemCount'.plural(3)),
],
),
);
}
}Käsittele monikkomuodot ja muuttujat
Flutter käyttää monikkomuotoihin ICU MessageFormat:ia, samaa standardia kuin iOS, Android ja verkko. Määritä monikkomuodot ARB-tiedostoissa {count, plural, ...}-syntaksilla. Kukin kieli tarvitsee omat CLDR-monikkosääntöihin perustuvat muotonsa. Arabiassa on kuusi muotoa, venäjässä neljä ja japanissa yksi.
// English: 3 useful forms (=0, =1, other)
"itemCount": "{count, plural, =0{No items} =1{1 item} other{{count} items}}"
// Arabic: 6 forms (=0, =1, =2, few, many, other)
"itemCount": "{count, plural, =0{لا عناصر} =1{عنصر واحد} =2{عنصران} few{{count} عناصر} many{{count} عنصرًا} other{{count} عنصر}}"
// Japanese: 1 form (other)
"itemCount": "{count, plural, other{{count}個のアイテム}}"
// German: 2 forms (=1, other)
"itemCount": "{count, plural, =1{1 Artikel} other{{count} Artikel}}"
// Russian: 3 forms (one, few, many)
"itemCount": "{count, plural, =0{Нет товаров} one{{count} товар} few{{count} товара} many{{count} товаров} other{{count} товаров}}"// Simple variable
"welcome": "Welcome, {name}!"
// Multiple variables
"orderStatus": "Order #{orderId} — {status}"
// Variable in plural context
"unreadMessages": "{count, plural, =0{No unread messages} =1{1 unread message from {sender}} other{{count} unread messages}}"
// In widgets:
Text('welcome'.tr(namedArgs: {'name': userName}));
Text('orderStatus'.tr(namedArgs: {'orderId': '1234', 'status': 'Shipped'}));
Text('unreadMessages'.plural(count, namedArgs: {'sender': senderName}));Tue RTL-kieliä
Flutter peilaa koko asettelun automaattisesti, kun kieliversio kirjoitetaan oikealta vasemmalle (arabia, heprea, persia, urdu). Koodisi on kuitenkin käytettävä suunnan huomioivia pienoisohjelmia ja ominaisuuksia, jotta peilaus toimii oikein. Korvaa kovakoodatut left/right-arvot start/end-vastineilla.
import 'package:flutter/material.dart';
class AdaptiveLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
final isRtl = Directionality.of(context) == TextDirection.rtl;
return Scaffold(
body: Row(
children: [
// Use start/end instead of left/right
Expanded(
child: Padding(
padding: EdgeInsetsDirectional.only(
start: 16.0, // Leading edge (left in LTR, right in RTL)
end: 8.0, // Trailing edge
),
child: Text('content'.tr()),
),
),
// Flip icons for RTL
Icon(
isRtl ? Icons.arrow_back : Icons.arrow_forward,
),
],
),
);
}
}// Use Directional widgets for RTL-aware layouts
EdgeInsetsDirectional.only(start: 16, end: 8) // Not EdgeInsets.only(left: 16, right: 8)
AlignmentDirectional.centerStart // Not Alignment.centerLeft
BorderRadiusDirectional.only(topStart: Radius.circular(8))
// Automatically mirrors when locale changes to Arabic, Hebrew, etc.
// No conditional logic needed — Flutter handles text direction from localeÄlykkäät varakieliketjut
Kun pt-BR-käännös puuttuu, Flutter siirtyy oletusarvoisesti suoraan englantiin ja ohittaa täysin käyttökelpoiset pt-PT-käännökset. locale_chain-paketti korjaa tämän määritettävillä varakieliketjuilla. Yksi rivi käyttöönottoon, ei siirtoa — nykyiset .tr()-kutsusi toimivat sellaisinaan.
import 'package:locale_chain/locale_chain.dart';
import 'package:locale_chain/easy_localization.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
LocaleChain.configure(); // Enable smart fallback chains
runApp(
EasyLocalization(
supportedLocales: [
Locale('en'),
Locale('pt', 'BR'),
Locale('pt', 'PT'),
Locale('es'),
Locale('es', 'MX'),
],
path: 'assets/translations',
assetLoader: LocaleChainAssetLoader( // Swap in the chain loader
baseLoader: RootBundleAssetLoader(),
),
fallbackLocale: Locale('en'),
child: MyApp(),
),
);
}
// Result: pt-BR user sees pt-PT translations when pt-BR keys are missing,
// instead of falling back directly to English.// Override specific chains while keeping built-in defaults
LocaleChain.configure(
fallbacks: {
'pt-BR': ['pt-PT', 'pt'], // pt-BR → pt-PT → pt → en
'es-MX': ['es-419', 'es'], // es-MX → es-419 → es → en
'fr-CA': ['fr'], // fr-CA → fr → en
},
);
// Or replace all defaults with your own chains
LocaleChain.configure(
fallbacks: {
'zh-Hant-HK': ['zh-Hant-TW', 'zh-Hans'],
'pt-BR': ['pt-PT', 'pt'],
},
mergeDefaults: false, // Only your chains, no built-in defaults
);Automatisoi käännökset
Kun lokalisointi on otettu käyttöön, käännä ARB-tiedostosi tekoälyllä. Pyydä IDE-ympäristössäsi tekoälyavustajaasi kääntämään ARB-lähdetiedosto tai käytä i18n Agent:in CLI:tä CI/CD-putkessasi. ARB-metatiedot (paikkamerkit, kuvaukset) antavat asiayhteyttä ja parantavat käännösten laatua.
# In your IDE, ask your AI assistant:
> Translate assets/translations/en.arb to Arabic, Japanese, and German
✓ ar.arb created (1.4s)
✓ ja.arb created (1.2s)
✓ de.arb created (1.1s)
# Or use the CLI in CI/CD:
npx i18n-agent translate assets/translations/en.arb --lang ar,ja,deAutomatisoi käännöslaatu
Tavalliset sudenkuopat
Käännöstiedostoja ei löydy suorituksen aikana
Virheellinen ARB-tiedoston syntaksi
Käännösmuutokset eivät näy kuumalatauksella
Kovakoodatut vasen/oikea-arvot rikkovat RTL:n
Suositeltu tiedostorakenne
my_flutter_app/
├── assets/
│ └── translations/
│ ├── en.arb # Source language (English)
│ ├── ar.arb # Arabic (with 6 plural forms)
│ ├── de.arb # German
│ ├── ja.arb # Japanese
│ ├── pt-BR.arb # Brazilian Portuguese
│ └── pt-PT.arb # European Portuguese
├── lib/
│ ├── main.dart # App entry with EasyLocalization
│ ├── app.dart # MaterialApp with locale delegates
│ └── widgets/
│ └── language_switcher.dart
├── pubspec.yaml # Dependencies
└── analysis_options.yamlKokeile i18n Agent:ia nyt
Pudota käännöstiedostosi tähän
JSON, YAML, PO, XML, CSV, Markdown, Properties
tai valitse napsauttamalla
Kohdekielet
Varakieliketju locale_chain:illa
Kun alueellisesta kieliversiosta, kuten pt-BR:stä, puuttuu käännösavain, Flutter siirtyy suoraan mallin kieleen eikä tarkista ensin pääkieliversiota pt.
flutter pub add locale_chainimport 'package:locale_chain/locale_chain.dart';
LocaleChain.configure(fallbacks: {
'pt-BR': ['pt', 'en'],
'zh-Hant-HK': ['zh-Hant', 'zh', 'en'],
});
LocaleChainAssetLoader(baseLoader: RootBundleAssetLoader());Katso varakielioppaastamme kaikki tuetut ohjelmistokehykset ja 75 sisäänrakennettua ketjua. Learn more →