قابلیت چند زبانی در فلاتر — به زبان ساده

راهنماهای زیادی در اینترنت وجود دارند که به بررسی قابلیت چند زبانی در فلاتر و اپلیکیشن‌هایی پرداخته‌اند که از این فریمورک استفاده می‌کنند. تقریباً همه این راهنماها از یک فایل JSON جهت ذخیره‌سازی متن چند زبانی استفاده می‌کنند؛ به مثال زیر در همین رابطه توجه کنید:

//saved as EN.json
{
  "save": "Save",
  "cancel": "Cancel"
}
//saved as ID.json
{
  "save": "Simpan",
  "cancel": "Batal"
}

در این روش همه چیز به خوبی کار می‌کند، اما زمانی که فهرست متن بزرگ می‌شود و همچنین زمانی که مجبور هستیم با تعداد بالایی از زبان‌ها کار کنیم، مشکلاتی پیش می‌آید، زیرا باید همه فایل‌های JSON را به‌روزرسانی کنیم. اگر بخواهیم از 6 زبان پشتیبانی کنیم، هنگامی که یک متن به اپلیکیشن اضافه می‌شود باید آن را به هر 6 فایل اضافه کنیم.

علاوه بر مشکل فوق، این مشکل نیز وجود دارد که وقتی لازم است متنی از سوی مترجم ترجمه شود، کار با فایل‌های JSON برای ایشان دشوار خواهد بود، چون همه فایل‌ها از هم جدا شده‌اند. برای مترجم‌ها راحت‌تر است که تنها با یک فایل اکسل کار کنند و هر زبان در یک ستون قرار داشته باشد.

یک اکستنشن برای Visual Studio Code وجود دارد که این مشکل را رفع می‌کند. نام این اکستنشن flutter-internationalize (+) است.

قابلیت اصلی این اکستنشن امکان ویرایش آسان‌تر متن روی همه زبان‌ها است و بدین ترتیب دیگر نیازی به ویرایش جداگانه فایل‌های JSON نداریم. کافی است یک کلید را انتخاب کنیم و یا کلید جدیدی اضافه کنیم تا همه فایل‌های JSON در پس‌زمینه به‌روزرسانی شوند.

نکته مهم این است که می‌توانید با کلیک روی گزینه Export excel یک نسخه از فایل اکسل را به مترجم ارسال کنید و پس از این که مترجم کارش را انجام داد آن را مجدداً ایمپورت کنید.

علاوه بر آن، این اکستنشن قادر به تولید فایل‌های dart است که کلید متن را به کلاس‌های dart و getter نگاشت می‌کنند. به این ترتیب شیوه بارگذاری و شیوه خواندن در اختیار شما است. در ادامه مثالی از کد تولید شده برای dart را می‌بینید:

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;
class LocaleBase {
  Map<String, dynamic> _data;
  Future<void> load(String path) async {
    final strJson = await rootBundle.loadString(path);
    _data = jsonDecode(strJson);
    initAll();
  }
  Localemain _main;
  Localemain get main => _main;
  void initAll() {
    _main = Localemain(Map<String, String>.from(_data['main']));
  }
}
class Localemain {
  final Map<String, String> _data;
  Localemain(this._data);
  String get sample => _data["sample"];
  String get save => _data["save"];
  String get cancel => _data["cancel"];
}

سپس می‌توانیم از آن در LocalizationsDelegate استفاده کنیم، پیش از بارگذاری متن JSON باید مطمئن شویم که JSON را به pubspec.yaml اضافه کرده‌ایم:

  assets:
    - locales/EN_US.json
    - locales/ID_ID.json

در ادامه می‌توانیم به صورت زیر آن را بارگذاری کنیم:

final LocaleBase lBase = LocaleBase();
await lBase.load('locale/EN_US.json');
print(l.main.cancel) //access group main and cancel key
print(l.main.save) //access group main and cancel key

از آن روی LocalizationsDelegate به صورت زیر استفاده می‌کنیم:

class LocDelegate extends LocalizationsDelegate<LocaleBase> {
  const LocDelegate();
  final idMap = const {'en': 'locales/EN.json', 'id': 'locales/ID.json'};

  @override
  bool isSupported(Locale locale) => ['en', 'id'].contains(locale.languageCode);

  @override
  Future<LocaleBase> load(Locale locale) async {
    var lang = 'en';
    if (isSupported(locale)) lang = locale.languageCode;
    final loc = LocaleBase();
    await loc.load(idMap[lang]);
    return loc;
  }

  @override
  bool shouldReload(LocDelegate old) => false;
}

سپس delegate را به MaterialApp اضافه می‌کنیم:

  localizationsDelegates: [
    const LocDelegate(),
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],

و می‌توانیم متن loc را روی هر ویجت داشته باشیم:

Widget build(BuildContext context) {
  final loc = Localizations.of<LocaleBase>(context, LocaleBase);
  print(loc.main.save);
  print(loc.main.cancel);
}

اکنون می‌توانیم متن را به سادگی ویرایش کنیم. امیدواریم این امکان به شما کمک کند بتوانید قابلیت‌های چند زبانی را به اپلیکیشن‌های خود اضافه کنید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• مجموعه آموزش‌های برنامه‌‌نویسی
• مفاهیم مقدماتی فلاتر (Flutter) — به زبان ساده
• گوگل فلاتر (Flutter) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت
• ایجاد انیمیشن اسکرول در فلاتر (Flutter) — از صفر تا صد

==