Skip to main content

Celovit vodnik po lokalizaciji Flutterja

Od datotek ARB do podpore za RTL: lokalizirajte svojo aplikacijo Flutter z easy_localization, obravnavajte množinske oblike za vse jezike in avtomatizirajte prevode z umetno inteligenco.

1

Namestite easy_localization

Dodajte paket easy_localization v datoteko pubspec.yaml. To je najbolj priljubljen paket Flutter za i18n s podporo za datoteke ARB/JSON, množinske oblike in razširitve konteksta. Iz kompleta SDK dodajte tudi flutter_localizations za oblikovanje datumov in števil glede na področne nastavitve ter ustrezno smer besedila.

easy_localization ponuja razširitve konteksta, kot sta context.tr() in 'key'.tr(), za jedrnat dostop do prevodov. Skrbi za nalaganje in shranjevanje področnih nastavitev ter sprotno ponovno nalaganje prevodnih datotek med razvojem.
pubspec.yaml
dependencies:
  easy_localization: ^3.0.7
  flutter_localizations:
    sdk: flutter
2

Ustvarite prevodne datoteke ARB

Datoteke Application Resource Bundle (ARB) so standardna oblika zapisa za lokalizacijo Flutterja. Vsaka datoteka vsebuje pare ključ–vrednost in neobvezne metapodatke, ki opisujejo označbe mest, množinska pravila ter kontekst za prevajalce. V imeniku assets/translations ustvarite po eno datoteko za vsako področno nastavitev.

assets/translations/en.arb
{
  "@@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"
      }
    }
  }
}
Ključi s predpono @ (kot je @greeting) so metapodatki — opisujejo niz nad njimi. Vključite vrste označb mest in primere, da bodo lahko prevajalci pripravili natančne prevode. Ti metapodatkovni ključi se med izvajanjem odstranijo in ne povzročajo nobene dodatne obremenitve.
3

Konfigurirajte aplikacijo

Aplikacijo ovijte z gradnikom EasyLocalization. Ta upravlja stanje področne nastavitve, nalaga prevode iz datotek virov in zagotavlja delegate področnih nastavitev, ki jih potrebuje MaterialApp. Tri obvezne lastnosti delegatov so localizationsDelegates, supportedLocales in locale — vse so na voljo prek razširitev konteksta.

lib/main.dart
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(),
    );
  }
}
"Easy Localization not initialized" — ta napaka pomeni, da ste pred runApp() pozabili poklicati EasyLocalization.ensureInitialized(). Klic je treba počakati z await po WidgetsFlutterBinding.ensureInitialized() in pred runApp().
4

Prevedite gradnike

Za pridobivanje prevedenega besedila v katerem koli gradniku uporabite razširitveno metodo .tr() na ključih nizov. Za množinske oblike uporabite .plural() z vrednostjo števila. easy_localization ponuja tako skladnjo razširitve niza ('key'.tr()) kot skladnjo metode konteksta (context.tr('key')).

lib/widgets/home_page.dart
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)),
        ],
      ),
    );
  }
}
Če se namesto prevedenega besedila vrnejo neobdelani ključi, preverite: 1) gradnik EasyLocalization mora ovijati MaterialApp, ne obratno; 2) Vaše prevodne datoteke morajo biti navedene v razdelku assets datoteke pubspec.yaml; 3) pot do datotek v EasyLocalization se mora ujemati z dejansko strukturo imenikov.
5

Obravnavajte množinske oblike in spremenljivke

Flutter za množinske oblike uporablja ICU MessageFormat — isti standard kot iOS, Android in splet. Množinske oblike v datotekah ARB določite s skladnjo {count, plural, ...}. Vsak jezik potrebuje lasten nabor oblik na podlagi množinskih pravil CLDR. Arabščina ima 6 oblik, ruščina 4, japonščina pa 1.

Plural forms by language
// 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} товаров}}"
Variables and named arguments
// 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}));
Logike za ednino in množino nikoli ne zapisujte neposredno z if (count == 1). Jeziki, kot je francoščina, število 0 obravnavajo kot ednino. Ruščina, poljščina in arabščina imajo množinske oblike, ki jih angleščina sploh nima. Vedno uporabite množinsko skladnjo ICU in izbiro pravilne oblike prepustite ogrodju.
6

Podprite jezike RTL

Flutter samodejno prezrcali celotno postavitev, kadar je področno nastavljen jezik pisan od desne proti levi (arabščina, hebrejščina, perzijščina ali urdujščina). Vendar mora Vaša koda uporabljati gradnike in lastnosti, ki upoštevajo smer, da prezrcaljenje deluje pravilno. Neposredno določeni levi/desni položaj zamenjajte z ustreznikoma začetek/konec.

lib/widgets/adaptive_layout.dart
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,
          ),
        ],
      ),
    );
  }
}
RTL-aware widget patterns
// 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
RTL preizkusite tako, da področno nastavitev aplikacije začasno nastavite na arabščino (Locale('ar')). Flutter prezrcali celoten uporabniški vmesnik — navigacijski predali se odpirajo z desne, puščice za pomik nazaj se obrnejo, besedilo pa se poravna desno. Za pravilno prezrcaljenje postavitev po meri uporabite EdgeInsetsDirectional, AlignmentDirectional in BorderRadiusDirectional.
7

Pametne verige nadomestnih področnih nastavitev

Ko prevod pt-BR manjka, Flutter privzeto preklopi neposredno na angleščino — pri tem pa preskoči povsem ustrezne prevode pt-PT. Paket locale_chain to odpravi z nastavljivimi verigami nadomestnih področnih nastavitev. Potrebujete eno vrstico za nastavitev in nobene selitve — Vaši obstoječi klici .tr() preprosto delujejo.

lib/main.dart with LocaleChain
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.
Custom fallback configuration
// 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
);
locale_chain vključuje vgrajene nadomestne verige za portugalske, španske, francoske, nemške, italijanske, nizozemske, norveške in malajske področne različice. Uporabnik pt-BR bo pred angleško vsebino videl vsebino pt-PT. Uporabnik es-MX bo pred privzeto področno nastavitvijo videl es-419 in nato es.
8

Avtomatizirajte prevode

Ko je nastavitev lokalizacije dokončana, prevedite datoteke ARB z umetno inteligenco. V svojem integriranem razvojnem okolju prosite pomočnika z umetno inteligenco, naj prevede izvorno datoteko ARB, ali pa v cevovodu CI/CD uporabite vmesnik ukazne vrstice i18n Agent. Metapodatki ARB (označbe mest in opisi) zagotavljajo kontekst, ki izboljša kakovost prevodov.

Terminal
# 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,de
Prevajajte postopoma — ko v izvorno datoteko ARB dodate nove ključe, prevedite samo razlike, namesto da bi znova ustvarili vse datoteke. Tako ohranite prevode, ki so jih pregledali ljudje, in nedotaknjene metapodatke ARB.

Avtomatizirajte zagotavljanje kakovosti prevodov

Z orodjem i18n-validate odkrijte manjkajoče ključe in poškodovane označbe mest, preden pridejo v izdajo. Uporabniški vmesnik preizkusite s psevdoprevodi z uporabo i18n-pseudo, še preden so pravi prevodi na voljo.

Pogoste pasti

Prevodnih datotek med izvajanjem ni mogoče najti

Datoteke ARB/JSON morajo biti navedene v razdelku assets datoteke pubspec.yaml. Če ta korak manjka, Flutter med izvajanjem ne more najti datotek, čeprav so na disku. Dodajte: assets: - assets/translations/

Neveljavna skladnja datoteke ARB

Datoteke ARB so strogi JSON — brez končnih vejic, enojnih narekovajev in komentarjev. Že ena skladenjska napaka neopazno prepreči nalaganje celotne datoteke. Pred odpravljanjem težav s prevodi preverite datoteke ARB s preverjevalnikom skladnje JSON.

Spremembe prevodov se po vročem ponovnem nalaganju ne prikažejo

easy_localization prevode predpomni v pomnilniku. Za dodajanje novih ključev ali spreminjanje obstoječih prevodov bo morda potreben celoten vroči ponovni zagon (ne vroče ponovno nalaganje), da bodo spremembe začele veljati. Med razvojem po urejanju prevodnih datotek uporabite vroči ponovni zagon (Shift+R).

Neposredno določena leva/desna stran pokvari RTL

Uporaba EdgeInsets.only(left: 16) namesto EdgeInsetsDirectional.only(start: 16) prepreči Flutterju, da bi prezrcalil postavitev za jezike RTL. V zbirki kode poiščite EdgeInsets, Alignment in BorderRadius brez pripone Directional.

Priporočena struktura datotek

Project Structure
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.yaml

Preizkusite i18n Agent zdaj

Spustite prevajalsko datoteko sem

JSON, YAML, PO, XML, CSV, Markdown, Properties

ali kliknite za izbiro

Ciljni jeziki

Registracija ni potrebnaTakojšnja ocena

Nadomestne področne nastavitve z locale_chain

Ko v regionalni področni nastavitvi, kot je pt-BR, manjka prevodni ključ, Flutter preklopi neposredno na jezik predloge, namesto da bi najprej preveril nadrejeno področno nastavitev pt.

Terminal
flutter pub add locale_chain
Configuration
import 'package:locale_chain/locale_chain.dart';

LocaleChain.configure(fallbacks: {
  'pt-BR': ['pt', 'en'],
  'zh-Hant-HK': ['zh-Hant', 'zh', 'en'],
});

LocaleChainAssetLoader(baseLoader: RootBundleAssetLoader());

V našem vodniku po nadomestnih področnih nastavitvah si oglejte celoten seznam podprtih ogrodij in 75 vgrajenih verig. Learn more →

Pogosta vprašanja