Hoe de app in Flutter te lokaliseren

Het lokaliseren van uw app is een belangrijke vereiste als u wilt dat uw app over de hele wereld wordt gebruikt. Flutter biedt de eenvoudige manier om uw app te lokaliseren door arb bestanden te gebruiken. In dit artikel wordt uitgelegd hoe u uw app in Flutter kunt lokaliseren. Houd er rekening mee dat dit artikel is gebaseerd op Flutter 2.0.1, dus als u oudere versies gebruikt, werkt de manier die in dit artikel wordt uitgelegd mogelijk niet.

1. Voeg afhankelijkheden toe aan pubspec.yaml

Voeg afhankelijkheden toe aan pubspec.yaml

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

Deze pakketten zijn nodig voor lokalisatie.

2. Voeg generate aan pubspec.yaml

1flutter:
2  generate: true

Met deze vlag kan Flutter klasse AppLocalizations genereren arb bestanden, wat nodig is voor lokalisatie.

3. Maak l10n.yaml

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

Dit bestand biedt configuraties bij het automatisch genereren van de klasse AppLocalizations arb-dir specificeert de map voor arb bestanden. template-arb-file specificeert het arb bestand dat als sjabloon wordt gebruikt. output-localization-file specificeert de naam van het AppLocalizations klassebestand.

4. Maak een arb bestand

Maak een arb bestand in de map die is opgegeven in l10n.yaml. arb bestand heeft de json-indeling en u kunt voor elke sleutel vertalingen opgeven. De kay wordt resource id en de waarde wordt resource value . Het onderstaande voorbeeld biedt bijvoorbeeld een Engelse vertaling voor de resource id helloWorld .

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

U kunt de gedetailleerde uitleg van de resource id door een @ -voorvoegsel toe te resource id . In het bovenstaande voorbeeld @helloWorld de gedetailleerde informatie van de resource id helloWorld . Vervolgens kunt u andere arb bestanden maken op basis van de taal die uw app ondersteunt. Als u bijvoorbeeld de Japanse taal ondersteunt, kunt u het app_ja.arb toevoegen zoals hieronder.

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

arb bestand biedt verschillende handige uitdrukkingen en hier zal ik er een introduceren, placeholder . Placeholder kunt u parameters doorgeven aan de resource value .

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

U kunt alle parameters in de resource value doorgeven, zoals {price} . Schrijf vervolgens een beschrijving van de parameter in placeholders onder @resource id . Nadat u een placeholder AppLocalizations automatisch heeft gegenereerd, kunt u deze vanuit uw app oproepen zoals hieronder.

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

5. Maak automatisch een AppLocalizations klassebestand

Als je flutter pub get oproept of je app bouwt, wordt het AppLocalizations klassebestand automatisch gegenereerd. De bestandsnaam is gespecificeerd in de l10n.yaml. In dit geval zou het bestand .dart_tool/flutter_gen/gen_l10n/app_localizations.dart . De directory wordt bepaald door het systeem.

Je hoeft dit bestand trouwens niet vast te leggen aan git. Dit bestand wordt altijd gegenereerd wanneer u uw app bouwt en geeft de nieuwste arb bestand weer.

6. Roep Materiaal / Widget / CupertinoApp op

Stel de parameters localizationsDelegates en supportedLocales Vergeet niet de klasse AppLocalizations

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. Roep vertaalde tekst op

U kunt gelokaliseerde tekst gebruiken zoals in het onderstaande voorbeeld. De syntaxis is als AppLocalizations.of(context).<resource id>.​

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

Lokalisaties voor datum

U kunt ook de gelokaliseerde datum weergeven, zoals hieronder.

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

Referenties

• Flutter.dev
• ARB-specificatie