Over-the-Air-Übersetzungen in Flutter

Schritte zur Einrichtung

1. 1

   Release erstellen

   Committe in litei18n deine Übersetzungen und erstelle auf der Seite Releases ein Release (ab dem Starter-Plan). Kopiere deine Projekt-ID aus der dort angezeigten Release-URL. Exportiere deine Übersetzungen außerdem als JSON und lege sie als mitgelieferte Kopie in deine App.

2. 2

   Release beim App-Start laden

   Füge das Paket http zu pubspec.yaml hinzu, lege deine exportierten JSON-Dateien in assets/i18n/ ab und trage diesen Ordner in pubspec.yaml unter flutter: assets: ein, sonst kann die App sie nicht lesen. Diese Klasse liest zuerst die mitgelieferte Datei und ersetzt ihre Werte durch das neueste Release, sobald das Netz es erlaubt.

   lib/translations.dartKopieren

   import 'dart:convert';
   
   import 'package:flutter/services.dart' show rootBundle;
   import 'package:http/http.dart' as http;
   
   const projectId = 'YOUR_PROJECT_ID';
   const releases =
       'https://ttksowxkfdohtprtfarf.supabase.co/storage/v1/object/public/releases/locales';
   
   class Translations {
     Translations(this._values);
   
     final Map<String, String> _values;
   
     String t(String key) => _values[key] ?? key;
   
     static Future<Translations> load(String locale) async {
       // The copy bundled with the app: works offline and on first launch.
       final values = Map<String, String>.from(
         jsonDecode(await rootBundle.loadString('assets/i18n/$locale.json')),
       );
       try {
         final res = await http
             .get(Uri.parse('$releases/$projectId/latest/$locale.json'))
             .timeout(const Duration(seconds: 5));
         if (res.statusCode == 200) {
           values.addAll(Map<String, String>.from(jsonDecode(utf8.decode(res.bodyBytes))));
         }
       } catch (_) {
         // Offline or slow: keep the bundled copy.
       }
       return Translations(values);
     }
   }

3. 3

   Texte verwenden

   Lade die Übersetzungen vor runApp und reiche sie weiter, oder lege sie in das State-Management, das du schon nutzt. Ein fehlender Key zeigt seinen eigenen Namen und fällt so sofort auf.

   lib/main.dartKopieren

   import 'package:flutter/material.dart';
   
   import 'translations.dart';
   
   Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
     final tr = await Translations.load('es');
     runApp(MyApp(tr: tr));
   }
   
   // In a widget:
   Text(tr.t('home.title'))

4. 4

   Texte ohne neuen Build ändern

   Bearbeite eine Übersetzung, committe sie und erstelle ein neues Release. Die latest-URL liefert jetzt den neuen Text, und deine App übernimmt ihn, wenn sie die Übersetzungen das nächste Mal lädt. Kein neuer Build, keine App-Store-Prüfung.