Flutter Localizations – naucz aplikację mówić w różnych językach

Jako, że wielojęzyczność w aplikacji jest bardzo ważnym aspektem postanowiłem opowiedzieć o nim w moim nowym filmie – zapraszam do oglądania!

Z filmu dowiesz się:
– jak używać biblioteki flutter_localizations
– jak obsłużyć różne języki
– jak to wszystko działa na pokazanym przykładzie

Tutaj kod, o którym wspominam w filmie:

ios/Runner/Info.plist

<key>CFBundleLocalizations</key>
<array>
	<string>English</string>
	<string>es</string>
	<string>pl</string>
</array>

i18n.dart

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class I18n {
  final Locale locale;

  //Konstruktor
  I18n(this.locale);

  //Mapa do przechowywania klucze i wartości tekstów
  Map<String, String> _localizedStrings;

  //Metoda (faktory) do wyciągania resource na podstawie kontekstu
  static I18n of(BuildContext context) {
    return Localizations.of<I18n>(context, I18n);
  }

  //Delegata, którą uywamy w localizationsDelegates w MaterialApp
  static const LocalizationsDelegate<I18n> delegate = _I18nDelegate();

  //Lista wspieranych języków, u nas pierwszy na liście to język domyślny
  static const supportedLocales = [Locale('en'), Locale('es'), Locale('pl')];

  //Ładowanie z pliku .json dla odpowiedniego locale
  Future<void> load() async {
    String jsonString = await rootBundle.loadString(getAssetPath());
    //Dekodowanie
    Map<String, dynamic> jsonMap = json.decode(jsonString);
    //Zmapowanie do lokalnej mapy
    _localizedStrings = jsonMap.map((key, value) {
      return MapEntry(key, value.toString());
    });
  }

  //Funkcja, która wybiera odpowiedni locale ze wspieranych przez aplikację
  String getAssetPath() {
    //Jeśli telefon ma ustawiony inny język niż wspierany przez naszą aplikację to wtedy wybierany jest pierwszy język z listy supportedLocales
    final localeToUse = supportedLocales.firstWhere(
        (element) => element.languageCode == locale.languageCode,
        orElse: () => supportedLocales.first);

    return 'assets/i18n/${localeToUse.languageCode}.json';
  }

  //Wyciągnięcie tekstu po kluczu
  String translate(String key) {
    return _localizedStrings[key];
  }
}

class _I18nDelegate extends LocalizationsDelegate<I18n> {
  const _I18nDelegate();

  //Sprawdzanie czy dany Locale jest przez nas wspierany
  @override
  bool isSupported(Locale locale) {
    return true;
  }

  //Funkcja, która wywoływana jest podczas tworzenia MaterialApp przy starcie aplikacji
  //Przekazywany Locale jest brany z ustawień telefonu
  @override
  Future<I18n> load(Locale locale) async {
    //Utworzenie naszej klasy I18n
    final localizations = I18n(locale);
    //Pobranie tekstów z odpowiedniego pliku .json
    await localizations.load();
    return localizations;
  }

  //Funkcja, która określa czy należy wywołać load przy odświeżeniu widgetu
  @override
  bool shouldReload(_I18nDelegate old) => false;
}

Jeśli masz jakieś pytanie – pisz śmiało! 🙂 
Zapraszam również do subskrybcji kanału.

Udostępnij