Sobes.tech
Middle

Jak dodać lokalizację do aplikacji Flutter?

sobes.tech AI

Odpowiedź od AI

  1. Dodanie zależności:

    W pliku pubspec.yaml należy dodać zależności do lokalizacji:

    dependencies:
      flutter:
        sdk: flutter
    
      flutter_localizations:
        sdk: flutter
      intl: ^0.18.0 # Przykład wersji, może się różnić
    

    Następnie uruchom flutter pub get.

  2. Tworzenie plików lokalizacyjnych:

    Utwórz katalogi dla zasobów lokalizacyjnych, np. ./lib/l10n/. Wewnątrz nich utwórz pliki .arb dla każdego obsługiwanego języka. Na przykład dla angielskiego i rosyjskiego:

    app_en.arb:

    {
      "helloWorld": "Hello World!",
      "@@locale": "en"
    }
    

    app_ru.arb:

    {
      "helloWorld": "Привет мир!",
      "@@locale": "ru"
    }
    
  3. Konfiguracja generowania kodu:

    W pliku pubspec.yaml wskaż ścieżkę do plików .arb i skonfiguruj generację:

    flutter:
      generate: true # Włącz generację
    
      assets:
        - assets/... # Twoje inne zasoby
    
      l10n:
        arb-dir: lib/l10n # Katalog z plikami .arb
        template-arb-file: app_en.arb # Szablonowy plik .arb
        output-localization-file: app_localizations.dart # Nazwa pliku generowanego
    

    Po zapisaniu pubspec.yaml, Flutter automatycznie wygeneruje plik ./lib/generated/l10n.dart (lub ten wskazany w output-localization-file).

  4. Użycie zlokalizowanych ciągów:

    W aplikacji, tam gdzie chcesz używać zlokalizowanych ciągów, zaimportuj wygenerowany plik:

    import 'package:flutter_gen/gen_l10n/app_localizations.dart';
    

    Następnie odwołaj się do zlokalizowanego ciągu przez AppLocalizations.of(context)!:

    Text(AppLocalizations.of(context)!.helloWorld),
    
  5. Konfiguracja MaterialApp lub CupertinoApp:

    W najwyższym widżecie (zazwyczaj MaterialApp lub CupertinoApp) ustaw obsługę języków i delegaty lokalizacji:

    import 'package:flutter_gen/gen_l10n/app_localizations.dart';
    
    MaterialApp(
      // ... inne ustawienia
      localizationsDelegates: const [
        AppLocalizations.delegate, // Delegat z wygenerowanego pliku
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', ''), // Angielski
        Locale('ru', ''), // Rosyjski
        // ... inne obsługiwane języki
      ],
      // ...
    );
    

Teraz aplikacja będzie automatycznie wybierać lokalizację w zależności od ustawień urządzenia użytkownika, jeśli jest ona dostępna w supportedLocales. Aby ręcznie zmienić lokalizację, można użyć Locale i zaktualizować stan aplikacji.