Multi-language, including RTL

This section shows how to config Language, Flag image, default Currency, Symbol.

img

On WooCommerce, to support product content translation (title, description..), it is required to install the following plugins:

If your website don’t use WPML, it is possible to integrate with Polylang plugin.

From version 1.7.x, there are more than 10 languages in the app: English, Vietnam, Japanese, Chinese, Indonesian, Spanish, Arabic, Romanian, Turkish, Italian, German, Portuguese, Brazil, French, Thai, Russian, Poland, Serbian, Persian, ... You also can add/edit/delete languages.

fluxstore-1

1. How to add or update language?

To add a new language, please follow the steps below:

  1. Go to lib/l10n/ folder and copy the existing files to make a new one (you may see there are many languages demo from the app). Let add the new French (fr) language, for example, the format should be intl_fr.arb. We suggest using the Android Studio with Flutter Intl when inputting a new language to support auto-generating the WidgetsLocalizations file lib/generated/i10n.dart. To see the list of supported language codes, please go to this page (check Subtag for language code).
  2. Add a new JSON file to support the config of layout homepage, for more detailed guideline please check the Layout & Theming) guide.
    // lib/config/config_xx.json (with `xx` is language)
    {
      "HorizonLayout": [
        {
          "layout": "logo",
          "showMenu": true,
          "showSearch": true,
          "showLogo": true,
          "background": "#FFFFFF"
        },
    	  // ...
    }
  3. Open lib/env.dart, update languagesInfo:
    /// Supported language
      "languagesInfo": [
        {
          "name": "English",
          "icon": "assets/images/country/gb.png",
          "code": "en",
          "text": "English",
          "storeViewCode": ""
        },
        {
          "name": "Chinese",
          "icon": "assets/images/country/zh.png",
          "code": "zh",
          "text": "Chinese",
          "storeViewCode": ""
        },
        {
          "name": "Hindi",
          "icon": "assets/images/country/in.png",
          "code": "hi",
          "text": "Hindi",
          "storeViewCode": "hi"
        },
        {
          "name": "Spanish",
          "icon": "assets/images/country/es.png",
          "code": "es",
          "text": "Spanish",
          "storeViewCode": ""
        },
        // ....
      ],

For version 1.9.x and earlier (for Fluxstore Pro, FluxStore WooCommerce, FluxStore Listing, and FluxStore MultiVendor apps), open /lib/common/config/languages.dart and:
  • Update the language flag image from ImageCountry class:
  • Update language from getLanguages function:
    /// Supported language
    List<Map<String, dynamic>> getLanguages([context]) {
      return [
        {
          "name": context != null ? S.of(context).english : "English",
          "icon": ImageCountry.GB,
          "code": "en",
          "text": "English",
          "storeViewCode": ""
        },
        {
          "name": context != null ? S.of(context).chinese : "Chinese",
          "icon": ImageCountry.ZH,
          "code": "zh",
          "text": "Chinese",
          "storeViewCode": ""
        },
        {
          "name": context != null ? S.of(context).India : "Hindi",
          "icon": ImageCountry.IN,
          "code": "hi",
          "text": "Hindi",
          "storeViewCode": "hi"
        },
        // ....
      }
For version 1.9.0 and earlier, refer to lib/common/tools.dart

2. Default Language and Currency

Open lib/env.dart file and update the DefaultCurrency section. (For version 1.9.x and earlier, refer to lib/common/config/general.dart with kAdvanceConfig).

  "advanceConfig": {
    "DefaultLanguage": "en",
    "DefaultCurrency": {
      "symbol": "\$",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "USD",
      "currencyCode": "usd",
      "smallestUnitRate": 100, // 100 cents = 1 usd
    },
  ...
  },