Mobilutvikling med Flutter · leksjon

ARB-filer og arbeidsflyt for gen_l10n-lokalisering

Sett opp flutter_localizations- og gen_l10n-pipelinen for å generere typede oversettelser.

Leksjon 1 av 413 trinn

ARB-filer og arbeidsflyt for gen_l10n-lokalisering er en gratis leksjon i Mobilutvikling med Flutter på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mobilutvikling med Flutter, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Trinn 1: Hvorfor gen_l10n + avhengigheter

Hardkodede strenger som Text('Welcome') gjør det umulig å oversette en app. Flutter sin offisielle løsning er gen_l10n: Du skriver oversettelser i ARB-filer (Application Resource Bundle, et JSON-format), og byggverktøyet genererer en typet Dart-klasse slik at skrivefeil blir kompileringstidsfeil.

To deler kreves i pubspec.yaml. SDK-pakken flutter_localizations leverer oversettelser for Material/Cupertino/Widgets, og flagget generate: true aktiverer gen_l10n-byggesteget.

intl tas inn fordi den genererte koden bruker den for flertallsformer og datoer.
Kjør flutter pub get etter redigering.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any

flutter:
  generate: true

Trinn 2: Konfigurere l10n.yaml

Opprett en l10n.yaml-fil i prosjektroten. Den forteller gen_l10n hvor ARB-filene ligger, og hva den genererte klassen skal hete.

arb-dir – mappen som inneholder .arb-filene.
template-arb-file – kildelokalet som definerer nøkler og metadata.
output-localization-file – navnet på den genererte Dart-filen.
output-class – klassenavnet du importerer i koden.

# l10n.yaml
arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart
output-class: AppLocalizations

Trinn 3: Mal-ARB-filen

Mållokalet (her app_en.arb) definerer alle nøklene. Hver nøkkel knyttes til en oversatt verdi. Nøkler som starter med @ er metadata: De beskriver oppføringen, men produserer ingen streng.

@@locale angir hvilket lokale filen gjelder.
@welcome kan inneholde en description som hjelper oversettere.

Filnavnmønsteret er app_<localeCode>.arb.

{
  "@@locale": "en",
  "welcome": "Welcome",
  "@welcome": {
    "description": "Greeting shown on the home screen"
  },
  "settings": "Settings"
}

Trinn 4: En oversatt ARB-fil

For hvert ekstra språk legger du til en søskenfil med de samme nøklene, men oversatte verdier. Metadata (nøklene med @) kreves bare i malen; oversettelsene kan utelate den.

Her inneholder app_tr.arb tyrkiske strenger.
Manglende nøkler faller tilbake til mållokalet, så sørg for at malen er komplett.

{
  "@@locale": "tr",
  "welcome": "Hoş geldiniz",
  "settings": "Ayarlar"
}

Trinn 5: Generere koden

Kodegenerering kjøres automatisk under flutter run eller flutter build når generate: true er angitt. Du kan også tvinge den med flutter gen-l10n.

Resultatet legges som standard i .dart_tool/flutter_gen/gen_l10n/.
Den genererte klassen AppLocalizations gir én getter per nøkkel.
Legg den genererte banen til i IDE-ens importforslag; ikke legg genererte filer inn i versjonskontroll.

Trinn 6: Koble til MaterialApp

Registrer de genererte delegatene og støttede lokalene på MaterialApp. AppLocalizations.localizationsDelegates samler din delegat sammen med Material/Widgets/Cupertino-delegatene, og supportedLocales viser hva appen støtter.

Flutter velger den beste matchen mellom enhetens lokale og supportedLocales.
Hvis ingen passer, brukes den første oppføringen i supportedLocales.

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: const HomeScreen(),
    );
  }
}

Trinn 7: Lese en streng

Inne i en widget henter du den lokaliserte instansen med AppLocalizations.of(context) og leser en getter. Kallet er null bare hvis delegatene mangler, så det vanlige uttrykket bruker !.

Hver nøkkel fra ARB blir en sterkt typet getter.
Hvis du gir en nøkkel nytt navn i ARB, vil all feil bruk føre til kompileringsfeil.

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    return Scaffold(
      appBar: AppBar(title: Text(l10n.settings)),
      body: Center(child: Text(l10n.welcome)),
    );
  }
}

Trinn 8: Plassholdere

For å sette inn verdier deklarerer du plassholdere i metadataene i malen. Verdien bruker syntaksen {name}, og gen_l10n gjør getter-en om til en metode.

Hver plassholder trenger en type (for eksempel String, int, DateTime).
Signaturen til den genererte metoden følger rekkefølgen på plassholderne.

{
  "@@locale": "en",
  "greeting": "Hello, {name}!",
  "@greeting": {
    "description": "Personalized greeting",
    "placeholders": {
      "name": { "type": "String" }
    }
  }
}

Trinn 9: Kalle en plassholdermetode

Fordi greeting tar et argument, blir det genererte medlemmet en metode, ikke en getter. Du sender verdien inn på kallstedet.

l10n.greeting('Ada') returnerer «Hei, Ada!».
Typer håndheves: Hvis du sender en int der det forventes en String, oppstår det en kompileringsfeil.

Widget buildGreeting(BuildContext context, String userName) {
  final l10n = AppLocalizations.of(context)!;
  return Text(l10n.greeting(userName));
}

Trinn 10: Flertallsformer med ICU

ARB støtter ICU-meldingssyntaks for flertallsformer. En blokk på formen {count, plural, ...} velger riktig formulering for hvert språk. Deklarer plassholderen som num (eller int).

=0, one og other er vanlige kategorier.
# erstattes med det formaterte tallet.
Ulike lokaliteter har ulike flertallsregler – ICU håndterer dem automatisk.

{
  "itemCount": "{count, plural, =0{No items} one{1 item} other{{count} items}}",
  "@itemCount": {
    "placeholders": {
      "count": { "type": "int" }
    }
  }
}

Trinn 11: En formatterer i ren Dart

Utvelgingslogikken som ICU utfører, er bare regler basert på et tall. Her er et lite, frittstående Dart-program som etterligner engelsk valg av flertallsform – nyttig for å forstå hva gen_l10n genererer under panseret.

Virkelige apper bruker den genererte metoden; dette er bare for å gi en intuitiv forståelse.

String itemCount(int count) {
  if (count == 0) return 'No items';
  if (count == 1) return '1 item';
  return '$count items';
}

void main() {
  for (final n in [0, 1, 5]) {
    print(itemCount(n));
  }
}

Kort kontroll

Du la til en ny nøkkel logout bare i app_en.arb, men glemte den i app_tr.arb. En bruker med tyrkisk lokale åpner skjermen. Hva skjer?

Besvar den i den interaktive leksjonen

Oppsummering

Du har bygget hele Flutter-pipelinen for lokalisering:

La til flutter_localizations + intl og angav generate: true.
Konfigurerte l10n.yaml (arb-dir, mal og resultatklasse).
Skrev en ARB-mal samt oversettelser for hvert lokale.
Lot gen_l10n opprette den typede klassen AppLocalizations.
Registrerte localizationsDelegates og supportedLocales, og leste deretter strenger via AppLocalizations.of(context)!.
Brukte plassholdere for dynamiske verdier og ICU-flertallsformer for tekster som avhenger av antall.

Gevinsten er at oversettelser typesjekkes, manglende nøkler i malen oppdages tidlig, og oversettere kan arbeide i et ryddig JSON-format.

Gratis å komme i gang

Lær deg Dart med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 22
Leksjoner: 88

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «ARB-filer og arbeidsflyt for gen_l10n-lokalisering» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Mobilutvikling med Flutter, inkludert «ARB-filer og arbeidsflyt for gen_l10n-lokalisering», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Mobilutvikling med Flutter inneholder totalt 4 leksjoner.

Hva lærer jeg i «ARB-filer og arbeidsflyt for gen_l10n-lokalisering»?

Sett opp flutter_localizations- og gen_l10n-pipelinen for å generere typede oversettelser. Du øver på Mobilutvikling med Flutter med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Mobilutvikling med Flutter?

Ingen tidligere erfaring er nødvendig. Mobilutvikling med Flutter på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «ARB-filer og arbeidsflyt for gen_l10n-lokalisering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Mobilutvikling med Flutter-leksjonen?

Ja. Alle Mobilutvikling med Flutter-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

ARB-filer og arbeidsflyt for gen_l10n-lokalisering
Flertall, kjønn og ICU-meldingsformatering
RTL-oppsett og håndtering av retning
Semantikk, skjermlesere og tilgjengelige widgets

← Tilbake til Mobilutvikling med Flutter