ترجمه اپلیکیشن ها در فلاتر

امروزه برنامه های تلفن همراه توسط مشتریان کشورهای مختلف مورد استفاده قرار می گیرد و در نتیجه ، برنامه ها برای نمایش محتوا به زبان های مختلف مورد نیاز هستند. فعال کردن یک برنامه کاربردی برای کار با چندین زبان ، Internationalizing the application. یا بین المللی کردن برنامه نام دارد.

برای اینکه یک برنامه کاربردی به زبان های مختلف کار کند ، ابتدا باید محلی فعلی سیستمی را که برنامه در آن اجرا می شود پیدا کند و سپس به محتوای آن در آن مکان خاص نیاز داشته باشد ، و این فرایند را محلی سازی (Localization.) می نامند.

فریمورک فلاتر سه کلاس پایه را برای localization و extensive utility classes برگرفته از کلاسهای پایه برای بومی سازی یک برنامه فراهم می کند.

مقالات

کلاس های پایه به شرح صورت است –

Locale – Locale کلاس است که برای شناسایی زبان کاربر استفاده می شود. به عنوان مثال ، en-us انگلیسی آمریکایی را مشخص می کند .

Locale en_locale = Locale('en', 'US')

1	Locale en_locale = Locale('en', 'US')

در اینجا ، اولین آرگومان کد زبان و دومین آرگومان کد کشور است. نمونه دیگر ایجاد Argentina Spanish (es-ar) به صورت زیر است –

Locale es_locale = Locale('es', 'AR')

1	Locale es_locale = Locale('es', 'AR')

Localizations – محلی سازی یک ویجت generic است که برای تنظیم Locale و منابع localized شده فرزند مورد استفاده قرار می گیرد.

class CustomLocalizations { 
   CustomLocalizations(this.locale); 
   final Locale locale; 
   static CustomLocalizations of(BuildContext context) { 
      return Localizations.of&lt;CustomLocalizations&gt;(context, CustomLocalizations); 
   } 
   static Map&lt;String, Map&lt;String, String&gt;&gt; _resources = {
      'en': {
         'title': 'Demo', 
         'message': 'Hello World' 
      }, 
      'es': {
         'title': 'Manifestación', 
         'message': 'Hola Mundo', 
      }, 
   }; 
   String get title { 
      return _resources[locale.languageCode]['title']; 
   }
   String get message { 
      return _resources[locale.languageCode]['message']; 
   } 
}

class CustomLocalizations {

CustomLocalizations(this.locale);

final Locale locale;

static CustomLocalizations of(BuildContext context) {

return Localizations.of<CustomLocalizations>(context, CustomLocalizations);

}

static Map<String, Map<String, String>> _resources = {

'en': {

'title': 'Demo',

'message': 'Hello World'

'es': {

'title': 'Manifestación',

'message': 'Hola Mundo',

};

String get title {

return _resources[locale.languageCode]['title'];

}

String get message {

return _resources[locale.languageCode]['message'];

}

در اینجا ، CustomLocalizations یک کلاس سفارشی جدید است که به طور خاص برای به دست آوردن محتوای محلی (title و massage) محلی برای ویجت ایجاد شده است. متد از کلاس Localizations برای بازگشت به کلاس CustomLocalizations جدید استفاده می کند.
LocalizationsDelegate <T> – LocalizationsDelegate <T> یک کلاس factory است که از طریق آن ویجت Localizations دانلود می شود. این دارای سه متد over-ridable
- isSupported – locale را می پذیرد و آیا locale مشخص پشتیبانی می شود یا نه.

@override 
bool isSupported(Locale locale) =&gt; ['en', 'es'].contains(locale.languageCode);

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

در اینجا ، delegate فقط برای en و es محلی local کار می کند.

load – یک locale را قبول می کند و شروع به بارگیری منابع مربوط به locale مشخص می کند.

@override 
Future&lt;CustomLocalizations&gt; load(Locale locale) { 
   return SynchronousFuture&lt;CustomLocalizations&gt;(CustomLocalizations(locale)); 
}

@override

Future<CustomLocalizations> load(Locale locale) {

return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));

}

در اینجا ، متد load متد CustomLocalizations را برمی گرداند. CustomLocalizations برگشتی می تواند برای به دست آوردن مقادیر title و message به دو زبان انگلیسی و اسپانیایی استفاده شود

shouldReload – مشخص می کند که reloading – CustomLocalizations هنگام بازسازی ویجت Localizations آن ضروری است.

@override 
bool shouldReload(CustomLocalizationsDelegate old) =&gt; false;

1 2	@override bool shouldReload(CustomLocalizationsDelegate old) => false;

کد کامل CustomLocalizationDelegate به صورت زیر است –

class CustomLocalizationsDelegate extends 
LocalizationsDelegate&lt;CustomLocalizations&gt; { 
   const CustomLocalizationsDelegate(); 
   @override 
   bool isSupported(Locale locale) =&gt; ['en', 'es'].contains(locale.languageCode);
   @override 
   Future&lt;CustomLocalizations&gt; load(Locale locale) { 
      return SynchronousFuture&lt;CustomLocalizations&gt;(CustomLocalizations(locale));
   } 
   @override bool shouldReload(CustomLocalizationsDelegate old) =&gt; false; 
}

class CustomLocalizationsDelegate extends

LocalizationsDelegate<CustomLocalizations> {

const CustomLocalizationsDelegate();

@override

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

@override

Future<CustomLocalizations> load(Locale locale) {

return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));

}

@override bool shouldReload(CustomLocalizationsDelegate old) => false;

}

به طور کلی ، برنامه های Flutter بر اساس root level widget یا دو ویجت سطح ریشه ، MaterialApp یا WidgetsApp طراحی شده اند. فلوتر محلی سازی (localization ) آماده برای هر دو ویجت را فراهم می کند و آنها MaterialLocalizations و WidgetsLocaliations هستند. علاوه بر این ، فلاتر همچنین delegate ها را برای بارگذاری MaterialLocalizations و WidgetsLocaliations فراهم می کند و آنها به ترتیب GlobalMaterialLocalizations.delegate و GlobalWidgetsLocalizations.delegate هستند.

بگذارید یک برنامه کاربردی ساده بین المللی را برای آزمایش و درک مفهوم بهتر ایجاد کنیم.

یک برنامه جدید فلاتر ، flutter_localization_app ایجاد کنید.
فلوتر بین المللی سازی را با استفاده از بسته منحصر به فرد فلاتر به نام ، flutter_localizations پشتیبانی می کند. ایده این است که محتوای محلی شده را از SDK main جدا کنید. pubspec.yaml را باز کنید و کد زیر را فعال کنید internationalization package فعال کنید –

dependencies: 
   flutter: 
      sdk: flutter 
   flutter_localizations:
      sdk: flutter

dependencies:

flutter:

sdk: flutter

flutter_localizations:

sdk: flutter

Android Studio هشدار زیر را درباره بروزرسانی pubspec.yaml نشان می دهد.

بر روی گزینه Get dependencies کلیک کنید. Android Studio پکیج را از اینترنت دریافت کرده و آن را برای برنامه به درستی پیکربندی می کند.
پکیج flutter_localizations را در main.dart به صورت زیر import کنید –

import 'package:flutter_localizations/flutter_localizations.dart'; 
import 'package:flutter/foundation.dart' show SynchronousFuture;

1 2	import 'package:flutter_localizations/flutter_localizations.dart'; import 'package:flutter/foundation.dart' show SynchronousFuture;

در اینجا ، هدف از SynchronousFuture بارگذاری محلی سازی های سفارشی به طور همزمان (load the custom localizations synchronously. ) است.
localizations سفارشی و delegate مربوطه را مطابق آنچه در زیر مشخص شده است ایجاد کنید –

class CustomLocalizations { 
   CustomLocalizations(this.locale); 
   final Locale locale; 
   static CustomLocalizations of(BuildContext context) {
      return Localizations.of&lt;CustomLocalizations&gt;(context, CustomLocalizations); 
   }
   static Map&lt;String, Map&lt;String, String&gt;&gt; _resources = {
      'en': {
         'title': 'Demo', 
         'message': 'Hello World' 
      }, 
      'es': { 
         'title': 'Manifestación', 
         'message': 'Hola Mundo', 
      }, 
   }; 
   String get title { 
      return _resources[locale.languageCode]['title']; 
   } 
   String get message { 
      return _resources[locale.languageCode]['message']; 
   } 
}
class CustomLocalizationsDelegate extends
LocalizationsDelegate&lt;CustomLocalizations&gt; {
   const CustomLocalizationsDelegate();
   
   @override 
   bool isSupported(Locale locale) =&gt; ['en', 'es'].contains(locale.languageCode); 
   
   @override 
   Future&lt;CustomLocalizations&gt; load(Locale locale) { 
      return SynchronousFuture&lt;CustomLocalizations&gt;(CustomLocalizations(locale)); 
   } 
   @override bool shouldReload(CustomLocalizationsDelegate old) =&gt; false; 
}

class CustomLocalizations {

CustomLocalizations(this.locale);

final Locale locale;

static CustomLocalizations of(BuildContext context) {

return Localizations.of<CustomLocalizations>(context, CustomLocalizations);

}

static Map<String, Map<String, String>> _resources = {

'en': {

'title': 'Demo',

'message': 'Hello World'

'es': {

'title': 'Manifestación',

'message': 'Hola Mundo',

};

String get title {

return _resources[locale.languageCode]['title'];

}

String get message {

return _resources[locale.languageCode]['message'];

}

class CustomLocalizationsDelegate extends

LocalizationsDelegate<CustomLocalizations> {

const CustomLocalizationsDelegate();

@override

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

@override

Future<CustomLocalizations> load(Locale locale) {

return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));

}

@override bool shouldReload(CustomLocalizationsDelegate old) => false;

}

در اینجا ، CustomLocalizations برای پشتیبانی از محلی سازی title و message در برنامه ایجاد می شود و CustomLocalizationsDelegate برای بارگذاری CustomLocalizations استفاده می شود.
delegate ها را برای MaterialApp ، WidgetsApp و CustomLocalization با استفاده از خصوصیات MaterialApp ، localizationsDelegates supportedLocales اضافه کنید ، همانطور که در زیر مشخص شده است –

localizationsDelegates: [
   const CustomLocalizationsDelegate(),   
   GlobalMaterialLocalizations.delegate, 
   GlobalWidgetsLocalizations.delegate, 
], 
supportedLocales: [
   const Locale('en', ''),
   const Locale('es', ''), 
],

localizationsDelegates: [

const CustomLocalizationsDelegate(),

GlobalMaterialLocalizations.delegate,

GlobalWidgetsLocalizations.delegate,

supportedLocales: [

const Locale('en', ''),

const Locale('es', ''),

برای بدست آوردن مقدار (localized ) محلی شده title و massage و استفاده از آن در مکان مناسب مطابق شکل زیر ، از متد CustomLocalizations استفاده کنید –

class MyHomePage extends StatelessWidget {
   MyHomePage({Key key, this.title}) : super(key: key); 
   final String title; 
   @override 
   Widget build(BuildContext context) {
      return Scaffold(
         appBar: AppBar(title: Text(CustomLocalizations .of(context) .title), ), 
         body: Center(
            child: Column(
               mainAxisAlignment: MainAxisAlignment.center, 
               children: &lt;Widget&gt;[ 
                  Text( CustomLocalizations .of(context) .message, ), 
               ], 
            ), 
         ),
      );
   }
}

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text(CustomLocalizations .of(context) .title), ),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

Text( CustomLocalizations .of(context) .message, ),

);

}

در اینجا ، ما کلاس MyHomePage را از StatefulWidget به StatelessWidget به دلایل ساده تغییر داده ایم و از CustomLocalizations برای دریافت title و massage استفاده کرده ایم.
برنامه را کامپایل و اجرا کنید. برنامه محتوای آن به زبان انگلیسی نشان داده می شود.
برنامه را ببندید برو به Settings → System → Languages and Input → Languages*. * .
روی Add a language کلیک کنید و اسپانیایی را انتخاب کنید. با این کار زبان اسپانیایی نصب می شود و سپس آن را به عنوان یکی از گزینه ها لیست می کند.
اسپانیایی را انتخاب کنید و آن را بالاتر از انگلیسی حرکت دهید. این زبان اسپانیایی را به عنوان زبان اول تعیین می کند و همه چیز به متن اسپانیایی تغییر می یابد.
اکنون برنامه بین المللی سازی را مجدداً راه اندازی کنید و title و massage را به زبان اسپانیایی مشاهده خواهید کرد.
ما می توانیم با حرکت دادن گزینه انگلیسی بالاتر از گزینه اسپانیایی در تنظیمات ، زبان را به انگلیسی برگردانیم.
نتیجه برنامه (به زبان اسپانیایی) در تصویر زیر نمایش داده شده.

استفاده از پکیج Intl در فلاتر

فلوتر پکیج ساده ای را برای ساده سازی توسعه برنامه های localized بصورت تلفن همراه ارائه می دهد. بسته Intl متد ها و ابزارهای خاصی برای تولید پیام های خاص به صورت نیمه خودکار در اختیار شما قرار می دهد.

بگذارید با استفاده از بسته Intl یک برنامه localized جدید ایجاد کنیم و مفهوم آن را بهتر درک کنیم.

flutter_intl_app یک برنامه جدید flutter ایجاد کنید.
pubspec.yaml را باز کرده و جزئیات پکیج را اضافه کنید.

dependencies: 
   flutter: 
      sdk: flutter 
   flutter_localizations: 
      sdk: flutter 
   intl: ^0.15.7 
   intl_translation: ^0.17.3

dependencies:

flutter:

sdk: flutter

flutter_localizations:

sdk: flutter

intl: ^0.15.7

intl_translation: ^0.17.3

ک استودیوی اندروید همانطور که در زیر نشان داده شده است هشدار را نمایش می دهد و pubspec.yaml را به روز می کند.

بر روی گزینه Get dependencies کلیک کنید. اندروید استدیو پکیج را از اینترنت دریافت کرده و آن را برای برنامه به درستی پیکربندی می کند.
از نمونه قبلی ، flutter_internationalization_app ، main.dart را کپی کنید.
پکیج intl را مطابق شکل زیر وارد کنید –

import 'package:intl/intl.dart';

1	import 'package:intl/intl.dart';

همانطور که در کدی که در زیر آورده شده است ، کلاس CustomLocalization را به روز کنید –

lass CustomLocalizations { 
   static Future&lt;CustomLocalizations&gt; load(Locale locale) {
      final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString(); 
      final String localeName = Intl.canonicalizedLocale(name); 
      
      return initializeMessages(localeName).then((_) {
         Intl.defaultLocale = localeName; 
         return CustomLocalizations(); 
      }); 
   } 
   static CustomLocalizations of(BuildContext context) { 
      return Localizations.of&lt;CustomLocalizations&gt;(context, CustomLocalizations); 
   } 
   String get title {
      return Intl.message( 
         'Demo', 
         name: 'title', 
         desc: 'Title for the Demo application', 
      ); 
   }
   String get message{
      return Intl.message(
         'Hello World', 
         name: 'message', 
         desc: 'Message for the Demo application', 
      ); 
   }
}
class CustomLocalizationsDelegate extends 
LocalizationsDelegate&lt;CustomLocalizations&gt; {
   const CustomLocalizationsDelegate();
   
   @override
   bool isSupported(Locale locale) =&gt; ['en', 'es'].contains(locale.languageCode); 
   @override 
   Future&lt;CustomLocalizations&gt; load(Locale locale) { 
      return CustomLocalizations.load(locale); 
   } 
   @override 
   bool shouldReload(CustomLocalizationsDelegate old) =&gt; false; 
}

lass CustomLocalizations {

static Future<CustomLocalizations> load(Locale locale) {

final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();

final String localeName = Intl.canonicalizedLocale(name);

return initializeMessages(localeName).then((_) {

Intl.defaultLocale = localeName;

return CustomLocalizations();

});

}

static CustomLocalizations of(BuildContext context) {

return Localizations.of<CustomLocalizations>(context, CustomLocalizations);

}

String get title {

return Intl.message(

'Demo',

name: 'title',

desc: 'Title for the Demo application',

);

}

String get message{

return Intl.message(

'Hello World',

name: 'message',

desc: 'Message for the Demo application',

);

}

class CustomLocalizationsDelegate extends

LocalizationsDelegate<CustomLocalizations> {

const CustomLocalizationsDelegate();

@override

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

@override

Future<CustomLocalizations> load(Locale locale) {

return CustomLocalizations.load(locale);

}

@override

bool shouldReload(CustomLocalizationsDelegate old) => false;

}

در اینجا ، ما به جای متد سفارشی ، از پکیج Intl از سه متد استفاده کرده ایم. در غیر این صورت ، مفاهیم یکسان هستند.
- Intl.canonicalizedLocale – برای بدست آوردن نام locale صحیح استفاده می شود.
- Intl.defaultLocale – برای تنظیم locale فعلی استفاده می شود
- Intl.message – برای تعریف پیام های جدید استفاده می شود.
فایل l10n/messages_all.dart را ایمپورت کنید . ما به زودی این پرونده را تولید خواهیم کرد

import 'l10n/messages_all.dart';

1	import 'l10n/messages_all.dart';

اکنون پوشه ای را ایجاد کنید ، lib / l10n
یک command سریع را باز کنید و به فهرست برنامه root (جایی که pubspec.yaml در دسترس است) بروید و دستور زیر را اجرا کنید –

flutter packages pub run intl_translation:extract_to_arb --output-
   dir=lib/l10n lib/main.dart

1 2	flutter packages pub run intl_translation:extract_to_arb --output- dir=lib/l10n lib/main.dart

در اینجا ، این فایل ، intl_message.arb ، pattern برای ایجاد پیام در محل های مختلف تولید می کند. محتوای پرونده به صورت زیر است –

{
   "@@last_modified": "2019-04-19T02:04:09.627551", 
   "title": "Demo", 
   "@title": {
      "description": "Title for the Demo application", 
      "type": "text", 
      "placeholders": {} 
   }, 
   "message": "Hello World", 
   "@message": {
      "description": "Message for the Demo 
      application", 
      "type": "text", 
      "placeholders": {} 
   }
}

{

"@@last_modified": "2019-04-19T02:04:09.627551",

"title": "Demo",

"@title": {

"description": "Title for the Demo application",

"type": "text",

"placeholders": {}

"message": "Hello World",

"@message": {

"description": "Message for the Demo

application",

"type": "text",

"placeholders": {}

}

intl_message.arb را کپی کرده و فایل جدیدی را ایجاد کنید ، intl_en.arb.
intl_message.arb را کپی کرده و فایل جدید ، intl_es.arb ایجاد کنید و مطابق شکل زیر محتوا را به زبان اسپانیایی تغییر دهید –

{
   "@@last_modified": "2019-04-19T02:04:09.627551",  
   "title": "Manifestación", 
   "@title": {
      "description": "Title for the Demo application", 
      "type": "text", 
      "placeholders": {} 
   },
   "message": "Hola Mundo",
   "@message": {
      "description": "Message for the Demo application", 
      "type": "text", 
      "placeholders": {} 
   } 
}

{

"@@last_modified": "2019-04-19T02:04:09.627551",

"title": "Manifestación",

"@title": {

"description": "Title for the Demo application",

"type": "text",

"placeholders": {}

"message": "Hola Mundo",

"@message": {

"description": "Message for the Demo application",

"type": "text",

"placeholders": {}

}

اکنون ، دستور زیر را برای ایجاد فایل پیام نهایی ، messages_all.dart اجرا کنید.

flutter packages pub run intl_translation:generate_from_arb 
--output-dir=lib\l10n --no-use-deferred-loading 
lib\main.dart lib\l10n\intl_en.arb lib\l10n\intl_es.arb

flutter packages pub run intl_translation:generate_from_arb

--output-dir=lib\l10n --no-use-deferred-loading

lib\main.dart lib\l10n\intl_en.arb lib\l10n\intl_es.arb

برنامه را کامپایل و اجرا کنید. این برنامه مشابه برنامه فوق ، flutter_localization_app عمل خواهد کرد.

5/5 - (1 امتیاز)

ترجمه اپلیکیشن ها در فلاتر – Flutter

کلاس های پایه به شرح صورت است –

استفاده از پکیج Intl در فلاتر

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

کلاس های پایه به شرح صورت است –

استفاده از پکیج Intl در فلاتر

مطالب زیر را حتما مطالعه کنید

آموزش فلاتر – Flutter

ابزار توسعه فلاتر – Flutter

تبدیل اپلیکیشن فلاتر به اندروید و IOS

تست کردن در فلاتر – Flutter testing

کار با دیتابیس در فلاتر -Flutter

REST API در فلاتر – Flutter

دیدگاهتان را بنویسید لغو پاسخ