Cirilla Documentations

  1. Home
  2. Docs
  3. Cirilla Documentations
  4. How to
  5. How to Build a Multi-Language App?

How to Build a Multi-Language App?

How does translation work?

  • The yellow areas are defined in the language file in app (en.json, ar.json …)
  • The red area is defined in the App builder plugin
  • The green area is content (post, product, category) in the plugin translated like WPML, Polylang.

Set default language

To set a default language for your app open app.dart file located in:

cirilla/lib/constants/app.dart

Then change the language code to your own language as shown below screenshot and you are all good to go:

Add language to App

By default, English and Arabic language files are included in the app, you can download more here. To add your language to the app follow the below steps:

In this step, we will show you how to add your own language to our Cirilla flutter app.

Go to your Cirilla folder and navigate to:

/assets/lang

You will find en.json and ar.json now, copy en.json file then rename it to your language locale code, for example for Italian it will be: it.json for French it will be: fr.json. Now only translate your duplicated and renamed file to your own language.

Next step you need to navigate to app.dart file located in:

/lib/constants/app.dart

Open it and add your locale code as shown in the below screenshot

NOTE!
If your website is multi-lingual and you want to make your app as Multi-Lingual, you will need to have WPML installed on your website so multi-lingual functionality can work.

Make app multi-language without translation plugin.

The app automatically detects your setting languages on the website if the translate plugin is installed. But for some apps, you only need to translate the app without content.

You can manually define the languages configs in the file wp-config.php like this:

define( 'APP_BUILDER_LANGUAGES', serialize( array(
	'en' => array(
		'code'          => 'en',
		'language_code' => 'en',
		'native_name'   => 'English',
	),
	'ar' => array(
		'code'          => 'ar',
		'language_code' => 'ar',
		'native_name'   => 'Arabic',
	)
) ) );

Advanced locale definition

Some languages with multiple variants require more than just a language code to properly differentiate.

For example:

zh-hant is a language code return from your website, but in the list of languages support above it’s zh

So we need custom Locate like in this file to map zh-hant to Locale with language code zh

Then add file language zh.json and config languages support in file app.dart

The following locales are supported:

Flutters official supported 78 languages.

  • af – Afrikaans
  • am – Amharic
  • ar – Arabic
  • as – Assamese
  • az – Azerbaijani
  • be – Belarusian
  • bg – Bulgarian
  • bn – Bengali Bangla
  • bs – Bosnian
  • ca – Catalan Valencian
  • cs – Czech
  • da – Danish
  • de – German (plus one country variation)
  • el – Modern Greek
  • en – English (plus 8 country variations)
  • es – Spanish Castilian (plus 20 country variations)
  • et – Estonian
  • eu – Basque
  • fa – Persian
  • fi – Finnish
  • fil – Filipino Pilipino
  • fr – French (plus one country variation)
  • gl – Galician
  • gsw – Swiss German Alemannic Alsatian
  • gu – Gujarati
  • he – Hebrew
  • hi – Hindi
  • hr – Croatian
  • hu – Hungarian
  • hy – Armenian
  • id – Indonesian
  • is – Icelandic
  • it – Italian
  • ja – Japanese
  • ka – Georgian
  • kk – Kazakh
  • km – Khmer Central Khmer
  • kn – Kannada
  • ko – Korean
  • ky – Kirghiz Kyrgyz
  • lo – Lao
  • lt – Lithuanian
  • lv – Latvian
  • mk – Macedonian
  • ml – Malayalam
  • mn – Mongolian
  • mr – Marathi
  • ms – Malay
  • my – Burmese
  • nb – Norwegian Bokmål
  • ne – Nepali
  • nl – Dutch Flemish
  • no – Norwegian
  • or – Oriya
  • pa – Panjabi Punjabi
  • pl – Polish
  • ps – Pushto Pashto
  • pt – Portuguese (plus one country variation)
  • ro – Romanian Moldavian Moldovan
  • ru – Russian
  • si – Sinhala Sinhalese
  • sk – Slovak
  • sl – Slovenian
  • sq – Albanian
  • sr – Serbian (plus 2 scripts)
  • sv – Swedish
  • sw – Swahili
  • ta – Tamil
  • te – Telugu
  • th – Thai
  • tl – Tagalog
  • tr – Turkish
  • uk – Ukrainian
  • ur – Urdu
  • uz – Uzbek
  • vi – Vietnamese
  • zh – Chinese (plus 2 country variations and 2 scripts)
  • zu – Zulu

Config WPML/Polylang

Setting name plugin multi language in file cirilla/lib/constants/languages.dart

Example 1: Create app with simplified Chinese and traditional Chinese without plugin

Step 1: Define APP_BUILDER_LANGUAGES in file wp-config.php

Copy snip code below add to file wp-config.php on your server

define( 'APP_BUILDER_LANGUAGES', serialize( array(
	'zh-hans' => array(
		'code'          => 'zh-hans',
		'language_code' => 'zh',
		'native_name'   => 'Simplified Chinese',
	),
	'zh-hant' => array(
		'code'          => 'zh-hant',
		'language_code' => 'zh',
		'native_name'   => 'Traditional Chinese',
	)
) ) );

Step 2: Update languages.dart

Open file cirilla/lib/constants/languages.dart and update variable LANGUAGES like this

const LANGUAGES = {
  'zh-hant': Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'),
  'zh-hans': Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans', countryCode: 'CN'),
};

Step 3: Create 2 file zh-hans.json and zh-hant.json

You can duplicate file en.json and translate to your language

Now you can run the app and test the results.

Was this article helpful to you? Yes 4 No

How can we help?