Sobes.tech
Middle

Hogyan adjunk hozzá lokalizációt egy Flutter alkalmazáshoz?

sobes.tech MI

Válasz az MI-től

  1. Függőségek hozzáadása:

    A pubspec.yaml fájlban hozzá kell adni a lokalizációhoz szükséges függőségeket:

    dependencies:
      flutter:
        sdk: flutter
    
      flutter_localizations:
        sdk: flutter
      intl: ^0.18.0 # Példa verzió, változhat
    

    Ezután futtassa a flutter pub get parancsot.

  2. Lokalizációs fájlok létrehozása:

    Hozzon létre könyvtárakat a lokalizációs erőforrásoknak, például ./lib/l10n/. Belül hozzon létre .arb fájlokat minden támogatott nyelvhez. Például angol és orosz nyelvhez:

    app_en.arb:

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

    app_ru.arb:

    {
      "helloWorld": "Привет мир!",
      "@@locale": "ru"
    }
    
  3. Kódgenerálási konfiguráció:

    A pubspec.yaml fájlban adja meg az .arb fájlok elérési útját, és konfigurálja a generálást:

    flutter:
      generate: true # Generálás engedélyezése
    
      assets:
        - assets/... # Egyéb eszközei
    
      l10n:
        arb-dir: lib/l10n # Könyvtár az `.arb` fájlokhoz
        template-arb-file: app_en.arb # Sablon `.arb` fájl
        output-localization-file: app_localizations.dart # Generált fájl neve
    

    A pubspec.yaml mentése után a Flutter automatikusan generálja a ./lib/generated/l10n.dart (vagy az output-localization-file-ban megadott) fájlt.

  4. Lokalizált szövegek használata:

    Az alkalmazásban, ahol a lokalizált szövegeket használni szeretné, importálja a generált fájlt:

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

    Ezután a AppLocalizations.of(context)! segítségével érheti el a lokalizált szöveget:

    Text(AppLocalizations.of(context)!.helloWorld),
    
  5. MaterialApp vagy CupertinoApp konfigurálása:

    A legfelső widgetben (általában MaterialApp vagy CupertinoApp) adja meg a nyelvi támogatást és a lokalizációs delegátokat:

    import 'package:flutter_gen/gen_l10n/app_localizations.dart';
    
    MaterialApp(
      // ... egyéb beállítások
      localizationsDelegates: const [
        AppLocalizations.delegate, // A generált fájlból származó delegát
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en', ''), // Angol
        Locale('ru', ''), // Orosz
        // ... más támogatott nyelvek
      ],
      // ...
    );
    

Mostantól az alkalmazás automatikusan kiválasztja a lokalizációt a felhasználó eszközének beállításai alapján, ha az szerepel a supportedLocales listában. A lokalizáció manuális módosításához használhat Locale-t és frissítheti az alkalmazás állapotát.