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

۲۱۴ بازدید
آخرین به‌روزرسانی: ۱۲ مهر ۱۴۰۲
زمان مطالعه: ۲ دقیقه
قابلیت چند زبانی در فلاتر — به زبان ساده

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

1//saved as EN.json
2{
3  "save": "Save",
4  "cancel": "Cancel"
5}
6//saved as ID.json
7{
8  "save": "Simpan",
9  "cancel": "Batal"
10}

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

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

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

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

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

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

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

1import 'dart:convert';
2import 'package:flutter/services.dart' show rootBundle;
3class LocaleBase {
4  Map<String, dynamic> _data;
5  Future<void> load(String path) async {
6    final strJson = await rootBundle.loadString(path);
7    _data = jsonDecode(strJson);
8    initAll();
9  }
10  Localemain _main;
11  Localemain get main => _main;
12  void initAll() {
13    _main = Localemain(Map<String, String>.from(_data['main']));
14  }
15}
16class Localemain {
17  final Map<String, String> _data;
18  Localemain(this._data);
19  String get sample => _data["sample"];
20  String get save => _data["save"];
21  String get cancel => _data["cancel"];
22}

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

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

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

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

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

1class LocDelegate extends LocalizationsDelegate<LocaleBase> {
2  const LocDelegate();
3  final idMap = const {'en': 'locales/EN.json', 'id': 'locales/ID.json'};
4
5  @override
6  bool isSupported(Locale locale) => ['en', 'id'].contains(locale.languageCode);
7
8  @override
9  Future<LocaleBase> load(Locale locale) async {
10    var lang = 'en';
11    if (isSupported(locale)) lang = locale.languageCode;
12    final loc = LocaleBase();
13    await loc.load(idMap[lang]);
14    return loc;
15  }
16
17  @override
18  bool shouldReload(LocDelegate old) => false;
19}

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

1  localizationsDelegates: [
2    const LocDelegate(),
3    GlobalMaterialLocalizations.delegate,
4    GlobalWidgetsLocalizations.delegate,
5  ],

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

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

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

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

==

بر اساس رای ۲ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
apinprastya
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *