Sobes.tech
Middle

Wie fügt man eine Lokalisierung in eine Flutter-Anwendung ein?

sobes.tech KI

Antwort von AI

  1. Hinzufügen von Abhängigkeiten:

    In der Datei pubspec.yaml müssen Abhängigkeiten für die Lokalisierung hinzugefügt werden:

    dependencies:
      flutter:
        sdk: flutter
    
      flutter_localizations:
        sdk: flutter
      intl: ^0.18.0 # Beispielversion, kann variieren
    

    Dann führe flutter pub get aus.

  2. Erstellen der Lokalisierungsdateien:

    Erstelle Verzeichnisse für die Lokalisierungsressourcen, z.B. ./lib/l10n/. Innerhalb, erstelle .arb-Dateien für jede unterstützte Sprache. Zum Beispiel für Englisch und Russisch:

    app_en.arb:

    {
      "helloWorld": "Hello World!",
      "@@locale": "en"
    }
    

    app_ru.arb:

    {
      "helloWorld": "Привет мир!",
      "@@locale": "ru"
    }
    
  3. Konfiguration der Code-Generierung:

    In der Datei pubspec.yaml den Pfad zu den .arb-Dateien angeben und die Generierung konfigurieren:

    flutter:
      generate: true # Generierung aktivieren
    
      assets:
        - assets/... # Deine weiteren Assets
    
      l10n:
        arb-dir: lib/l10n # Verzeichnis mit den .arb-Dateien
        template-arb-file: app_en.arb # Vorlage-ARB-Datei
        output-localization-file: app_localizations.dart # Name der generierten Datei
    

    Nach dem Speichern von pubspec.yaml generiert Flutter automatisch die Datei ./lib/generated/l10n.dart (oder die in output-localization-file angegebene).

  4. Verwendung der lokalisierten Strings:

    Im App-Code, wo die lokalisierten Strings verwendet werden sollen, die generierte Datei importieren:

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

    Dann auf die lokalisierten Strings über AppLocalizations.of(context)! zugreifen:

    Text(AppLocalizations.of(context)!.helloWorld),
    
  5. Konfiguration von MaterialApp oder CupertinoApp:

    Im obersten Widget (meist MaterialApp oder CupertinoApp) die Unterstützung für Sprachen und die Lokalisierungs-Delegates angeben:

    import 'package:flutter_gen/gen_l10n/app_localizations.dart';
    
    MaterialApp(
      // ... andere Einstellungen
      localizationsDelegates: const [
        AppLocalizations.delegate, // Delegat aus der generierten Datei
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', ''), // Englisch
        Locale('ru', ''), // Russisch
        // ... weitere unterstützte Sprachen
      ],
      // ...
    );
    

Die App wählt automatisch die Lokalisierung basierend auf den Einstellungen des Geräts des Nutzers, sofern sie in supportedLocales vorhanden ist. Um die Lokalisierung manuell zu ändern, kann Locale verwendet und der Zustand der App aktualisiert werden.