Flutter Easy Localization Paketi ile Çoklu Dil Desteği Eklenmesi

 Merhaba arkadaşlar todo uygulaması üzerinde çoklu dil desteğini nasıl  yapabiliriz bununla alakalı paketi uygulama da nasıl kullanabiliriz hakkında bir yazı yazalım istedim.

Paketimiz Easy_localization

Link: https://pub.dev/packages/easy_localization

Paket olarak arkadaşlar zaten readme kısımlarını ve installing kısımlarını projeye nasıl entegre ederiz çok güzel açıklamışlar ama oldu ya kısmen bilgi olması açısından bizde dinamik varsayılan alanları nasıl gösterebiliriz bunun hakkında kısa bir yazı yazalım.

Arkadaşlar öncelikle ctrl+shift +p diyerek add dependency diyerek easy_localization paketini en son ki versiyonunu indiriyoruz.

veya

pubspec.yaml dosyasında bu paketi installing seçeneklerinde ki gibi ekleyip  paketi download ediyoruz.

dependencies:
  easy_localization: <last_version>

Sonra  bizden paket folder(klasör) dizinimize assets diye bir klasör açmamızı ve içerisine translations klasörünün içerisine .json dosyalarını eklemimizi istiyor.

  /asserts/translations / => en-US.json veya tr-TR.json

assets
└── translations
    ├── {languageCode}.{ext}                  //only language code
    └── {languageCode}-{countryCode}.{ext}    //or full locale code

Aynı paket ios tarafında localization çalıştırabilmek için  ios/Runner/Info.plist paketi içerisine seçili  kod satırlarını ekleyip kaydetmemizi istiyor.

<key>CFBundleLocalizations</key>
<array>
	<string>en</string>
	<string>nb</string>
</array>

Easy_localization paket olarak main methodunu başlangıç olarak  beni Initialize et diyor. Main kodları arasına bu kodlarımızı da ekliyoruz sonrasında MaterialApp Localization nesnesi ile sarmalıyoruz.

 WidgetsFlutterBinding.ensureInitialized();
  await EasyLocalization.ensureInitialized();

MaterialApp sarmalamak içinse kodlarımız aynı şekilde document sayfasında mevcut bunlar;

 return MaterialApp(
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      home: MyHomePage()
    );

Paketimizi ekledik Material App sarmaladık başlangıçta iniatlize de ettik peki sonrasında ne yapıyoruz. Bu sefer Translations klasörü içerisinde bulunan  en-US.json ve tr-Tr.json dosyalarımızın içerisine json formatında statik verilerimizi giriyoruz.

Json dosyalarımızın içerisini de statik olarak doldurduktan sonra MaterialUI içerisinde .tr() ekleyerek local cihaz bilgisine göre güncelleme işlemini tamamlamış oluyoruz.

Mesela TextField için hintText alanını nasıl local dil bilgisini ekledik.

 TextField(

              autofocus: true,

              style: TextStyle(fontSize: 18),

              decoration: InputDecoration(hintText: 'add_Task'.tr()),

              onSubmitted: (value) {}

Burada text alanı dışında tanımlanan .tr() etiketi Türkçe'den gelen  tr olmuyor buna dikkat edelim. Ayrıca tr-Tr ve en-US dosyalarında ki başlık alanları aynı isimde olması gerektiğini unutmayalım !!

Ayrıca biz  todo uygulamasında hazır paketlerden datetime_picker paketininde local dilini değiştirmek içinde paket içerisinde bulunan locale: bilgisine yeni method tanımlayarak cihaz bilgisini alarak paketi de istenilen dile ulaşmasını sağlayalım.

helper diye ana dizine yenir bir klasör tanımlıyoruz. Klasör altına translation_helper.dart class içerisine local cihaz dil bilgisini alacak bir method oluşturup bunu return eden kodları aşağıya bırakıyorum.

class TranslationHelper {

  TranslationHelper._();

  static getDeviceLanguageBul(BuildContext context) {

    var deviceLanguage = context.deviceLocale.countryCode;

    switch (deviceLanguage) {

      case 'tr':

        return LocaleType.tr;

      case 'en':

        return LocaleType.en;

    }

  }

}

Context nesnesi olmak zorunda olduğunu gözden kaçırmayalım. Çünkü context sayesinde local cihaz bilgisini alıyoruz.

  var deviceLanguage = context.deviceLocale.countryCode;

Bu sayede countryCode bilgisini de return etmiş hazır paket için local dil bilgisini almış bulunmaktayız.

locale: TranslationHelper.getDeviceLanguageBul(context),

Kod bloğunu da context içerisine entegre etmiş bulunmaktayız.

Dil paketini Türkçe seçtikten sonraki ekran görüntüleri;

Dil paketini Ingilizce seçtikten sonraki ekran görüntüleri;

Evet arkadaşlar Easy_localization paketini kullanarak çoklu dil desteğini statik nesneler üzerinde gerçekleştirmiş olduk. Tabi bunu paket üzerinde ki local bilgisine dayalı olarak  güncellemeler yaparak projeyi daha da büyütme şansınız var ama temelinde böyle bir şey olduğunu anlatmak istedim.

Umarım faydalı bir içerik olmuştur. Keyifli okumalar ve iyi kodlamalar arkadaşlar.

Sağlıcakla kalın..