Flutter In-Context Editing

Instantly see how your translations fit on a real device while you type

Screens on mobile devices are small and it is hard to match the texts for different languages at the first attempt. It is painful to constantly rebuild apps with new texts just to see if the changed text fits into the intended place. Luckily, Localizely offers In-Context Editing for Flutter apps.

You can type translations in Localizely platform and instantly see how given text appears on your device or in a browser. If it is too long for the intended place, if it breaks into multiple lines and similar. Knowing the context in which translations are used and how they fit into the rest of the app will help you to increase the translation quality.

However, we should keep in mind that In-Context Editing is not a replacement for the regular translation method. In fact, it is an extension of the regular way that allows us to be more productive. It is intended only for the development and testing phases as such translation changes only exist while you are connected to the platform.

Integration

The most commonly used approach to localize Flutter apps is with the intl package and tools around it. Thus, in the following sections, we will explain how to integrate In-Context Editing into such Flutter projects.

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.4.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. In the case of mobile apps (android and iOS platforms), you will be prompted to scan the QR code from the Localizely. In the case of web and desktop apps, the connection process is a bit different and will require you to paste a token from the Localizely.

To access the QR code and 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.

Flutter In-Context Editing open dialog

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

Flutter In-Context Editing authenticate by scanning QR code

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

Note: Make sure your Flutter app meets the following requirements:
Android: Required Android SDK 21 or newer (update minSdkVersion to 21 in the android/app/build.gradle file).
iOS: Required iOS 11 or newer and an update of the Info.plist file with the NSCameraUsageDescription.

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.

Flutter In-Context Editing demo

Tired of manually editing translation files?

Our platform streamlines software localization for you.

Copyrights 2022 © Localizely