Flutter In-Context Editing

Not long ago, Flutter introduced the gen_l10n tool as a new approach to localization. This tool automatically generates the necessary localization files during the build process. We have already covered how to configure localization using the gen_l10n tool, so we won’t go into further detail on that here. Instead, we will focus on demonstrating how to enable In-Context Editing in such projects.

The sample Flutter app featuring In-Context Editing integration is available on the GitHub repository.

Step 1: Update pubspec.yaml file

The first step is to add the localizely_sdk dependency to your project.

Open your pubspec.yaml file and include the following dependency:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any
  localizely_sdk: ^2.6.4

After adding the dependency, save the file and run the following command to download it:

flutter pub get

Step 2: Generate localization file

The next step is to generate the necessary localization file using the localizely_sdk.

To do this, run the following command:

dart run localizely_sdk:generate

To automatically trigger code generation whenever your .arb files are modified, add the build_runner package to your dev_dependencies and run the watch command:

flutter pub add build_runner -d
flutter pub run build_runner watch

Once the required localization file is generated, update the localizationsDelegates and supportedLocales properties 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 involves wrapping the root of the app with the LocalizelyInContextEditing widget. To achieve this, update the main.dart file as follows:

...
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 final step is to run your app and establish a connection with Localizely. Upon launching the app, you will be directed to a page that guides you through the connection process. Essentially, you will need to enter a token from Localizely to establish the connection.

To retrieve the token, navigate to the Translations page of your project on the Localizely platform and click on the button. This will open a dialog containing all the necessary details, including your token.

Once you have everything set up, proceed to connect your app.

If everything went well, you should see a confirmation message indicating that your app is now connected to Localizely.

Step 5: Translate

Now, you can begin translating your content directly on the Localizely platform. As you type, you’ll be able to see how the translations look and fit on a real device in real time.

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, this guide will focus on enabling In-Context Editing in such projects.

The sample Flutter app featuring In-Context Editing integration is available on the GitHub repository.

Step 1: Update pubspec.yaml file

The first step is to add the localizely_sdk dependency to your project.

Open your pubspec.yaml file and include the following dependency:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: any
  localizely_sdk: ^2.6.4

After adding the dependency, save the file and run the following command to download it:

flutter pub get

Next, update the flutter_intl configuration in the pubspec.yaml file to include ota_enabled. This will allow the Flutter Intl plugin to generate the necessary metadata.

flutter_intl:
  enabled: true
  localizely:
    ota_enabled: true

Step 2: Wrap the root of the app

The next step involves wrapping the root of the app with the LocalizelyInContextEditing widget. To achieve this, update the main.dart file as follows:

...
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 final step is to run your app and establish a connection with Localizely. Upon launching the app, you will be directed to a page that guides you through the connection process. Essentially, you will need to enter a token from Localizely to establish the connection.

To retrieve the token, navigate to the Translations page of your project on the Localizely platform and click on the button. This will open a dialog containing all the necessary details, including your token.

Once you have everything set up, proceed to connect your app.

If everything went well, you should see a confirmation message indicating that your app is now connected to Localizely.

Step 4: Translate

Now, you can begin translating your content directly on the Localizely platform. As you type, you’ll be able to see how the translations look and fit on a real device in real time.