Flutter’da lokalizasyon (i18n) nasıl yapılır? Adım adım

Flutter uygulamanızı birden fazla dilde sunarak daha geniş bir kullanıcı kitlesine ulaşabilirsiniz. Bu makalemde slang paketi kullanarak Flutter’da lokalizasyon (i18n) işlemini adım adım nasıl gerçekleştirebileceğinizi göstereceğim.

Bir mobil uygulamanın başarısında farklı dillere destek sunması büyük bir rol oynar. Instagram, WhatsApp, Facebook gibi global uygulamaların popülerliklerinde çok dilli desteklerinin etkisi yadsınamaz. Peki Flutter ile bir uygulama geliştirirken çoklu dil desteğini nasıl ekleyebilirsiniz?

Bu yazıda slang paketini kullanarak Flutter uygulamanıza nasıl kolayca lokalizasyon (i18n) ekleyebileceğinizi adım adım göstereceğim. Hazırsanız başlayalım!

Lokalizasyon neden önemli?

Lokalizasyon, uygulamanızın birden fazla dilde kullanılabilmesini sağlar. Bu da yalnızca yerel bir kitleye değil, global bir kullanıcı tabanına hitap etmenize olanak tanır.

Örneğin bir uygulamanız sadece Türkçe hizmet verse,dünya genelinde ulaşabileceği kullanıcı sayısı sınırlı olur. Ancak İngilizce, Almanca gibi ek diller ekleyerek bu kısıtlamayı aşabilirsiniz.

Flutter uygulamasına dil eklemek için kullanılabilecek pek çok paket seçeneği bulunuyor. flutter_localization, easy_localization, localization ve dahası. Ben size slang adlı paketten bahsetmek istiyorum.

Hızlı bir şekilde kurulabilen ve yapılandırılabilen slang, kullanımı oldukça kolay bir paket.

Flutter uygulamasına dil seçenekleri (localization) ekleme

Adım 1: Gerekli Paketleri Yükleyin

İlk olarak slang ile çalışmak için gerekli paketleri yükleyelim. Terminale şu komutu yazmanız yeterli:

flutter pub add slang slang_flutter build_runner

Bu komut, projenize slang, slang_flutter ve generate işlemleri için build_runner paketlerini ekler.

Adım 2: Dil dosyalarını oluşturun

Projenizin kök dizininde bir assets klasörü oluşturun. Bu klasörün içine i18n adında bir alt klasör ekleyin. Her dil için bir JSON dosyası oluşturmanız gerekiyor. Dosya isimlendirme formatı şu şekilde olmalı:

<namespace>_<locale?>.i18n.json

Örneğin:

• strings.i18n.json (Temel dil, genelde İngilizce)
• strings_tr.i18n.json (Türkçe)
• strings_de.i18n.json (Almanca)

Örnek dil dosyaları

Temel dil (English)

{
  "views": {
    "login": {
      "welcome": "Welcome",
      "email": "Email",
      "password": "Password",
      "loginButton": "Login"
    },
    "home": {
      "welcome": "Welcome Home!",
      "greeting": "Hello, $userName!"
    }
  }
}

Türkçe:

{
  "views": {
    "login": {
      "welcome": "Hoşgeldiniz",
      "email": "E-posta",
      "password": "Parola",
      "loginButton": "Giriş Yap"
    },
    "home": {
      "welcome": "Ana Sayfaya Hoşgeldiniz!",
      "greeting": "Merhaba, $userName!"
    }
  }
}

Almanca:

{
  "views": {
    "login": {
      "welcome": "Willkommen",
      "email": "E-Mail",
      "password": "Passwort",
      "loginButton": "Einloggen"
    },
    "home": {
      "welcome": "Willkommen zu Hause!",
      "greeting": "Hallo, $userName!"
    }
  }
}

Adım 3: Kod üretimi (Generate işlemi)

JSON dosyalarını oluşturduktan sonra, Slang paketinin bu dosyalardan kod üretmesi gerekiyor. Bunun için terminalde şu komutu çalıştırın:

dart run slang

Bu komut, projenizin lib/gen klasöründe generate edilmiş kod dosyalarını oluşturur. Eğer dosyaların konumunu değiştirmek istiyorsanız, proje köküne bir slang.yaml dosyası ekleyebilirsiniz:

input_directory: assets/i18n # Localization ile ilgili JSON dosyaların konumu
output_directory: lib/i18n # Generate edilecek kodların konumu (varsayılan: lib/gen/)

Adım 4: Flutter’a Lokalizasyonu Tanıtın

Lokalizasyon desteğini Flutter uygulamanıza entegre etmek için aşağıdaki adımları takip edin:

Pubspec.yaml dosyasında flutter bloğunun altında şu kodu ekleyin:

  flutter_localizations:
    sdk: flutter

Main metodunu ayarlayın

main.dart dosyanızda, cihazın varsayılan dilini kullanacak şekilde yapılandırma yapın:

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  LocaleSettings.useDeviceLocale();
  runApp(
    TranslationProvider(
      child: const MyApp(),
    ),
  );
}

MaterialApp yapılandırması

MaterialApp widget’ınıza şu parametreleri ekleyin:

@override
Widget build(BuildContext context) {
  return MaterialApp(
    locale: TranslationProvider.of(context).flutterLocale,
    supportedLocales: AppLocaleUtils.supportedLocales,
    localizationsDelegates: GlobalMaterialLocalizations.delegates,
    home: MyHomePage(),
  );
}

Adım 5: iOS için ek yapılandırma

iOS uygulamanızda, desteklenen dilleri belirtmek için Info.plist dosyasına şu satırları ekleyin:

<key>CFBundleLocalizations</key>
<array>
   <string>en</string>
   <string>tr</string>
   <string>de</string>
</array>

Kurulum tamamlandı! Şimdi nasıl kullanabileceğinize geçelim.

Yerelleştirilmiş metinleri kullanma

Slang tarafından generate edilen kodda, tüm metinlere t değişkeni üzerinden erişebilirsiniz. Örneğin:

Text(t.views.login.welcome) // "Welcome" / "Hoşgeldiniz" / "Willkommen"

Yer tutucu değişkenler (placeholders) için ise şu şekilde kullanabilirsiniz:

Text(t.views.home.greeting(userName: "Emir")) // "Hello, Emir" / "Merhaba, Emir" / "Hallo, Emir"

Dil değiştirme

Uygulamada dil değiştirmek için LocaleSettings.setLocale() fonksiyonunu kullanabilirsiniz. Örneğin:

LocaleSettings.setLocale(AppLocale.tr); // Türkçe’ye geçiş

Örnek proje

slang paketi ile localization için örnek bir proje oluşturdum. Bu projede dili değiştirme özelliği de mevcut. Linkine aşağıdan ulaşabilirsiniz.

• https://github.com/speeedev/slang_example/