This section show how to config Language, Country Code, Symbol, Currency, Google font.

img

On WooCommerce, to support for translating the product content (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, Indonesiana, Spanish, Arabic, Romanian, Turkish, Italian, German, Portuguese, Brazil, French... You also can add/edit/delete languages.

fluxstore-1

How to add or update language?

To add a new language, please follow step below:

  1. Go to lib/l10n/ the folder and copy the existing files to make a new one (you may see there are many languages demo from the app). Let’s take adding 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 new language to support auto-generating the WidgetsLocalizations file lib/generated/i10n.dart.
  2. Go to lib/common/tools.dart and update the list from getLanguagesList function
  static Function getLanguagesList = ([context]) {
    return [
      {
        "name": context != null ? S.of(context).english : "English",
        "icon": ImageCountry.GB,
        "code": "en",
        "text": "English",
        "storeViewCode": ""
      },
      {
        "name": context != null ? S.of(context).vietnamese : "Vietnam",
        "icon": ImageCountry.VN,
        "code": "vi",
        "text": "Vietnam",
        "storeViewCode": ""
      },
      // ....
  }
  1. Go to lib/common/constants/images.dart and update the language flag image
class ImageCountry {
  static const String GB = 'assets/images/country/gb.png';
  static const String VN = 'assets/images/country/vn.png';
  //...
}
  1. Add new JSON file to support for the config the layout homepage, for more detail 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"
    },
	  // ...
}

Default Language & Curency

Open lib/common/config/general.dart file and update the DefaultCurrency section.

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

Multi Currencies Setting

fluxstore_currencies_inspireui_flutter

This feature is only available for WooCommerce version, below is required condiction to active this feature:

  • Update the mstore-api to latest version v1.5.4.
  • Add new setting from Manage Currencies from WPML plugin:

IMG_1790fluxstore_currency_flutter_inspireui

  • Open the Fluxstore project, and update the lib/common/config/general.dart and update the Currencies value
const kAdvanceConfig = {
  ...
  "Currencies": [
    {
      "symbol": "\$",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "USD"
    },
    {
      "symbol": "đ",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "VND"
    }
  ]
};

Multi Shipping Countries & States

To limit the country list from the Shipping Address screen, open lib/common/config.dart and update the DefaultCountry (From version 1.6.5 onwards, open lib/common/config/payments.dart).

Example: if you would like to display on 3 countries, configure as below:

const List DefaultCountry = [
  {
    "name": "Vietnam",
    "iosCode": "VN",
    "icon": "https://cdn.britannica.com/41/4041-004-A06CBD63/Flag-Vietnam.jpg"
  },
  {
    "name": "India",
    "iosCode": "IN",
    "icon":
        "https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png"
  },
  {"name": "Austria", "iosCode": "AT", "icon": ""},
];

Screen Shot 2020-06-11 at 09.49.05

⚠️ Note: To update the States list of your country, add new state file. E.g.: to display State/Province for India, add the state file below:

image1


Multi Google Fonts

Flutter 1.2.x come with powerful Google Font library, you can load any font from google font and load to your app dynamically without downloading to the assets folder.

If you add more languages to the app and would like to change the font family, go to lib/common/constants.dart (From version 1.6.5 onwards, go to lib/common/config/fonts.dart)

Example: add new fr language with Lato font:

///Google fonts: https://fonts.google.com/
TextTheme kTextTheme(theme, String language) {
  switch (language) {
    case 'vi':
      return GoogleFonts.montserratTextTheme(theme);
    case 'ar':
      return GoogleFonts.ralewayTextTheme(theme);
    case 'fr':
      return GoogleFonts.latoTextTheme(theme);
    default:
      return GoogleFonts.ralewayTextTheme(theme);
  }
}

TextTheme kHeadlineTheme(theme, [language = 'en']) {
  switch (language) {
    case 'vi':
      return GoogleFonts.montserratTextTheme(theme);
    case 'ar':
      return GoogleFonts.ralewayTextTheme(theme);
    default:
      return GoogleFonts.ralewayTextTheme(theme);
  }
}

If you don’t want to use Google Font and only use Custom Font Type, please refer to the guide from Flutter Document.

Note: When installing, if you get issue, please go to Common Questions and Common Issues to get Customer key, Consumer secret,... and to see the list of common issues and solutions to fix it.