So lokalisieren Sie die App in Flutter

Die Lokalisierung Ihrer App ist eine wichtige Voraussetzung, wenn Sie möchten, dass Ihre App weltweit verwendet wird. Flutter bietet die einfache Möglichkeit, Ihre App mithilfe von arb Dateien zu lokalisieren. In diesem Artikel wird erläutert, wie Sie Ihre App in Flutter lokalisieren. Bitte beachten Sie, dass dieser Artikel auf Flutter 2.0.1 basiert. Wenn Sie also ältere Versionen verwenden, funktioniert die in diesem Artikel erläuterte Methode möglicherweise nicht.

1. Fügen Sie Pubspec.yaml Abhängigkeiten hinzu

Fügen Sie pubspec.yaml Abhängigkeiten hinzu

1dependencies:
2  flutter:
3    sdk: flutter
4  flutter_localizations:
5    sdk: flutter
6  intl: ^0.16.1

Diese Pakete sind für die Lokalisierung erforderlich.

2. Fügen Sie generate Datei pubspec.yaml das Generierungsflag hinzu

1flutter:
2  generate: true

Mit diesem Flag kann Flutter AppLocalizations Klasse aus arb Dateien generieren, die für die Lokalisierung erforderlich sind.

3. Erstellen Sie l10n.yaml

1arb-dir: lib/l10n
2template-arb-file: app_en.arb
3output-localization-file: app_localizations.dart

Diese Datei enthält Konfigurationen beim automatischen Generieren der AppLocalizations Klasse. arb-dir gibt das Verzeichnis für arb Dateien an. template-arb-file gibt die arb - Datei als Vorlage verwendet. output-localization-file gibt den Namen der AppLocalizations Klassendatei an.

4. Erstellen Sie eine arb Datei

Erstellen Sie eine arb Datei in dem in l10n.yaml angegebenen Verzeichnis. arb Datei hat das JSON-Format und Sie können Übersetzungen für jeden Schlüssel bereitstellen. Das Kay heißt resource id und der Wert heißt resource value . Das folgende Beispiel enthält beispielsweise eine englische Übersetzung für die resource id helloWorld .

1{
2  "helloWorld": "Hello World!",
3  "@helloWorld": {
4    "description": "The conventional newborn programmer greeting"
5  }
6}

Sie können die detaillierte Erklärung für die bieten resource id durch Hinzufügen von @ Präfix der resource id - resource id . Im obigen Beispiel @helloWorld die detaillierten Informationen der resource id helloWorld . Anschließend können Sie andere arb Dateien entsprechend der von Ihrer App unterstützten Sprache erstellen. Wenn Sie beispielsweise die japanische Sprache unterstützen, können app_ja.arb Datei app_ja.arb wie folgt hinzufügen.

1{
2  "helloWorld": "こんにちは世界!"
3}

arb Datei enthält verschiedene nützliche Ausdrücke, und hier stelle ich einen davon vor, den placeholder . Placeholder können Sie Parameter an den resource value .

1"pricePerMonth": "{price} per month",
2"@pricePerMonth": {
3  "placeholders": {
4    "price": {
5      "example": "123.45",
6      "description": "price"
7    }
8  }
9}

Sie können beliebige Parameter im resource value wie {price} . Schreiben Sie dann eine Beschreibung des Parameters in die placeholders unter @resource id . Sobald Sie einen placeholder und die AppLocalizations Klasse automatisch generiert haben, können Sie sie wie unten beschrieben über Ihre App aufrufen.

1AppLocalizations.of(context).pricePerMonth(100.0);

5. Erstellen AppLocalizations Klassendatei

Wenn Sie flutter pub get abrufen oder Ihre App erstellen, wird automatisch die AppLocalizations Der Dateiname ist in der Datei l10n.yaml angegeben. In diesem Fall wäre die Datei .dart_tool/flutter_gen/gen_l10n/app_localizations.dart . Das Verzeichnis wird vom System festgelegt.

Übrigens müssen Sie diese Datei nicht an git übergeben. Diese Datei wird immer generiert, wenn Sie Ihre App erstellen und den neuesten Inhalt arb

6. Rufen Sie Material / Widget / CupertinoApp auf

Legen Sie supportedLocales localizationsDelegates und supportLocales fest. Vergessen Sie nicht, die AppLocalizations Klasse zu importieren.

1import 'package:flutter_gen/gen_l10n/app_localizations.dart';
2 
3@override
4Widget build(BuildContext context) {
5  return MaterialApp(
6    localizationsDelegates: AppLocalizations.localizationsDelegates, // Add this line
7    supportedLocales: AppLocalizations.supportedLocales, // Add this line
8    home: // ...
9  );
10}

7. Rufen Sie den übersetzten Text auf

Sie können lokalisierten Text wie im folgenden Beispiel verwenden. Die Syntax ist wie bei AppLocalizations.of(context).<resource id>.

1Text(AppLocalizations.of(context).helloWorld);

Lokalisierungen für Datum

Sie können das lokalisierte Datum auch wie unten anzeigen.

1Locale locale = Localizations.localeOf(context);
2DateFormat.yMd(locale.toString()).format(DateTime.now());

Verweise

• Flutter.dev
• ARB-Spezifikation