Flutter In-Context Editing

The Flutter Intl is an IDE plugin that generates the necessary boilerplate code for the intl package. We have already explained how to configure localization with the Flutter Intl plugin. Therefore, we will not spend more words on that. Instead, we will show you how to enable In-Context Editing in such projects.

All code samples used in this guide are available on the GitHub repo.

Step 1: Update pubspec.yaml file

The first thing we need to do is to add localizely_sdk dependency.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0
  localizely_sdk: ^2.5.0

Once we've added the dependency to the pubspec.yaml file, run the following command to download it.

flutter pub get

Next, update the flutter_intl config with the ota_enabled within the pubspec.yaml file so that the Flutter Intl plugin can generate necessary metadata.

flutter_intl:
  enabled: true
  localizely:
    ota_enabled: true

Step 2: Wrap the root of the app

The next step is to wrap the root of the app with the LocalizelyInContextEditing widget. For that purpose, let's update the main.dart file.

...
import 'package:localizely_sdk/localizely_sdk.dart';

void main() {
  runApp(
    LocalizelyInContextEditing(
      enabled: true, // set to false to disable In-Context Editing for production app builds
      child: MyApp(),
    ),
  );
}

...

Step 3: Connect your app with Localizely

The last step we need to do is to run the app and connect with Localizely. On app startup, you will see the page that will guide you to connect. Basically, you will need to enter a token from Localizely to establish connection.

To access the token, go to the Translations page of your project on the Localizely platform and click on the button. This will open a dialog with all the necessary data.

Now that we have everything prepared, let's connect.

If everything went well, you should see a message that you are successfully connected.

Step 4: Translate

Finally, start translating your content on the Localizely platform, and at the same time, see how it fits on a real device as you type.

Not long ago, Flutter introduced the gen_l10n tool as a new way of localization. This tool automatically generates necessary localization files during the build phase. We have already explained how to configure localization with the gen_l10n tool. Therefore, we will not spend more words on that. Instead, we will show you how to enable In-Context Editing in such projects.

All code samples used in this guide are available on the GitHub repo.

Step 1: Update pubspec.yaml file

The first thing we need to do is to add localizely_sdk dependency.

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.17.0
  localizely_sdk: ^2.5.0

Once we've added the dependency to the pubspec.yaml file, run the following command to download it.

flutter pub get

Step 2: Generate localization files

The second thing we need to do is to generate localization files with the localizely_sdk. To do that, let's run the command shown below.

flutter pub run localizely_sdk:generate

To automatically run code generation each time your arb files change, you should add build_runner package to dev_dependencies and run watch command.

flutter pub add build_runner -d
flutter pub run build_runner watch

Once we've generated required localization files, let's update localizationsDelegates and supportedLocales props of the MaterialApp widget.

...
import 'package:flutter_gen/gen_l10n/localizely_localizations.dart';

class MyApp extends StatelessWidget {
  ...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      localizationsDelegates: LocalizelyLocalizations.localizationsDelegates,
      supportedLocales: LocalizelyLocalizations.supportedLocales,
      ...
    );
  }
}

Step 3: Wrap the root of the app

The next step is to wrap the root of the app with the LocalizelyInContextEditing widget. For that purpose, let's update the main.dart file.

...
import 'package:localizely_sdk/localizely_sdk.dart';

void main() {
  runApp(
    LocalizelyInContextEditing(
      enabled: true, // set to false to disable In-Context Editing for production app builds
      child: MyApp(),
    ),
  );
}

...

Step 4: Connect your app with Localizely

The last step we need to do is to run the app and connect with Localizely. On app startup, you will see the page that will guide you to connect. Basically, you will need to enter a token from Localizely to establish connection.

To access the token, go to the Translations page of your project on the Localizely platform and click on the button. This will open a dialog with all the necessary data.

Now that we have everything prepared, let's connect.

If everything went well, you should see a message that you are successfully connected.

Step 5: Translate

Finally, start translating your content on the Localizely platform, and at the same time, see how it fits on a real device as you type.