Flutter In-Context Editing

The gen_l10n tool is the standard way of localizing Flutter applications. It ships with the Flutter SDK and generates the localization code as part of the build. This guide assumes your app is already localized with it. If not, start with our guide to setting up localization with the gen_l10n tool, then come back here to enable In-Context Editing.

A complete sample app with In-Context Editing is available on GitHub.

Step 1: Add the Localizely SDK

Add the localizely_sdk dependency to your pubspec.yaml file:

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

Save the file and fetch the package:

flutter pub get

Step 2: Generate the localization file

Recent Flutter versions no longer generate localization code as a synthetic package, so make sure your l10n.yaml file writes the generated code into your lib directory. The sample app uses the following configuration:

arb-dir: lib/l10n
template-arb-file: intl_en.arb
output-localization-file: app_localizations.dart
output-dir: lib/l10n/generated

Then generate the localization file the SDK needs:

dart run localizely_sdk:generate

To regenerate the code automatically whenever your .arb files change, add build_runner to your dev_dependencies and run it in watch mode:

flutter pub add build_runner -d
dart run build_runner watch

Once the localization file is generated, point the localizationsDelegates and supportedLocales properties of your MaterialApp widget at it.

...
import 'l10n/generated/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

Wrap the root of your app in the LocalizelyInContextEditing widget in main.dart:

...
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

Run your app. On launch it opens a connection screen that asks for a token from Localizely.

To get the token, open the Translations page of your project in Localizely and click the button. The dialog that opens shows everything you need, including the token.

Enter the token in the app to connect.

A confirmation message tells you the app is now connected to Localizely.

Step 5: Translate

Start translating in Localizely. Each change appears on the connected device as you type, so you can see immediately whether the text fits.

The Flutter Intl is an IDE plugin that generates the boilerplate code for the intl package. This guide assumes your app is already localized with it. If not, start with our guide to setting up localization with the Flutter Intl plugin, then come back here to enable In-Context Editing.

A complete sample app with In-Context Editing is available on GitHub.

Step 1: Add the Localizely SDK

Add the localizely_sdk dependency to your pubspec.yaml file:

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

Save the file and fetch the package:

flutter pub get

Then enable ota_enabled in the flutter_intl section of the same file, so the Flutter Intl plugin generates the metadata the SDK needs:

flutter_intl:
  enabled: true
  localizely:
    ota_enabled: true

Step 2: Wrap the root of the app

Wrap the root of your app in the LocalizelyInContextEditing widget in main.dart:

...
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

Run your app. On launch it opens a connection screen that asks for a token from Localizely.

To get the token, open the Translations page of your project in Localizely and click the button. The dialog that opens shows everything you need, including the token.

Enter the token in the app to connect.

A confirmation message tells you the app is now connected to Localizely.

Step 4: Translate

Start translating in Localizely. Each change appears on the connected device as you type, so you can see immediately whether the text fits.