Flutter Localization dengan Flappy Translator

Ketika kita bikin aplikasi pasti utamanya adalah di pakai untuk kalangan sendiri, tp kan pengen juga aplikasi ini di pahami orang luar, terutama yang mau kita targetin seperti orang yang hariannya pake bahasa inggris atau china atau bahkan bahasa spanyol

Nah untuk mengatasi itu kita bisa pakai localization di flutter. Tapi ada ribetnya ketika kita harus menterjemahkannya satu persatu. Nah ini kita bisa mengatasinya dengan plugin flappy translator.

Yuk lah langsung kita bahasa aja untuk pertama. Kita bisa menyediakan dulu file yang akan kita translate, kita bisa mengunakan google sheet untuk mempermudahnya untuk di convert menjadi csv

keys fr en es de_CH
appTitle Ma super application My awesome application Mi gran application Meine tolle App
subtitle Un sous titre A subtitle Un subtitulò Ein Untertitel
description Un texte avec une variable : %1$s Text with a variable: %1$s Un texto con una variable : %1$s Text mit einer Variable: %1$s
littleTest "Voici, pour l'exemple, ""un test"" avec la variable %age$d" "Here is, for the example, ""a test"" with the variable %age$d" "Aqui esta, por ejemplo, ""una prueba"" con la variable %age$d" "Hier ist, zum Beispiel, ""ein Test"" mit der Variable %age$d"

nah contoh di atas bisa kita permudah dengan bantuan google translate di google sheet dengan cara

  =GOOGLETRANSLATE(<Posisi Kolom>;"en";"fr")

kalo udah tinggal di download sebagai csv.

Selanjutnya kita setup untuk depedency di flutternya.

Jadi di sini saya anggap semua udah bisa install flutter jadi tinggal tambahin depedency

    dependencies:
        flutter_localizations:
        sdk: flutter
        flappy_translator: 

untuk versi flappy bisa di cek disini

kalo udah di setup depedency nya lakukan

    flutter pub get
    flutter pub run flappy_translator <nama_file.csv>

otomatis nanti akan di generate menjadi i18.dart

Selanjutnya tinggal kita implement pada main.dart kita

  class MyApp extends StatelessWidget {
    @override
        Widget build(BuildContext context) {
            return MaterialApp(
            localizationsDelegates: [
                const I18nDelegate(),
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
            ],
            supportedLocales: I18nDelegate.supportedLocals,
            home: Home(),
            );
        }
    }

Udah beres tinggal cara pemakainnya, gampang sih, pada text tinggal kita panggil sesuai keynya contoh

   Text(I18n.of(context).appTitle),

taraaa udah beres sangat mudah bukan

Kalo masih kurang jelas silahkan tonton video youtube saya ya devindo

Semoga bermanfaat

Share on Twitter | Discuss on Twitter