lokalise_flutter_sdk 0.3.0

Lokalise Flutter SDK over-the-air translations updates. This package provides new translations from lokalise.com without a new app release.

Lokalise Flutter SDK

This package provides over-the-air translations updates from lokalise.com.

These instructions can also be found in our Developer Hub.

Getting started

Please note that you'll have to setup a basic Flutter project with a pubspec.yaml file before proceeding. You can check our blog post to learn how to get started with Flutter I18n.

1. Add the intl and lokalise_flutter_sdk packages to the pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:        # Add this line
    sdk: flutter                # Add this line   
  intl: ^0.17.0                 # Add this line 
  lokalise_flutter_sdk: ^0.3.0  # Add this line

2. In the pubspec.yaml file, set the generate flag to true. This flag should be added to the section of the pubspec.yaml that is specific to Flutter:

# The following section is specific to Flutter.
flutter:
  generate: true # Add this line

Install new dependencies by running:

flutter pub get

3. In lib/l10n, add the intl_en.arb template file. For example:

{
    "@@locale": "en",
    "pageHomeWelcomeMessage": "Greetings!!!",
    "title": "Lokalise SDK",
    "@title": {
      "type": "text",
      "placeholders": {}
    },
    "welcome_header": "Welcome",
    "insentive": "Іnsentive",
    "sugnup_button": "Signup Button"
}

4. Next, add one ARB file for each locale you need to support in your Flutter app. Add them to the lib/l10n folder inside your project, and name them using the following pattern: intl_LOCALE.arb, e.g. intl_uk.arb, or intl_ar_BH.arb.

{
    "pageHomeWelcomeMessage": "Вітаю вас!",
    "welcome_header": "Ласкаво просимо"
}

Note: You can also download the ARB files for your project using Lokalise. Just make sure to choose the Flutter(.arb) format and the following file structure: One file per language. Bundle structure: locale/intl_%LANG_ISO%.%FORMAT%

5. Now, run the following command:

flutter pub run lokalise_flutter_sdk:lok_tr

You should see a new generated folder lib/generated/.

Initialize SDK

Change your main.dart file:

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:lokalise_flutter_sdk/ota/lokalise_sdk.dart';
import 'generated/l10n.dart';

void main() async {
    await Lokalise.init(
      sdkToken: 'Lokalise SDK Token',
      projectId: 'Project ID',
      preRelease: true, // Add this only if you want to use prereleases
      appVersion: 0 // Add this only if you want to explicitly set the application version, or in cases when automatic detection is not possible (e.g. Flutter web apps)
    );  
    runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            title: 'Lokalise SDK',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: const MyHomePage(),
            onGenerateTitle: (context) => Tr.of(context).welcome_header,
            localizationsDelegates: const [
              Tr.delegate,
              GlobalMaterialLocalizations.delegate,
              GlobalWidgetsLocalizations.delegate,
              GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: Tr.delegate.supportedLocales,
        );
    }
}

class MyHomePage extends StatefulWidget {
    const MyHomePage({Key? key}) : super(key: key);

    @override
    State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = true;

    @override
    void initState() {
        super.initState();
        Lokalise.instance.update().then( // after localization delegates
            (response) => setState(() {
              Tr.load(const Locale('uk')); // if you want to change locale
              _isLoading = false; 
            }),
            onError: (error) => setState(() { _isLoading = false; })
        );
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text(Tr.of(context).title),
            ),
            body: Center(
              child: _isLoading 
                ? const CircularProgressIndicator() 
                : Center(
                    child: Text(Tr.of(context).pageHomeWelcomeMessage),
            )),
        );
    }
}

After the translation templates have been changed (lib/l10n/intl_LOCALE.arb), use the command from step 5 to regenerate the Dart classes.

Over-the-air translation updates

With the previous steps you should be able to use the translation from the ARB files in your project, and using Lokalise.instance.update()you are retrieving the latest translations version for your app, but in order to use it you will need to generate a new translation bundle in Lokalise.

To generate a new bundle you need to make an API request to the download files endpoint with the following options:

{
    "format": "flutter_sdk",
    "export_empty_as": "skip",
    "placeholder_format": "icu",
    "plural_format": "icu"
}

To read more info about how to do the request, please check this.

Change locale

Use the following approach:

setState(() {
  Tr.load(const Locale('ar_BH'));
})

Notes for beta version

• The positional placeholders (Hello {0}) are not supported for now.
• The plural translations are not supported for now, we are working on them.
• To create a new bundle, make sure to follow the Over-the-air translation updates section. If you choose different options you might experience some issues. We are aware of them and are working on improvements.

License

This plugin is licensed under the BSD 3 Clause License.

Copyright (c) Lokalise team.