Flutter - Uluslararasılaşma
Günümüzde mobil uygulamalar farklı ülkelerden müşteriler tarafından kullanılmakta ve sonuç olarak uygulamaların içeriği farklı dillerde göstermesi gerekmektedir. Bir uygulamanın birden çok dilde çalışmasını sağlamaya, uygulamayı uluslararasılaştırma adı verilir.
Bir uygulamanın farklı dillerde çalışması için, önce uygulamanın çalıştığı sistemin mevcut yerel ayarını bulması ve ardından içeriğini belirli bir yerel ayarda göstermesi gerekir ve bu işleme Yerelleştirme adı verilir.
Flutter çerçevesi, yerelleştirme için üç temel sınıf ve bir uygulamayı yerelleştirmek için temel sınıflardan türetilen kapsamlı yardımcı sınıflar sağlar.
Temel sınıflar aşağıdaki gibidir -
Yerel Ayar - Yerel, kullanıcının dilini tanımlamak için kullanılan bir sınıftır. Örneğin, en-us Amerikan İngilizcesini tanımlar ve olarak oluşturulabilir.
Locale en_locale = Locale('en', 'US')Burada, birinci argüman dil kodu ve ikinci argüman ülke kodudur. Arjantin İspanyolca (es-ar) yerel ayarı oluşturmanın bir başka örneği de aşağıdaki gibidir -
Locale es_locale = Locale('es', 'AR')Yerelleştirmeler - Yerelleştirmeler, Yerel Ayarı ve alt öğesinin yerelleştirilmiş kaynaklarını ayarlamak için kullanılan genel bir pencere öğesidir.
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'];
}
}Burada, CustomLocalizations, widget için belirli yerelleştirilmiş içeriği (başlık ve mesaj) almak için özel olarak oluşturulmuş yeni bir özel sınıftır. of method, yeni CustomLocalizations sınıfını döndürmek için Localizations sınıfını kullanır.
LocalizationsDelegate <T> - LocalizationsDelegate <T>, Localizations widget'ının yüklendiği bir fabrika sınıfıdır. Üç adet aşırı kullanılabilir yöntemi vardır -
isSupported - Bir yerel ayarı kabul eder ve belirtilen yerel ayarın desteklenip desteklenmediğini döndürür.
@override
bool isSupported(Locale locale) => ['en', 'es'].contains(locale.languageCode);load - Bir yerel ayarı kabul eder ve belirtilen yerel ayar için kaynakları yüklemeye başlar.
Burada, delege yalnızca en ve es yerel ayarları için çalışır.
@override
Future<CustomLocalizations> load(Locale locale) {
return SynchronousFuture<CustomLocalizations>(CustomLocalizations(locale));
}shouldReload - Yerelleştirmeler pencere öğesi yeniden oluşturulurken Özel Yerelleştirmelerin yeniden yüklenmesinin gerekli olup olmadığını belirtir.
Burada, yükleme yöntemi CustomLocalizations döndürür. Döndürülen CustomLocalizations, hem İngilizce hem de İspanyolca olarak başlık ve mesaj değerlerini almak için kullanılabilir
@override
bool shouldReload(CustomLocalizationsDelegate old) => false;CustomLocalizationDelegate'in tam kodu aşağıdaki gibidir -
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;
}Genel olarak, Flutter uygulamaları, MaterialApp veya WidgetsApp olmak üzere iki kök düzeyi parçacığa dayanır. Flutter, her iki widget için de hazır yerelleştirme sağlar ve bunlar MaterialLocalizations ve WidgetsLocaliations'dır. Ayrıca, Flutter delegelerin MaterialLocalizations ve WidgetsLocaliations yüklemelerini sağlar ve bunlar sırasıyla GlobalMaterialLocalizations.delegate ve GlobalWidgetsLocalizations.delegate'dir.
Kavramı test etmek ve anlamak için basit bir uluslararasılaştırma etkin uygulama oluşturalım.
Yeni bir flutter uygulaması oluşturun, flutter_localization_app.
Flutter, özel flutter paketi flutter_localizations kullanarak uluslararasılaştırmayı destekler. Buradaki fikir, yerelleştirilmiş içeriği ana SDK'dan ayırmaktır. Pubspec.yaml dosyasını açın ve uluslararasılaştırma paketini etkinleştirmek için aşağıdaki kodu ekleyin -
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutterAndroid stüdyo, pubspec.yaml dosyasının güncellendiğine dair aşağıdaki uyarıyı görüntüler.
Bağımlılıkları al seçeneğini tıklayın. Android stüdyosu paketi İnternet'ten alacak ve uygulama için uygun şekilde yapılandıracaktır.
Flutter_localizations paketini main.dart'ta aşağıdaki gibi içe aktarın -
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/foundation.dart' show SynchronousFuture;Burada, SynchronousFuture'un amacı özel yerelleştirmeleri eşzamanlı olarak yüklemektir.
Aşağıda belirtildiği gibi özel bir yerelleştirme ve ilgili temsilcisini oluşturun -
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;
}Burada, uygulamadaki başlık ve mesaj için yerelleştirmeyi desteklemek için CustomLocalizations oluşturulur ve CustomLocalizationsDelegate, CustomLocalizations'ı yüklemek için kullanılır.
MaterialApp özelliklerini, localizationsDelegates'i ve supportedLocales'i aşağıda belirtildiği gibi kullanarak MaterialApp, WidgetsApp ve CustomLocalization için temsilciler ekleyin -
localizationsDelegates: [
const CustomLocalizationsDelegate(),
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
supportedLocales: [
const Locale('en', ''),
const Locale('es', ''),
],Başlık ve mesajın yerelleştirilmiş değerini almak ve aşağıda belirtildiği gibi uygun yerde kullanmak için CustomLocalizations yöntemini kullanın -
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, ),
],
),
),
);
}
}Burada, basitlik nedeniyle MyHomePage sınıfını StatefulWidget'ten StatelessWidget'e değiştirdik ve başlık ve mesaj almak için CustomLocalizations'ı kullandık.
Uygulamayı derleyin ve çalıştırın. Uygulama, içeriğini İngilizce olarak gösterecektir.
Uygulamayı kapatın. GitSettings → System → Languages and Input → Languages*.
Dil seçeneği ekle'yi tıklayın ve İspanyolca'yı seçin. Bu, İspanyolca dilini yükleyecek ve ardından seçeneklerden biri olarak listeleyecektir.
İspanyolca'yı seçin ve İngilizcenin üzerine taşıyın. Bu, İspanyolca olarak ilk dil olarak ayarlanacak ve her şey İspanyolca metne dönüştürülecektir.
Şimdi uluslararasılaştırma uygulamasını yeniden başlatın ve başlığı ve mesajı İspanyolca dilinde göreceksiniz.
Ayarda İngilizce seçeneğini İspanyolca seçeneğinin üzerine getirerek dili İngilizceye döndürebiliriz.
Başvurunun sonucu (İspanyolca) aşağıda verilen ekran görüntüsünde gösterilmektedir -
Uluslararası Paketi kullanma
Flutter, yerelleştirilmiş mobil uygulamanın geliştirilmesini daha da basitleştirmek için uluslararası paket sağlar. intl paketi, dile özgü iletileri yarı otomatik olarak oluşturmak için özel yöntemler ve araçlar sağlar.
Intl paketini kullanarak yeni bir yerelleştirilmiş uygulama oluşturalım ve kavramı anlayalım.
Yeni bir flutter uygulaması oluşturun, flutter_intl_app.
Pubspec.yaml dosyasını açın ve paket ayrıntılarını ekleyin.
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
intl: ^0.15.7
intl_translation: ^0.17.3Android studio, pubspec.yaml dosyasının güncellendiğini bildiren uyarıyı aşağıda gösterildiği gibi görüntüleyecektir.
Bağımlılıkları al seçeneğini tıklayın. Android stüdyosu paketi İnternet'ten alacak ve uygulama için uygun şekilde yapılandıracaktır.
Önceki örnekten main.dart'ı kopyalayın, flutter_internationalization_app.
Uluslararası paketi aşağıda gösterildiği gibi içe aktarın -
import 'package:intl/intl.dart';CustomLocalization sınıfını aşağıda verilen kodda gösterildiği gibi güncelleyin -
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;
}Burada, özel yöntemler yerine intl paketinden üç yöntem kullandık. Aksi takdirde kavramlar aynıdır.
Intl.canonicalizedLocale - Doğru yerel adı almak için kullanılır.
Intl.defaultLocale - Mevcut yerel ayarı ayarlamak için kullanılır
Intl.message - Yeni mesajları tanımlamak için kullanılır.
ithalat l10n/messages_all.dartdosya. Bu dosyayı kısa süre içinde oluşturacağız
import 'l10n/messages_all.dart';Şimdi bir klasör oluşturun, lib / l10n
Bir komut istemi açın ve uygulama kök dizinine gidin (pubspec.yaml'nin bulunduğu yer) ve aşağıdaki komutu çalıştırın -
flutter packages pub run intl_translation:extract_to_arb --output-
dir=lib/l10n lib/main.dartBurada komut, intl_message.arb dosyası, farklı yerel ayarda mesaj oluşturmak için bir şablon oluşturacaktır. Dosyanın içeriği aşağıdaki gibidir -
{
"@@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": {}
}
}İntl_message.arb dosyasını kopyalayın ve intl_en.arb adında yeni bir dosya oluşturun.
İntl_message.arb dosyasını kopyalayın ve yeni dosya, intl_es.arb oluşturun ve içeriği aşağıda gösterildiği gibi İspanyolca diline değiştirin -
{
"@@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": {}
}
}Şimdi, son mesaj dosyası olan messages_all.dart'ı oluşturmak için aşağıdaki komutu çalıştırın.
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.arbUygulamayı derleyin ve çalıştırın. Yukarıdaki uygulamaya benzer şekilde çalışacaktır, flutter_localization_app.