Language

Multiple Language

Open file ./lib/config/language.dart

import 'package:flutter/material.dart';
class AppLanguage {
    ///Default Language
    static const Locale defaultLanguage = Locale("en");

    ///List Language support in Application
    static final List<Locale> supportLanguage = [
    const Locale("en"),
    const Locale("vi"),
    const Locale("ar"),
    const Locale("da"),
    const Locale("de"),
    const Locale("el"),
    const Locale("fr")
    ...
  ];
  ...
}

How to set default language?

Change the variable defaultLanguage with other value such as Locale("fr")

How to add more languages?

Add more JSON language file on the folder ./assets/locale/..

Update the variable supportLanguage & add more new language code.

Change the variable defaultLanguage with your new language code.

RTL Layout

This is particularly useful if you’re designing a product for a language written from right to left, such as Arabic or Hebrew. By doing so, you can ensure that your product’s text and visual elements are aligned correctly and that the user can easily navigate and interact with the interface.

Open file ./lib/utils/language.dart

///isRTL layout
  static bool isRTL() {
    switch (AppLanguage.defaultLanguage.languageCode) {
      case "ar":
      case "he":
        return true;
      default:
        return false;
    }
  }

Currently, we are support RTL for Arabic (Bahrain, Algeria, Egypt, Iraq, Jordan) and Hebrew.

Multiple Language

Open file ./app/configs/index.ts

export const Settings = {
  name: 'Listar Pro',
  appVersion: version,
  domain: 'https://demo.listarapp.com',
  defaultLanguage: 'en',
  defaultFont: 'Poppins',
  fontSupport: ['SFProText', 'Raleway', 'Poppins'],
  defaultTheme: themeSupport[0],
  themeSupport: themeSupport,
  languageSupport: [
    'en',
    'vi',
    'ar',
    'da',
    'de',
    'el',
    'fr',
    ...
};

How to set default language?

Change the variable defaultLanguage with other value such as fr

How to add more languages?

Add more JSON language file on the folder ./app/assets/localization/..

Update the variable languageSupport & add more new language code.

Change the variable defaultLanguage with your new language code.

Language file locate: ./app/localization/.. .

The file name base on your language code with format ISO-2. Please refer language ISO-2 in here https://www.loc.gov/standards/iso639-2/php/code_list.php

RTL Layout

This is particularly useful if you’re designing a product for a language written from right to left, such as Arabic or Hebrew. By doing so, you can ensure that your product’s text and visual elements are aligned correctly and that the user can easily navigate and interact with the interface.

Open file ./app/utils/index.ts

export const handleRTL = (language: string) => {
  const isLanguageRTL = (code: string) => {
    switch (code) {
      case 'ar':
      case 'he':
        return true;
      default:
        return false;
    }
  };

  const isRTL = isLanguageRTL(language);
  if (isRTL !== I18nManager.isRTL) {
    I18nManager.forceRTL(isRTL);
    RNRestart.Restart();
  }
};

Currently, we are support RTL for Arabic (Bahrain, Algeria, Egypt, Iraq, Jordan) and Hebrew.