Mobiludvikling med Flutter · Lektion

ARB-filer og lokaliseringsworkflow med gen_l10n

Opsæt flutter_localizations- og gen_l10n-pipelinen for at generere typesikre oversættelser.

Lektion 1 af 413 trin

ARB-filer og lokaliseringsworkflow med gen_l10n er en gratis Mobiludvikling med Flutter-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Mobiludvikling med Flutter, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Trin 1: Hvorfor gen_l10n + afhængigheder

Hvis du hardcoder strenge som Text('Welcome'), bliver en app umulig at oversætte. Flutters officielle løsning er gen_l10n: du skriver oversættelser i ARB-filer (Application Resource Bundle, et JSON-format), og build-værktøjet genererer en typet Dart-klasse, så slåfejl bliver til compile-time-fejl.

Der kræves to dele i pubspec.yaml. SDK-pakken flutter_localizations leverer oversættelser til Material/Cupertino/Widgets, og flaget generate: true aktiverer gen_l10n-buildtrinnet.

intl trækkes ind, fordi genereret kode bruger den til flertalsformer og datoer.
Kør flutter pub get efter redigering.

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

flutter:
  generate: true

Trin 2: Konfiguration af l10n.yaml

Opret en l10n.yaml-fil i projektets rod. Den fortæller gen_l10n, hvor dine ARB-filer ligger, og hvad den genererede klasse skal hedde.

arb-dir — mappen, der indeholder .arb-filerne.
template-arb-file — kildelokaliteten, som definerer nøgler og metadata.
output-localization-file — navnet på den genererede Dart-fil.
output-class — navnet på den klasse, 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

Trin 3: Skabelon-ARB-filen

Skabelonlokaliteten (her app_en.arb) definerer hver nøgle. Hver nøgle knyttes til en oversat værdi. Nøgler, der starter med @, er metadata: de beskriver posten, men producerer ingen streng.

@@locale angiver, hvilken lokalitet denne fil gælder for.
@welcome kan indeholde en description, der hjælper oversættere.

Filnavnemønstret er app_<localeCode>.arb.

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

Trin 4: En oversat ARB-fil

For hvert ekstra sprog skal du tilføje en søsterfil med de samme nøgler, men med oversatte værdier. Metadata (@-nøglerne) er kun påkrævet i skabelonen; oversættelser kan udelade den.

Her leverer app_tr.arb tyrkiske strenge.
Manglende nøgler falder tilbage til skabelonlokaliteten, så hold skabelonen komplet.

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

Trin 5: Generér koden

Kodegenerering kører automatisk under flutter run eller flutter build, når generate: true er angivet. Du kan også gennemtvinge den med flutter gen-l10n.

Output placeres som standard i .dart_tool/flutter_gen/gen_l10n/.
Den genererede AppLocalizations-klasse eksponerer én getter pr. nøgle.
Tilføj den genererede sti til dit IDE's importforslag; commit ikke genererede filer.

Trin 6: Kobl til MaterialApp

Registrér de genererede delegates og understøttede lokaliteter på MaterialApp. AppLocalizations.localizationsDelegates samler din delegate samt Material/Widgets/Cupertino-delegaterne, og supportedLocales oplister det, du leverer.

Flutter vælger det bedste match mellem enhedens lokalitet og supportedLocales.
Hvis ingen matcher, bruges den første post 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(),
    );
  }
}

Trin 7: Læs en streng

Inde i en widget henter du den lokaliserede instans med AppLocalizations.of(context) og læser en getter. Kaldet er kun null, hvis delegaterne mangler, så den almindelige idiomatiske skrivemåde bruger !.

Hver nøgle fra ARB bliver til en stærkt typet getter.
Hvis du omdøber en nøgle i ARB, kan enhver forkert brug ikke kompileres.

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)),
    );
  }
}

Trin 8: Pladsholdere

Hvis du vil indsætte værdier, skal du erklære pladsholdere i skabelonens metadata. Værdien bruger syntaksen {name}, og gen_l10n omdanner getteren til en metode.

Hver pladsholder skal have en type (f.eks. String, int, DateTime).
Den genererede metodes signatur følger pladsholdernes rækkefølge.

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

Trin 9: Kald en pladsholdermetode

Fordi greeting tager et argument, er det genererede medlem en metode, ikke en getter. Du sender værdien med ved kaldet.

l10n.greeting('Ada') returnerer "Hello, Ada!".
Typer håndhæves: hvis du sender en int, hvor der forventes en String, kan koden ikke kompileres.

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

Trin 10: Flertalsformer med ICU

ARB understøtter ICU-meddelelsessyntaks til flertalsformer. En blok med {count, plural, ...} vælger den rigtige formulering for hvert sprog. Erklær pladsholderen som num (eller int).

=0, one og other er almindelige kategorier.
# erstattes af det formaterede tal.
Forskellige lokaliteter har forskellige flertalsregler — ICU håndterer dem automatisk.

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

Trin 11: En formatter i ren Dart

Den udvælgelseslogik, som ICU udfører, er blot regler for et tal. Her er et lille selvstændigt Dart-program, der efterligner engelsk flertalsudvælgelse — nyttigt til at forstå, hvad gen_l10n genererer under motorhjelmen.

Rigtige apps bruger den genererede metode; dette er kun for forståelsens skyld.

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));
  }
}

Hurtigt tjek

Du har kun tilføjet en ny nøgle logout i app_en.arb, men glemte den i app_tr.arb. En bruger med tyrkisk lokalitet åbner skærmen. Hvad sker der?

Besvar den i den interaktive lektion

Opsummering

Du har opbygget hele Flutters lokaliseringspipeline:

Tilføjede flutter_localizations + intl og angav generate: true.
Konfigurerede l10n.yaml (arb-dir, skabelon, outputklasse).
Skrev en ARB-skabelon samt oversættelser pr. lokalitet.
Lot gen_l10n oprette den typede AppLocalizations-klasse.
Registrerede localizationsDelegates og supportedLocales og læste derefter strenge via AppLocalizations.of(context)!.
Brugte pladsholdere til dynamiske værdier og ICU-flertalsformer til tekst, der afhænger af antal.

Gevinsten er, at oversættelser typekontrolleres, manglende skabelonnøgler opdages tidligt, og oversættere kan arbejde i et rent JSON-format.

Gratis at komme i gang

Lær Dart med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 22
Lektioner: 88

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “ARB-filer og lokaliseringsworkflow med gen_l10n” gratis?

Ja — alle 3 lektioner i læringssporet Mobiludvikling med Flutter, inklusive “ARB-filer og lokaliseringsworkflow med gen_l10n”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Mobiludvikling med Flutter-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “ARB-filer og lokaliseringsworkflow med gen_l10n”?

Opsæt flutter_localizations- og gen_l10n-pipelinen for at generere typesikre oversættelser. Du øver dig i Mobiludvikling med Flutter med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Mobiludvikling med Flutter?

Der kræves ingen tidligere erfaring. Mobiludvikling med Flutter på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “ARB-filer og lokaliseringsworkflow med gen_l10n”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Mobiludvikling med Flutter-lektion?

Ja. Alle Mobiludvikling med Flutter-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

ARB-filer og lokaliseringsworkflow med gen_l10n
Flertalsformer, køn og ICU-meddelelsesformatering
RTL-layouts og håndtering af retning
Semantics, skærmlæsere og tilgængelige widgets

← Tilbage til Mobiludvikling med Flutter