Локализация и мультиязычность во Flutter

您好，让我们了解如何制作为您的用户提供本地化的应用程序。

Ничего не поняли? Я тоже! А теперь представьте, что пользователь тоже не понимает язык, на котором отображается интерфейс вашего приложения, и удаляет его, едва успев установить. Но это легко исправить: Flutter позволяет разрабатывать приложения, которые будут понятны пользователям.

Как? Смотрите официальную документацию Flutter или следуйте инструкциям в этом руководстве.

Internationalizing Flutter apps

flutter.dev

Шаг 1. Для начала добавим в pubspec.yaml нужные зависимости (flutter_localizations, provider, intl) и вставим generate: true.

dependencies:
 flutter_localizations:
 sdk: flutter
 
 provider:
 intl: ^0.17.0
 ….
 ….
 
flutter:
 uses-material-design: true
 generate: true

Шаг 2. Теперь создадим файл l10n.yaml (первая буква — маленькая L) и вставим следующий код:

arb-dir: lib/l10n
template_arb-file: app_en.arb
output_localization-files: app_localizations.dart

В коде выше arb-dir — каталог входных файлов локализации, app_en.arb — шаблон, output_localization-files — выходной файл, который сгенерирует Flutter (именно для этого мы добавили generate: true в файл pubspec.yaml).

Шаг 3. Согласно определению в l10n.yaml, входные файлы будут находиться в папке lib/l10n. Поэтому в папке lib нужно создать папку l10n — туда мы поместим файлы, которые сгенерируем на шаге 4 и 5.

Шаг 4. Создадим файл all_locales.dart в папке l10n.

import ‘package:flutter/material.dart’;

class AllLocale{
 AllLocale();
 
static final all = [
 const Locale(“en”, “US”),  // en is language Code and US
                            // is the country code
 const Locale(“hi”, “In”),
 ];
 }

Language Codes - Sorted by

www.science.co.il

Шаг 5. Теперь создадим файлы для отдельных языков. Здесь в приложении используются только английский и хинди, но по такой же схеме можно добавить и все 78 поддерживаемых языков.

На этом этапе мы создаем файлы .arb для каждого языка, который будет в приложении.

Примечания:

• Создаваемые файлы должны быть в папке l10n.

• У файлов должно быть расширение .arb.

• Название ключей должно начинаться с маленьких букв — специальные символы запрещены.

• Не ставьте запятую в конце последней пары «ключ-значение».

• Если нужно принимать параметры, можете посмотреть, как в этом примере отображается GST (налог на товары и услуги), который в качестве параметра использует тег rate.

-> app_en.arb

{
 “frieghtInRs”: “Freight (Rs)”,
 “gst” : “GST ({rate}%) (Rs)”,
 “@gst”:{
 “description”: “Enter % for gst”,
 “placeholders”: {
 “rate”: {
         “type”:”String”
         }
       }
    }, 
 “language”: “English”
}

-> app_hi.arb

{ 
 “frieghtInRs”: “किराया (रु.)”,
 “gst” : “GST ({rate}%) (रु.)”,
 “language”: “Hindi”
}

Теги определять нужно только в шаблоне — в нашем случае это app_en.arb.

Шаг 6. Теперь задаем все локали и делегаты локализации в MaterialApp в файле main.dart.

import ‘package:flutter_localizations/flutter_localizations.dart’;

MaterialApp(
           title: 'Parcel',
           debugShowCheckedModeBanner: false,
           theme: ThemeData(
                      primarySwatch: Colors.orange,
                 ),
           supportedLocales: AllLocale.all,
           locale: Provider.of<LocaleProvider>(context).locale, 
           localizationsDelegates: [
                  AppLocalizations.delegate,
                  GlobalMaterialLocalizations.delegate,
                  GlobalCupertinoLocalizations.delegate,
                  GlobalWidgetsLocalizations.delegate,
                  ],
           initialRoute: "/",
           onGenerateRoute: Routes.generateRoutes,
          )

В коде выше мы использовали LocaleProvider для установки значения локали, поэтому создадим соответствующий файл.

import 'l10n/all_locales.dart';
class LocaleProvider with ChangeNotifier {
Locale _locale;
Locale get locale => _locale;
void setLocale(Locale locale) {
if (!AllLocales.all.contains(locale)) return;
_locale = locale;
notifyListeners();
   }
}

Шаг 7. Теперь запустим flutter pub get — эта команда создаст файлы локализации в папке dart_tools/flutter_gen. Поздравляю! Можете похвастаться перед руководителем или коллегой.

Как использовать локализацию в интерфейсе

Для смены языка приложения используйте приведенный ниже код или измените язык в настройках устройства.

Provider.of<LocaleProvider>(context,listen: false)
  .setLocale(AllLocale.all[1]);

Использование локализации:

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              AppLocalizations.of(context).frieghtInRs + "50",
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              AppLocalizations.of(context).gst("5") + "10",
              style: Theme.of(context).textTheme.headline4,
            ),
            Text(
              "${AppLocalizations.of(context).total}: 60",
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),

Ура! Вы создали приложение с поддержкой нескольких языков.

Спасибо, что дочитали до конца. Ставьте лайки, подписывайтесь и всё такое — я буду благодарен!

GitHub - NishadAvnish/localizations_flutter

github.com

---

О переводчике

Перевод статьи выполнен в Alconost.

Alconost занимается локализацией игр, приложений и сайтов на 70 языков. Переводчики-носители языка, лингвистическое тестирование, облачная платформа с API, непрерывная локализация, менеджеры проектов 24/7, любые форматы строковых ресурсов.

Мы также делаем рекламные и обучающие видеоролики — для сайтов, продающие, имиджевые, рекламные, обучающие, тизеры, эксплейнеры, трейлеры для Google Play и App Store.