Custom Translation ~ 1.4.8

You can translate the app to your own language if its not listed as one of the supported languages.

Here is how you can translate it yourself.

  • Go to lib/widgets/cards/language_selector.view.dart

  • Scroll to the bottom of the file, you would see a commented code. like this:

// MenuItem(
//   title: "LANGUAGE_NAME",
//   suffix: Flag('COUNRTY_CODE', height: 24, width: 24),
//   onPressed: () => onSelected('LANGUAGE_CODE'),
// ),
  • Uncomment this code and change variable to match your new translation language. For example if you want to translate app to Yoruba(A local language in Nigeria). Below is the sample of how the code should look like:

MenuItem(
 title: "Yoruba",
 suffix: Flag('NG', height: 24, width: 24),
 onPressed: () => onSelected('yo'),
),

Now Yoruba will be listed as one of the app languages.

Translating App Strings

After setting your custom language option above, all you are left with is to translate all the used strings used in the app to your custom language.

All translatable strings/values used in the app is grouped inside a translation folder. For example if you want to translate the values on the splash page. Navigate to lib/translations/splash.i18n.dart.

Here is a the content of splash.i18n.dart:

import 'package:i18n_extension/i18n_extension.dart';

extension Localization on String {
  //en,fr,es,de
  static var _t = Translations("en") +
      {
        "en": "Loading Please wait...",
        "fr": "",
        "es": "",
        "de": "",
      };

  String get i18n => localize(this, _t);
  String fill(List<Object> params) => localizeFill(this, params);
}

Now you need to set your translated string/value for each object.

Now let us translation the value "Loading Please wait..." to Yoruba. This is how the file would now look like:

import 'package:i18n_extension/i18n_extension.dart';

extension Localization on String {
  //en,fr,es,de
  static var _t = Translations("en") +
      {
        "en": "Loading Please wait...",
        "fr": "",
        "es": "",
        "de": "",
        "yo": "Nbọ Jọwọ duro ...",
      };

  String get i18n => localize(this, _t);
  String fill(List<Object> params) => localizeFill(this, params);
}

That's it, you now have a translated version of that value. You can follow the guide above to translate the rest values in all the translation files.

NOTE: All translation file as an extension of .i18n.dart

Default Language

You can make the newly added language the default language of the app.

Navigate to lib/services/auth.service.dart. Change the code at line 39. Current code from line 39

static String getLocale() { 
    return LocalStorageService.prefs.getString(AppStrings.appLocale) ?? "en"; 
}

To make Yoruba our default language, change the "en" to "yo".

Also add your custom language to list of allowed languages in the MyApp.dart file. Adding Yoruba as one of the supported languages.

supportedLocales: [
    const Locale('en'),
    const Locale('fr'),
    const Locale('es'),
    const Locale('de'),
    //FOR YORUBA
    const Locale('yo'),
],

REMOVE LANGUAGE

If you need to remove unwanted languages, you can simply comment out the MenuItem for the language in the lib/widgets/cards/language_selector.view.dart

Last updated