LanguageSwitcher
Giriş
LanguageSwitcher widget'ı, Nylo Website projelerinizde dil değiştirmeyi kolayca yönetmenizi sağlar. /lang dizininizdeki mevcut dilleri otomatik olarak algılar ve kullanıcıya gösterir.
LanguageSwitcher ne yapar?
/langdizininizdeki mevcut dilleri görüntüler- Kullanıcı bir dil seçtiğinde uygulama dilini değiştirir
- Seçilen dili uygulama yeniden başlatmalarında korur
- Dil değiştiğinde arayüzü otomatik olarak günceller
Not: Uygulamanız henüz yerelleştirilmediyse, bu widget'ı kullanmadan önce Yerelleştirme dokümantasyonunda nasıl yapılacağını öğrenin.
Açılır Menü Widget'ı
LanguageSwitcher kullanmanın en basit yolu, uygulama çubuğunuzda bir açılır menü olarak kullanmaktır:
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Settings"),
actions: [
LanguageSwitcher(), // Add to the app bar
],
),
body: Center(
child: Text("Hello World".tr()),
),
);
}
Kullanıcı açılır menüye dokunduğunda, mevcut dillerin listesini görecektir. Bir dil seçtikten sonra uygulama otomatik olarak değişecek ve arayüz güncellenecektir.
Alt Sayfa Modalı
Dilleri bir alt sayfa modalında da görüntüleyebilirsiniz:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: MaterialButton(
child: Text("Change Language"),
onPressed: () {
LanguageSwitcher.showBottomModal(context);
},
),
),
);
}
Alt modal, şu anda seçili dilin yanında bir onay işareti ile dillerin listesini görüntüler.
Modal Yüksekliğini Özelleştirme
LanguageSwitcher.showBottomModal(
context,
height: 300, // Custom height
);
Özel Açılır Menü Oluşturucu
Her dil seçeneğinin açılır menüde nasıl göründüğünü özelleştirin:
LanguageSwitcher(
dropdownBuilder: (Map<String, dynamic> language) {
return Row(
children: [
Icon(Icons.language),
SizedBox(width: 8),
Text(language['name']), // e.g., "English"
// language['locale'] contains the locale code, e.g., "en"
],
);
},
)
Dil Değişikliklerini İşleme
LanguageSwitcher(
onLanguageChange: (Map<String, dynamic> language) {
print('Language changed to: ${language['name']}');
// Perform additional actions when language changes
},
)
Parametreler
| Parametre | Tür | Varsayılan | Açıklama |
|---|---|---|---|
icon |
Widget? |
- | Açılır menü düğmesi için özel simge |
iconEnabledColor |
Color? |
- | Açılır menü simgesinin rengi |
iconSize |
double |
24 |
Açılır menü simgesinin boyutu |
dropdownBgColor |
Color? |
- | Açılır menünün arka plan rengi |
hint |
Widget? |
- | Dil seçilmediğinde ipucu widget'ı |
itemHeight |
double |
kMinInteractiveDimension |
Her açılır menü öğesinin yüksekliği |
elevation |
int |
8 |
Açılır menünün yükseltisi |
padding |
EdgeInsetsGeometry? |
- | Açılır menü çevresindeki dolgu |
borderRadius |
BorderRadius? |
- | Açılır menünün kenarlık yarıçapı |
textStyle |
TextStyle? |
- | Açılır menü öğeleri için metin stili |
langPath |
String |
'lang' |
Varlıklardaki dil dosyalarının yolu |
dropdownBuilder |
Function(Map<String, dynamic>)? |
- | Açılır menü öğeleri için özel oluşturucu |
dropdownAlignment |
AlignmentGeometry |
AlignmentDirectional.centerStart |
Açılır menü öğelerinin hizalaması |
dropdownOnTap |
Function()? |
- | Açılır menü öğesine dokunulduğunda callback |
onTap |
Function()? |
- | Açılır menü düğmesine dokunulduğunda callback |
onLanguageChange |
Function(Map<String, dynamic>)? |
- | Dil değiştirildiğinde callback |
Statik Metotlar
Mevcut Dili Alma
Şu anda seçili dili alın:
Map<String, dynamic>? lang = await LanguageSwitcher.currentLanguage();
// Returns: {"en": "English"} or null if not set
Dil Kaydetme
Bir dil tercihini manuel olarak kaydedin:
await LanguageSwitcher.storeLanguage(
object: {"fr": "French"},
);
Dili Temizleme
Kaydedilen dil tercihini kaldırın:
await LanguageSwitcher.clearLanguage();
Dil Verilerini Alma
Bir yerel ayar kodundan dil bilgisi alın:
Map<String, String>? langData = LanguageSwitcher.getLanguageData("en");
// Returns: {"en": "English"}
Map<String, String>? langData = LanguageSwitcher.getLanguageData("fr_CA");
// Returns: {"fr_CA": "French (Canada)"}
Dil Listesini Alma
/lang dizinindeki tüm mevcut dilleri alın:
List<Map<String, String>> languages = await LanguageSwitcher.getLanguageList();
// Returns: [{"en": "English"}, {"es": "Spanish"}, ...]
Alt Modalı Gösterme
Dil seçim modalını görüntüleyin:
await LanguageSwitcher.showBottomModal(context);
// With custom height
await LanguageSwitcher.showBottomModal(context, height: 400);
Desteklenen Yerel Ayarlar
LanguageSwitcher widget'ı, okunabilir adlarla yüzlerce yerel ayar kodunu destekler. Bazı örnekler:
| Yerel Ayar Kodu | Dil Adı |
|---|---|
en |
English |
en_US |
English (United States) |
en_GB |
English (United Kingdom) |
es |
Spanish |
fr |
French |
de |
German |
zh |
Chinese |
zh_Hans |
Chinese (Simplified) |
ja |
Japanese |
ko |
Korean |
ar |
Arabic |
hi |
Hindi |
pt |
Portuguese |
ru |
Russian |
Tam liste, çoğu dil için bölgesel varyantları içerir.