lokalise_flutter_sdk 0.2.3

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.

Update pubspec.yaml file

1. Add the intl and lokalise_flutter_sdk package 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.2.2  # Add this line

2. Also, 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 ${FLUTTER_PROJECT}/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": "Ласкаво просимо"
}

5. Now, run the following command:

dart pub global activate lokalise_flutter_sdk

6. Next, run:

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() {
    Lokalise.init('Lokalise SDK Token', 'Project ID');
    Lokalise.preRelease(true); // Add this only if you want to use prereleases
    Lokalise.setVersion(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.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),
            )),
        );
    }
}

Generate localization files for over-the-air translation updates

After the translation templates have been changed (lib/l10n/intl_LOCALE.arb), use the following command in your terminal to generate dart class for over-the-air updates:

lok_tr

or, to activate this command, push once:

dart pub global activate lokalise_flutter_sdk

Change locale

Use the following approach:

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

Get device locale

Add the following line after Lokalise.update():

var deviceLocale = Lokalise.deviceLocale;

License

This plugin is licensed under the BSD 3 Clause License.

Copyright (c) Lokalise team.