स्पंदन - अंतर्राष्ट्रीयकरण
आजकल, मोबाइल एप्लिकेशन विभिन्न देशों के ग्राहकों द्वारा उपयोग किए जाते हैं और परिणामस्वरूप, विभिन्न भाषाओं में सामग्री प्रदर्शित करने के लिए अनुप्रयोगों की आवश्यकता होती है। कई भाषाओं में काम करने के लिए किसी एप्लिकेशन को सक्षम करना एप्लीकेशन को अंतर्राष्ट्रीय करना कहा जाता है।
किसी एप्लिकेशन को विभिन्न भाषाओं में काम करने के लिए, उसे पहले उस सिस्टम के वर्तमान लोकेल का पता लगाना चाहिए जिसमें एप्लिकेशन चल रहा है और फिर उसे उस विशेष लोकेल में सामग्री दिखाने की आवश्यकता है, और इस प्रक्रिया को स्थानीयकरण कहा जाता है।
स्पंदन ढांचा स्थानीयकरण के लिए तीन आधार कक्षाएं प्रदान करता है और एक आवेदन को स्थानीय बनाने के लिए आधार कक्षाओं से प्राप्त व्यापक उपयोगिता वर्ग।
आधार वर्ग इस प्रकार हैं -
लोकेल - लोकेल एक ऐसा वर्ग है जिसका उपयोग उपयोगकर्ता की भाषा को पहचानने के लिए किया जाता है। उदाहरण के लिए, en-us अमेरिकी अंग्रेजी की पहचान करता है और इसे बनाया जा सकता है।
Locale en_locale = Locale('en', 'US')
यहां, पहला तर्क भाषा कोड है और दूसरा तर्क देश कोड है। अर्जेंटीना स्पैनिश (ईएस-ए.आर.) स्थान बनाने का एक अन्य उदाहरण इस प्रकार है -
Locale es_locale = Locale('es', 'AR')
स्थानीयकरण - स्थानीयकरण एक सामान्य विजेट है जिसका उपयोग लोकेल और उसके बच्चे के स्थानीय संसाधनों को सेट करने के लिए किया जाता है।
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'];
}
}
यहां, CustomLocalifications एक नया कस्टम वर्ग है जिसे विशेष रूप से विजेट के लिए कुछ स्थानीयकृत सामग्री (शीर्षक और संदेश) प्राप्त करने के लिए बनाया गया है। विधि नई CustomLocalifications वर्ग को वापस करने के लिए स्थानीयकरण वर्ग का उपयोग करता है।
स्थानीयकरणडेलगेट <टी> - स्थानीयकरणडेलगेट <टी> एक कारखाना वर्ग है जिसके माध्यम से स्थानीयकरण विजेट लोड किया जाता है। इसकी तीन अति-हास्यास्पद विधियाँ हैं -
isSupported - किसी स्थान को स्वीकार करता है और वापस लौटाता है कि निर्दिष्ट स्थान समर्थित है या नहीं।
@override
bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);
लोड - एक लोकेल को स्वीकार करता है और निर्दिष्ट लोकेल के लिए संसाधनों को लोड करना शुरू करता है।
यहाँ, प्रतिनिधि केवल en और es लोकेल के लिए काम करता है।
@override
Future<CustomLocalizations> load(Locale locale) {
return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
}
ShouldReload - निर्दिष्ट करता है कि क्या CustomLocalifications का फिर से लोड करना आवश्यक है जब इसके स्थानीयकरण विजेट का पुनर्निर्माण किया जाता है।
यहाँ, लोड विधि CustomLocalifications देता है। लौटे CustomLocalifications अंग्रेजी और स्पेनिश दोनों में शीर्षक और संदेश के मूल्यों को प्राप्त करने के लिए इस्तेमाल किया जा सकता है
@override
bool shouldReload(CustomLocalizationsDelegate old) => false;
CustomLocalizationDelegate का पूरा कोड इस प्रकार है -
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;
}
सामान्य तौर पर, फ़्लटर एप्लिकेशन दो रूट लेवल विजेट, मटेरियलएप या विजेट्सऐप पर आधारित होते हैं। स्पंदन दोनों विगेट्स के लिए तैयार किए गए स्थानीयकरण प्रदान करता है और वे मटेरियलोकलाइजेशन और विजेट्सलोकेशन हैं। इसके अलावा, फ़्लटर भी MaterialLocalifications और WidLLocaliations लोड करने के लिए प्रतिनिधियों को प्रदान करता है और वे क्रमशः GlobalMaterialLocalifications.delegate और GlobalWidgetsLocalifications.delegate हैं।
आइए हम अवधारणा का परीक्षण करने और समझने के लिए एक सरल अंतर्राष्ट्रीयकरण सक्षम एप्लिकेशन बनाएं।
एक नया स्पंदन एप्लिकेशन बनाएं, flutter_localization_app।
स्पंदन विशेष स्पंदन पैकेज, flutter_localifications का उपयोग करके अंतर्राष्ट्रीयकरण का समर्थन करता है। विचार मुख्य एसडीके से स्थानीयकृत सामग्री को अलग करना है। Pubspec.yaml खोलें और अंतर्राष्ट्रीयकरण पैकेज को सक्षम करने के लिए नीचे कोड जोड़ें -
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
एंड्रॉइड स्टूडियो निम्न चेतावनी प्रदर्शित करेगा कि pubspec.yaml अपडेट किया गया है।
निर्भरता विकल्प प्राप्त करें पर क्लिक करें। एंड्रॉइड स्टूडियो को इंटरनेट से पैकेज मिलेगा और एप्लिकेशन के लिए इसे ठीक से कॉन्फ़िगर करना होगा।
आयात flutter_localifications पैकेज main.dart में निम्नानुसार है -
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;
यहाँ, SynchronousFuture का उद्देश्य कस्टम स्थानीयकरणों को सिंक्रोनाइज़ करना है।
नीचे निर्दिष्ट अनुसार एक कस्टम स्थानीयकरण और इसके संबंधित प्रतिनिधि बनाएँ -
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;
}
यहां, अनुप्रयोग में शीर्षक और संदेश के लिए स्थानीयकरण का समर्थन करने के लिए CustomLocalifications बनाया गया है और CustomLocalificationsDelegate का उपयोग CustomLocalifications को लोड करने के लिए किया जाता है।
MaterialApp, WidgetsApp और CustomLocalization के लिए प्रतिनिधियों को MaterialApp गुणों, स्थानीयकरणों और स्थानीयकरणों का उपयोग करके नीचे दिए गए अनुसार जोड़ें -
localizationsDelegates: [
const CustomLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''),
const Locale('es', ''),
],
शीर्षक और संदेश के स्थानीयकृत मूल्य प्राप्त करने के लिए और नीचे दिए गए अनुसार उपयुक्त जगह पर इसका उपयोग करने के लिए, CustomLocalifications विधि का उपयोग करें -
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 क्लास को स्टेटफुलवेट से स्टेटलेसवगेट में सरलता के कारण संशोधित किया है और शीर्षक और संदेश प्राप्त करने के लिए CustomLocalifications का उपयोग किया है।
एप्लिकेशन को संकलित करें और चलाएं। आवेदन अंग्रेजी में अपनी सामग्री दिखाएगा।
एप्लिकेशन को बंद करें। के लिए जाओSettings → System → Languages and Input → Languages*।
भाषा विकल्प जोड़ें पर क्लिक करें और स्पेनिश का चयन करें। यह स्पैनिश भाषा स्थापित करेगा और फिर विकल्प के रूप में सूचीबद्ध करेगा।
स्पेनिश का चयन करें और इसे अंग्रेजी से ऊपर ले जाएं। यह स्पैनिश के रूप में पहली भाषा के रूप में सेट हो जाएगा और सब कुछ स्पैनिश पाठ में बदल जाएगा।
अब अंतर्राष्ट्रीयकरण एप्लिकेशन को पुनः लोड करें और आप स्पेनिश भाषा में शीर्षक और संदेश देखेंगे।
हम सेटिंग में स्पेनिश विकल्प के ऊपर अंग्रेजी विकल्प को स्थानांतरित करके भाषा को अंग्रेजी में वापस ला सकते हैं।
आवेदन का परिणाम (स्पेनिश में) नीचे दिए गए स्क्रीनशॉट में दिखाया गया है -
Intl पैकेज का उपयोग करना
स्पंदन स्थानीय मोबाइल एप्लिकेशन के विकास को और सरल बनाने के लिए intl पैकेज प्रदान करता है। intl पैकेज अर्ध-ऑटो उत्पन्न करने के लिए विशेष तरीके और उपकरण प्रदान करता है भाषा विशिष्ट संदेश।
आइए हम intl पैकेज का उपयोग करके एक नया स्थानीयकृत एप्लिकेशन बनाएं और अवधारणा को समझें।
एक नया स्पंदन एप्लिकेशन बनाएं, flutter_intl_app।
Pubspec.yaml खोलें और पैकेज विवरण जोड़ें।
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.15.7
intl_translation: ^0.17.3
Android स्टूडियो अलर्ट प्रदर्शित करेगा जैसा कि नीचे बताया गया है कि pubspec.yaml अपडेट किया गया है।
निर्भरता विकल्प प्राप्त करें पर क्लिक करें। एंड्रॉइड स्टूडियो को इंटरनेट से पैकेज मिलेगा और एप्लिकेशन के लिए इसे ठीक से कॉन्फ़िगर करना होगा।
पिछले नमूने से main.dart की प्रतिलिपि करें, flutter_internationalization_app।
नीचे दिखाए अनुसार intac pacakge आयात करें -
import 'package:intl/intl.dart';
नीचे दिए गए कोड में दिखाए अनुसार CustomLocalization वर्ग को अपडेट करें -
class 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.canonicalizedLocale - सही स्थानीय नाम पाने के लिए प्रयुक्त।
Intl.defaultLocale - वर्तमान स्थान सेट करने के लिए उपयोग किया जाता है
Intl.message - नए संदेशों को परिभाषित करने के लिए उपयोग किया जाता है।
आयात l10n/messages_all.dartफ़ाइल। हम शीघ्र ही यह फ़ाइल जनरेट करेंगे
import 'l10n/messages_all.dart';
अब, एक फ़ोल्डर बनाएँ, lib / l10n
कमांड प्रॉम्प्ट खोलें और एप्लिकेशन रूट निर्देशिका (जहां pubspec.yaml उपलब्ध है) पर जाएं और निम्नलिखित कमांड चलाएं -
flutter packages pub run intl_translation:extract_to_arb --output-
dir=lib/l10n lib/main.dart
यहां, कमांड उत्पन्न करेगा, intl_message.arb फ़ाइल, विभिन्न लोकेल में संदेश बनाने के लिए एक टेम्पलेट। फ़ाइल की सामग्री इस प्रकार है -
{
"@@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": {}
}
}
अब, अंतिम संदेश फ़ाइल, 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_localization_app के समान काम करेगा।