Uluslararası Uygulamalar: Dil ve Yerel Ayarlar Desteği

Mobil uygulamanız Türkiye'de çalışıyor ama Almanya'daki kullanıcı tarih formatını farklı görmek istiyor. Dil ve yerel ayarlar desteği (localization/i18n) tam burada devreye giriyor.

Uygulamanızı birden fazla dile ve bölgeye uyarlamak sadece çeviriden ibaret değil. Para birimi, tarih formatı, saat dilimi, metin yönü (sağdan sola) gibi unsurlar da değişiyor. Örneğin Arapça uygulamalar sağdan sola yazılır; bunu göz ardı ederseniz UI bozulur.

Flutter'ın resmi yöntemi `intl` paketi ve `gen_l10n` aracını kullanmaktır.

Adım 1: Paketi ekle

1flutter pub add intl

Adım 2: Yapılandırma dosyası oluştur

`pubspec.yaml` dosyasına ekle:

1generate: true
2
3flutter_intl:
4enabled: true
5class_name: AppLocalizations
6arb_dir: lib/l10n

Adım 3: Dil dosyaları oluştur

Reklam · TEST
AdSense Test ReklamıYazı arası (gönderi içi) · Yazı arası

`lib/l10n/app_tr.arb` (Türkçe):

1{
2"greeting": "Merhaba",
3"welcome": "Hoşgeldiniz, {name}!",
4"@welcome": {
5"description": "Karşılama mesajı",
6"placeholders": {
7"name": {
8"type": "String"
9}
10}
11}
12}

`lib/l10n/app_en.arb` (İngilizce):

1{
2"greeting": "Hello",
3"welcome": "Welcome, {name}!"
4}

Adım 4: Widget'ta kullan

1import 'package:flutter_gen/gen_l10n/app_localizations.dart';
2
3class MyApp extends StatelessWidget {
5Widget build(BuildContext context) {
6return MaterialApp(
7localizationsDelegates: AppLocalizations.localizationsDelegates,
8supportedLocales: AppLocalizations.supportedLocales,
9home: HomePage(),
10);
11}
12}
13
14class HomePage extends StatelessWidget {
16Widget build(BuildContext context) {
17final localizations = AppLocalizations.of(context)!;
18return Scaffold(
19body: Center(
20child: Column(
21mainAxisAlignment: MainAxisAlignment.center,
22children: [
23Text(localizations.greeting),
24Text(localizations.welcome(name: 'Ahmet')),
25],
26),
27),
28);
29}
30}

Çıktı: Cihaz dili Türkçe ise "Merhaba" ve "Hoşgeldiniz, Ahmet!", İngilizce ise "Hello" ve "Welcome, Ahmet!" gösterilir.

`react-native-i18n` veya `i18n-js` paketi kullan:

1npm install i18n-js
1import I18n from 'i18n-js';
2
3I18n.translations = {
4tr: {
5greeting: 'Merhaba',
6welcome: 'Hoşgeldiniz, {{name}}!',
7},
8en: {
9greeting: 'Hello',
10welcome: 'Welcome, {{name}}!',
11},
12};
13
14I18n.locale = 'tr'; // Cihaz dilini otomatik algılamak için
15
16const message = I18n.t('welcome', { name: 'Ahmet' });
17console.log(message); // "Hoşgeldiniz, Ahmet!"

- Çeviriler için `Crowdin` veya `Lokalise` gibi araçları kullan; ekiple koordine et.
- Tarih/saat için `intl` (Flutter) veya `date-fns` (React Native) tercih et.
- Dil değişikliğini gerçek zamanda uygulamak için state yönetimi (Provider, Redux) kullan.
- Uzun metinleri test et; bazı dillerde daha fazla yer kaplar.

Bu temel yapı sayesinde uygulamanız küresel pazara hazır olur.

Reklam · TEST
AdSense Test ReklamıGönderi altı · Görüntülü
konu hakkında tepkinizi verebilirsiniz