](https://github.com/crowdin/flutter-sdk)
The Crowdin Flutter SDK delivers all new translations from Crowdin project to the application immediately. So there is no need to update the application via Store to get the new version with the localization.
[**`Example project`**](https://github.com/crowdin/flutter-sdk/tree/main/example) |
[**`Crowdin Docs`**](https://support.crowdin.com/content-delivery) |
[**`Crowdin Enterprise Docs`**](https://support.crowdin.com/enterprise/content-delivery/)
[](https://pub.dev/packages/crowdin_sdk)
[](https://pub.dev/packages/crowdin_sdk)
[](https://pub.dev/packages/crowdin_sdk)
[](https://github.com/crowdin/flutter-sdk/actions/workflows/build.yml)
[](https://codecov.io/gh/crowdin/flutter-sdk)
[](https://github.com/crowdin/flutter-sdk/graphs/contributors)
[](https://github.com/crowdin/flutter-sdk/blob/master/LICENSE)
## Features
- Load remote strings from Crowdin Over-The-Air Content Delivery Network
- Built-in translations caching mechanism (enabled by default, can be disabled)
- Network usage configuration (All, only Wi-Fi or Cellular)
- Load static strings from the bundled ARB files (usable as a fallback for the CDN strings)
- Real-Time Preview – all the translations that are done in the Editor can be shown in your version of the application in real-time. View the translations already made and the ones you're currently typing in.
## Requirements
* Dart >=2.17.0
## Setup
To configure Flutter SDK integration you need to:
- Upload your *.arb* localization files to Crowdin. If you have ready translations, you can also upload them. Alternatively, you can use the [Flutter .ARB String Exporter](https://store.crowdin.com/arb-export) to export Flutter `.arb` from your Crowdin project strings.
- Set up Distribution in Crowdin.
- Set up SDK and enable Over-The-Air Content Delivery feature in your project.
**Distribution** is a CDN vault that mirrors the translated content of your project and is required for integration with the Flutter app.
To manage distributions, open the Crowdin project and go to the *Translations* > *Over-The-Air Content Delivery* section. You can create as many distributions as you need and select different files for each. You'll need to click the *Release* button next to the distribution each time you want to send new translations to the app.
**To integrate SDK with your application you need to follow the step-by-step instructions:**
- First of all, your Flutter project should be internationalized using the `flutter_localizations` package. For more detail, see [Setting up an internationalized app](https://docs.flutter.dev/development/accessibility-and-localization/internationalization#setting-up).
- Create a project in [Crowdin](https://crowdin.com/).
- Upload your `app_en.arb` file to the created Crowdin project. Optionally, you can also [Upload Existing Translations](https://support.crowdin.com/uploading-translations/).
- [Set up a Distribution](https://support.crowdin.com/content-delivery/#distribution-setup).
- Add the `crowdin_sdk` dependency to your project:
```yml
dependencies:
crowdin_sdk: ^0.6.3
flutter_localizations:
sdk: flutter
intl: any
flutter:
generate: true
```
- Run the following command to generate Crowdin localization:
```consloe
flutter pub run crowdin_sdk:gen
```
As a result, the `Crowdin_localizations.dart` will be created in the `{FLUTTER_PROJECT}/.dart_tool/flutter_gen/gen_l10n` directory.
- Update localizationsDelegates in your project:
```dart
import 'package:flutter_gen/gen_l10n/app_localizations.dart';
import 'package:crowdin_sdk/crowdin_sdk.dart';
import 'package:flutter_gen/gen_l10n/crowdin_localizations.dart';
```
```dart
@override
Widget build(BuildContext context) {
return MaterialApp(
// ...
localizationsDelegates: CrowdinLocalization.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
),
// ...
);
}
```
- Initialize Crowdin SDK in the `main` function of your application:
```dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Crowdin.init(
distributionHash: 'distribution_hash', // Fill in with your distribution hash
connectionType: InternetConnectionType.any,
updatesInterval: const Duration(minutes: 15),
);
// ...
}
```
- Use the `Crowdin.loadTranslations` function to load translations from Crowdin for the specified locale:
```dart
await Crowdin.loadTranslations(Locale('en'));
```
After receiving the translations, change the app locale as usual and the translations from Crowdin will be applied.
## Configuration
| Config option | Description |
|--------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `distributionHash` | Crowdin Distribution Hash |
| `connectionType` | Network type to be used for translations download. Supported values are `any`, `wifi`, `mobileData`, `ethernet` |
| `updatesInterval` | Translations update interval. Translations will not be updated more frequently than the designated time interval (default minimum is 15 minutes). Instead, it will use previously cached translations |
## Real-Time Preview
All translations done in the Crowdin Editor can be displayed in your version of the application in real-time. See the translations that have already been done and the ones you're typing.
> **Note:** Real-Time Preview feature should not be used in production builds.
> Currently, this feature is available only for Android and iOS applications.
### Setup
Add the following code to the Crowdin initialization:
```dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Crowdin.init(
distributionHash: 'distribution_hash',
connectionType: InternetConnectionType.any,
updatesInterval: const Duration(minutes: 15),
withRealTimeUpdates: true, // use this parameter for enable/disable real-time preview functionality
authConfigurations: CrowdinAuthConfig(
clientId: 'clientId', // your clientId from Crowdin OAuth app
clientSecret: 'clientSecret', // your client secret from Crowdin OAuth app
redirectUri: 'redirectUri', // your redirect uri from Crowdin OAuth app
organizationName: 'organizationName' // optional (only for Crowdin Enterprise)
),
);
// ...
}
```
Wrap your app root widget with the `CrowdinRealTimePreviewWidget`:
```dart
@override
Widget build(BuildContext context) {
return CrowdinRealTimePreviewWidget(
child: MaterialApp(
// ...
localizationsDelegates: CrowdinLocalization.localizationsDelegates,
supportedLocales: AppLocalizations.supportedLocales,
),
// ...
);
}
}
```
For [OAuth App](https://support.crowdin.com/creating-oauth-app/) the redirect URL should match your app scheme.
For example, for scheme ``, redirect URL in Crowdin should be `crowdintest://`.
Specify `project.translation` scope for the OAuth app on Crowdin.
For Android app, declare the following intent filter in `android/app/src/main/AndroidManifest.xml`:
```xml
The Crowdin Flutter SDK is licensed under the MIT License. See the LICENSE file distributed with this work for additional information regarding copyright ownership. Except as contained in the LICENSE file, the name(s) of the above copyright holders shall not be used in advertising or otherwise to promote the sale, use or other dealings in this Software without prior written authorization.