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 intlAdım 2: Yapılandırma dosyası oluştur
`pubspec.yaml` dosyasına ekle:
1generate: true23flutter_intl:4enabled: true5class_name: AppLocalizations6arb_dir: lib/l10nAdım 3: Dil dosyaları oluştur
`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';23class MyApp extends StatelessWidget {5Widget build(BuildContext context) {6return MaterialApp(7localizationsDelegates: AppLocalizations.localizationsDelegates,8supportedLocales: AppLocalizations.supportedLocales,9home: HomePage(),10);11}12}1314class 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-js1import I18n from 'i18n-js';23I18n.translations = {4tr: {5greeting: 'Merhaba',6welcome: 'Hoşgeldiniz, {{name}}!',7},8en: {9greeting: 'Hello',10welcome: 'Welcome, {{name}}!',11},12};1314I18n.locale = 'tr'; // Cihaz dilini otomatik algılamak için1516const 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.
0 yorum