Come localizzare l'app in Flutter

La localizzazione della tua app è un requisito importante se desideri che la tua app venga utilizzata in tutto il mondo. Flutter fornisce il modo semplice per localizzare la tua app usando i file arb Questo articolo spiegherà come localizzare la tua app in Flutter . Tieni presente che questo articolo è basato su Flutter 2.0.1, quindi se stai utilizzando versioni precedenti, il modo spiegato in questo articolo potrebbe non funzionare.

1. Aggiungere le dipendenze a pubspec.yaml

Aggiungi le dipendenze a pubspec.yaml

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

Questi pacchetti sono necessari per la localizzazione.

2. Aggiungere generate bandiera per pubspec.yaml

1flutter:
2  generate: true

Questo flag consente a Flutter di generare la classe AppLocalizations arb , necessaria per la localizzazione.

3. Creare l10n.yaml

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

Questo file fornisce le configurazioni durante la generazione automatica della classe AppLocalizations arb-dir specifica la directory per i file arb template-arb-file specifica il arb usato come modello. output-localization-file specifica il nome del file di classe AppLocalizations

4. Crea file arb

Crea il arb nella directory specificata in l10n.yaml. arb file arb è in formato json e puoi fornire traduzioni per ogni chiave. Il kay è chiamato resource id e il valore è chiamato resource value . Ad esempio, l'esempio seguente fornisce la traduzione in inglese per l' resource id helloWorld .

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

È possibile fornire la spiegazione dettagliata all'ID resource id aggiungendo il prefisso @ resource id . Nell'esempio sopra, @helloWorld descrive le informazioni dettagliate resource id helloWorld . Quindi puoi creare altri arb base alla lingua supportata dalla tua app. Ad esempio, se supporti la lingua giapponese, puoi aggiungere il app_ja.arb come di seguito.

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

arb file arb fornisce varie espressioni utili e qui ne introdurrò una, placeholder . Placeholder consente di passare i parametri al resource value .

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

Puoi passare qualsiasi parametro nel resource value come {price} . Quindi scrivi la descrizione del parametro nei placeholders sotto @resource id . Dopo aver creato un placeholder e generato automaticamente la AppLocalizations , puoi chiamarlo dalla tua app come di seguito.

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

5. Crea automaticamente il file di classe AppLocalizations

Se chiami flutter pub get o costruisci la tua app, il AppLocalizations verrà generato automaticamente. Il nome del file è specificato in l10n.yaml. In questo caso, il file sarebbe .dart_tool/flutter_gen/gen_l10n/app_localizations.dart . La directory è determinata dal sistema.

A proposito, non è necessario eseguire il commit di questo file su git. Questo file viene sempre generato quando si crea l'app e riflette i contenuti del file arb

6. Chiama Materiale / Widget / CupertinoApp

Imposta localizationsDelegates parametri localizationsDelegates e supportedLocales Non dimenticare di importare la classe 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. Chiama testo tradotto

Puoi utilizzare testo localizzato come nell'esempio seguente. La sintassi è come AppLocalizations.of(context).<resource id>.

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

Localizzazioni per data

Puoi anche visualizzare la data localizzata come di seguito.

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

Riferimenti

• Flutter.dev
• Specifiche ARB