appflowy-editor/documentation/translation.md

Translate AppFlowy Editor

You can help Appflowy Editor 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: lib/l10n/

1. Install the Visual Studio Code plugin: Flutter intl
2. Modify the specific translation file.
3. Save the file and the translation will be generated automatically.

Steps to add new language

Translation files are located in: lib/l10n/

1. Install the Visual Studio Code plugin: Flutter intl
2. Copy the intl_en.arb as a base translation and rename the new file to intl_<new_locale>.arb
3. Modify the new translation file.
4. Save the file and the translation will be generated automatically.

Modify the locale of the editor

If you want to try the changes you made, you can modify the locale of the editor by changing the supportedLocales variable in example/lib/main.dart to the locale you want to test.

// example/lib/main.dart
// Change this:
supportedLocales: AppFlowyEditorLocalizations.delegate.supportedLocales,
// to the locale you want to test, for example fr_FR:
supportedLocales: const [Locale('fr', 'FR')],

Or you can do it interactively by adding a Floating Action Button to the page. Edit example/lib/home_page.dart:

You need to rebuild to see the changes of the translated strings.

// example/lib/home_page.dart
class _HomePageState extends State<HomePage> {
  // other code...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // other code...
      floatingActionButton: FloatingActionButton(
        onPressed: toggleLocale,
        child: const Icon(Icons.language),
      ),
    );
  }

  void toggleLocale() {
    final locale = Intl.getCurrentLocale();
    if (locale == 'en_US') {
      // Change to the locale you want to test
      AppFlowyEditorLocalizations.load(const Locale('pt', 'BR')); 
    } else {
      AppFlowyEditorLocalizations.load(const Locale('en', 'US'));
    }
  }