☎️Translate AppFlowy

You can help Appflowy in supporting various languages by contributing. Follow the steps below sequentially to contribute translations.

Steps to modify an existing translation

Translation files are located in : frontend/app_flowy/assets/translations/

Modify in the no-code editor (inlang)

1. Open the inlang-editor

2. Edit translations (filter & search can help)

3. Run flutter pub run easy_localization:generate -S assets/translations/

4. Run flutter pub run easy_localization:generate -f keys -o locale_keys.g.dart -S assets/translations

5. Verify that the translation has changed appropriately by compiling and running the app.

Modify in code

1. Modify the specific translation file.

2. Run flutter pub run easy_localization:generate -S assets/translations/

3. Run flutter pub run easy_localization:generate -f keys -o locale_keys.g.dart -S assets/translations

4. Verify that the translation has changed appropriately by compiling and running the app.

Steps to add new language

Adding new languages from within the inlang editor is not supported yet, but you can add the language and then do the translations in inlang. (Adding via inlang is coming soon)

NOTE: Translation files SHOULD be json files named in the format <lang_code>-<country_code>.json or just <lang_code>.json. eg:en.json, en-UK.json

1. Add language key-value json file to frontend/app_flowy/assets/translations/. Refer en.json for format and keys.

2. Run flutter pub run easy_localization:generate -S assets/translations/

3. Run flutter pub run easy_localization:generate -f keys -o locale_keys.g.dart -S assets/translations

4. Open the frontend/app_flowy/lib/startup/tasks/app_widget.dart file.

5. In the InitAppWidgetTask class, add the locale of the language you just created (eg: Locale('en', 'IN'), Locale('en')) to the supportedLocales List :

   runApp(
     EasyLocalization(
       supportedLocales: const [Locale('en'), Locale('zh', 'CN')],  // <---- Add locale to this list
       path: 'assets/translations',
       fallbackLocale: const Locale('en'),
       child: app),
   );    

6. Add the name of your language, in your native tongue, to the list of language names in AppFlowy/frontend/app_flowy/packages/flowy_infra/lib/language.dart

   String languageFromLocale(Locale locale) {
     switch (locale.languageCode) {
       // Most often used
       case "en":
         return "English";
       case "zh":
         return "简体中文";
   
       // Then in alphabetical order
       case "de":
         return "Deutsch";
       case "es":
         return "Español";
       case "fr":
         return "Français";
   
                              // <- add your language here.
   
       // If not found then the language code will be displayed
       default:
         return locale.languageCode;
     }
   }

How to test your changes

Once your language is added to the language picker, you can simply choose it.