Mobilutveckling med Flutter · Lektion

ARB-filer och lokaliseringsarbetsflödet i gen_l10n

Konfigurera flutter_localizations- och gen_l10n-pipelinen för att generera typade översättningar.

Lektion 1 av 413 steg

ARB-filer och lokaliseringsarbetsflödet i gen_l10n är en gratis lektion i Mobilutveckling med Flutter på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Mobilutveckling med Flutter, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Steg 1: Varför gen_l10n + beroenden

Hårdkodade strängar som Text('Welcome') gör en app omöjlig att översätta. Flutters officiella lösning är gen_l10n: du skriver översättningar i ARB-filer (Application Resource Bundle, ett JSON-format), och byggverktyget genererar en typad Dart-klass så att skrivfel blir kompileringsfel.

Två delar krävs i pubspec.yaml. SDK-paketet flutter_localizations tillhandahåller översättningar för Material/Cupertino/Widgets, och flaggan generate: true aktiverar byggsteget gen_l10n.

intl inkluderas eftersom den genererade koden använder det för pluralformer och datum.
Kör flutter pub get efter redigering.

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

flutter:
  generate: true

Steg 2: Konfiguration av l10n.yaml

Skapa en fil med namnet l10n.yaml i projektets rot. Den anger för gen_l10n var dina ARB-filer finns och vad den genererade klassen ska heta.

arb-dir — mappen som innehåller .arb-filerna.
template-arb-file — källspråksfilen som definierar nycklar och metadata.
output-localization-file — namnet på den genererade Dart-filen.
output-class — klassnamnet som du importerar i koden.

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

Steg 3: Mallens ARB-fil

Mallspråket (här app_en.arb) definierar alla nycklar. Varje nyckel kopplas till ett översatt värde. Nycklar som börjar med @ är metadata: de beskriver posten men genererar ingen sträng.

@@locale anger vilket språk den här filen gäller.
@welcome kan innehålla en description som hjälper översättare.

Filnamnsmönstret är app_<localeCode>.arb.

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

Steg 4: En översatt ARB-fil

För varje ytterligare språk lägger du till en syskonfil med samma nycklar men översatta värden. Metadata (nycklarna med @) krävs bara i mallen; översättningar kan utelämna den.

Här innehåller app_tr.arb turkiska strängar.
Saknade nycklar faller tillbaka på mallspråket, så håll mallen komplett.

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

Steg 5: Generera koden

코드generering körs automatiskt under flutter run eller flutter build när generate: true är angivet. Du kan också tvinga fram den med flutter gen-l10n.

Resultatet hamnar som standard i .dart_tool/flutter_gen/gen_l10n/.
Den genererade klassen AppLocalizations exponerar en getter för varje nyckel.
Lägg till den genererade sökvägen bland IDE:ns importförslag; checka inte in genererade filer.

Steg 6: Koppla in i MaterialApp

Registrera de genererade delegaterna och språk som stöds på MaterialApp. AppLocalizations.localizationsDelegates samlar din delegat tillsammans med Material/Widgets/Cupertino-delegaterna, och supportedLocales listar de språk du levererar.

Flutter väljer den bästa matchningen mellan enhetens språk och supportedLocales.
Om ingen matchar används den första posten 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(),
    );
  }
}

Steg 7: Läs en sträng

Inuti en widget hämtar du den lokaliserade instansen med AppLocalizations.of(context) och läser en getter. Anropet är null endast om delegaterna saknas, så det vanliga idiomet använder !.

Varje nyckel från ARB blir en starkt typad getter.
Byt namn på en nyckel i ARB så misslyckas all felaktig användning vid kompilering.

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

Steg 8: Platshållare

För att infoga värden deklarerar du platshållare i mallens metadata. Värdet använder syntaxen {name}, och gen_l10n omvandlar gettern till en metod.

Varje platshållare behöver en type (till exempel String, int, DateTime).
Den genererade metodens signatur följer platshållarnas ordning.

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

Steg 9: Anropa en platshållarmetod

Eftersom greeting tar ett argument är den genererade medlemmen en metod, inte en getter. Du skickar värdet vid anropsstället.

l10n.greeting('Ada') returnerar "Hello, Ada!".
Typer kontrolleras: om du skickar en int där en String förväntas misslyckas kompileringen.

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

Steg 10: Pluralformer med ICU

ARB stöder ICU-meddelandesyntax för pluralformer. Ett block av typen {count, plural, ...} väljer rätt formulering för varje språk. Deklarera platshållaren som num (eller int).

=0, one och other är vanliga kategorier.
# ersätts med det formaterade talet.
Olika språk har olika pluralregler — ICU hanterar dem automatiskt.

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

Steg 11: En formatterare i ren Dart

Urvalslogiken som ICU utför består helt enkelt av regler för ett tal. Här är ett litet fristående Dart-program som efterliknar engelsk pluralurval — användbart för att förstå vad gen_l10n genererar under huven.

Riktiga appar använder den genererade metoden; detta är bara för förståelsens skull.

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

Snabbkontroll

Du lade till en nyckel logout endast i app_en.arb men glömde den i app_tr.arb. En användare med turkiska som språk öppnar skärmen. Vad händer?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har byggt hela Flutter-pipelinen för lokalisering:

Lade till flutter_localizations + intl och angav generate: true.
Konfigurerade l10n.yaml (arb-dir, mall, utdataklass).
Skrev en ARB-mall samt översättningar för varje språk.
Lät gen_l10n skapa den typade klassen AppLocalizations.
Registrerade localizationsDelegates och supportedLocales, och läste sedan strängar via AppLocalizations.of(context)!.
Använde platshållare för dynamiska värden och ICU-pluralformer för texter som beror på antal.

Resultatet: översättningar typkontrolleras, saknade nycklar i mallen upptäcks tidigt och översättare kan arbeta i ett tydligt JSON-format.

Gratis att börja

Lär dig Dart med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 22
Lektioner: 88

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”ARB-filer och lokaliseringsarbetsflödet i gen_l10n” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Mobilutveckling med Flutter, inklusive ”ARB-filer och lokaliseringsarbetsflödet i gen_l10n”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Mobilutveckling med Flutter innehåller totalt 4 lektioner.

Vad lär jag mig i ”ARB-filer och lokaliseringsarbetsflödet i gen_l10n”?

Konfigurera flutter_localizations- och gen_l10n-pipelinen för att generera typade översättningar. Ni övar på Mobilutveckling med Flutter med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Mobilutveckling med Flutter?

Du behöver inga förkunskaper. Utbildningen i Mobilutveckling med Flutter på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”ARB-filer och lokaliseringsarbetsflödet i gen_l10n”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Mobilutveckling med Flutter-lektionen?

Ja. Varje Mobilutveckling med Flutter-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

ARB-filer och lokaliseringsarbetsflödet i gen_l10n
Pluralisering, genus och ICU-meddelandeformatering
RTL-layouter och hantering av riktning
Semantik, skärmläsare och tillgängliga widgets

← Tillbaka till Mobilutveckling med Flutter