Lokalise Flutter SDK #

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

Getting started #

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, enable the generate flag. This is added to the section of the pubspec that is specific to Flutter, and usually comes later in the pubspec file.

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

Apply the new dependencies with the command: 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 lib/l10n folder inside your project, and name them in a following way: intl_LOCALE.arb, e.g. intl_uk.arb, or intl_ar_BH.arb.

(lib/l10n/intl_uk.arb)

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

5. Now, run terminal command: dart pub global activate lokalise_flutter_sdk.

6. Next, run terminal command: tr. You should see generated folder /lib/generated/..

Initialize SDK (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 template have been changed (lib/l10n/intl_LOCALE.arb),
use this command in your terminal to generate dart class for over-the-air updates:

tr

or, to activate this command push once:
dart pub global activate lokalise_flutter_sdk

Change locale #

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

Get device locale #

After Lokalise.update()...

var deviceLocale = Lokalise.deviceLocale;