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:
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:
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:
Open it and add your locale code as shown in the below screenshot
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.
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.
bn– Bengali Bangla
ca– Catalan Valencian
de– German (plus one country variation)
el– Modern Greek
en– English (plus 8 country variations)
es– Spanish Castilian (plus 20 country variations)
fil– Filipino Pilipino
fr– French (plus one country variation)
gsw– Swiss German Alemannic Alsatian
km– Khmer Central Khmer
ky– Kirghiz Kyrgyz
nb– Norwegian Bokmål
nl– Dutch Flemish
pa– Panjabi Punjabi
ps– Pushto Pashto
pt– Portuguese (plus one country variation)
ro– Romanian Moldavian Moldovan
si– Sinhala Sinhalese
sr– Serbian (plus 2 scripts)
zh– Chinese (plus 2 country variations and 2 scripts)