
At some point you want to internationalize your mobile app. It will expand your global reach and user base. So how do we configure a Flutter project in a nutshell?
In case you want skip step 1, 2 and 3 you also use the mobile first localization platform jotive.com that will make managing your translations a breeze.
1. Add some dependencies
Add the following dependencies to pubspec.yaml. And run ‘flutter pub get’ in the terminal if your IDE did not do this automatically.
2. Create a Localizable.dart class
Create Localizable.dart file in the lib folder with the skeleton code below. You can change the supported locales as you see fit.
This code will make initialization and using localized strings much easier. This skeleton class is taken from another article and I’ve added some minor tweaks. But the quoted explanation of this is class is as follows.
This
Localizableclass will have four main pieces:
loadfunction will load the string resources from the desired Locale as you can see in the parameter.
offunction will be a helper like any other InheritedWidget to facilitate the access to any string from any part of the app code.
get’s functions that will list the available resources translated to our app, note theIntl.messagewrapper in the return, that will make the intl tool lookup this class and populate theinitializeMessagesfor us with the translated ones.
initializeMessagesthis method will be generated by the intl tool, note the import"l10n/messages_all.dart", this file contains the method that effectively load the translated messages.Below the
Localizablethere’s another classLocalizableDelegate. This is the true Localization class from our app,Localizableis used to encapsulates the resources andLocalizableDelegateto provide this resources to our app. It can be divided in three main pieces:
load, from the docs: the load method must method return an object that contains a collection of related resources (typically defined with one method per resource). We return ourLocalizable.load.
isSupported, as the name suggests, yes, it returnstrueif the app has support for the receivedlocale.
shouldReload, basically, if this method returnstruethen all the app widgets will be rebuilt after theloadof resources.So summarizing, our
Localizableclass is the object expected by the delegate and contains the resources in theget’s.
3. Create .arb files
We’re now going to add some localization files. The translations are made using Application Resource Bundle files, which have a .arb extension. Each .arb file contains a single JSON table that maps from resource IDs to localized values.
Add the following base file in your project: ./lib/I10n/intl_messages.arb
Add the following english file in your project: ./lib/I10n/intl_en.arb
Add the following files for your targeted languages in ./lib/I10n/*.arb
4. Initialize Localizable.dart
Your app’s initialization class (main.dart / or app.dart) needs some changes.
import the flutter_localizations library and specify localizationsDelegates and supportedLocales for MaterialApp:
You can now add a text-widget anywhere you like to see the result ‘Text(Localizable.of(context).example_string)’
When you use the mobile first localization platform jotive.com this process will be automated for you. Content managers, translators and developers can easily synchronize their work with Jotive.
