This feature supports to change not only the UI but also the Products and Category content via WMPL plugins (for WooCommerce version). Fluxstore also support RTL Arabic language and more.

When installing, if you get issue, please go to Common Questions or Common Issues to find the solutions.

img

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/delete/edit 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. For version 1.6.4 and earlier: Create a new Language setting from the Profile screen by cloning new Card Widget from lib/screens/language.dart (make sure to create a new language flag image and save to assets/images/country).

img

To change/add/remove languages, from version 1.6.5 onwards, you need to modify these files: (make sure to create a new language flag image and save to assets/images/country)

- lib/common/tools.dart -> getLanguagesList
- lib/common/constants/images.dart: set a new language flag image
- lib/l10n
- lib/config/config_xx.json (with `xx` is language)
- lib/config/states: state, city, or province of the country.

lib/common/constants/images.dart:

class ImageCountry {
  static const String GB = 'assets/images/country/gb.png';
  static const String VN = 'assets/images/country/vn.png';
  static const String JA = 'assets/images/country/ja.png';
  static const String ZH = 'assets/images/country/zh.png';
  static const String ES = 'assets/images/country/es.png';
  static const String AR = 'assets/images/country/ar.png';
}

If got issues, when add new language, please refer https://docs.inspireui.com/fluxstore/common-issues/

  1. Wordpress Plugins required On WooCommerce, to support for translating the product content (title, description..), it is required to install the following plugin:

    • WPML 3.4 or above
    • WPML String Translation 2.0 or above
    • WPML Translation Management 2.2 or above
    • WooCommerce Multilingual
    • WPML to WP API: this API will support to change the product/title/category base on the select language from WPML plugin.
    • Detailed document: click here

How to set a language as the default language?

Update the DefaultLanguage from lib/common/config.dart (or lib/common/config/general.dart for Fluxstore app from version 1.6.5 onwards).


Default Country Code, Symbol

Open lib/common/config.dart file and update the DefaultCurrency section. (For Fluxstore app, this const is moved to lib/common/config/general.dart from version 1.6.5 onwards).

const kAdvanceConfig = {
  "DefaultCurrency": {
    "symbol": "\$",
    "decimalDigits": 2,
    "symbolBeforeTheNumber": true,
    "currency": "USD"
  },
  ...
};

Currency Switcher

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.dart: (For Fluxstore app, this const is moved to lib/common/config/general.dart from version 1.6.5 onwards).
const kAdvanceConfig = {
  ...
  "Currencies": [
    {
      "symbol": "\$",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "USD"
    },
    {
      "symbol": "đ",
      "decimalDigits": 2,
      "symbolBeforeTheNumber": true,
      "currency": "VND"
    }
  ]
};

Country Settings

To limit the country list from the Delivery 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": ""},
];

Load Google Font per language

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);
  }
}

🗳 Coding Guide: Make sure the spacing align is correct.

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.