Flutter: Localization Quick Start

Gerrel
Gerrel
Nov 2 · 3 min read

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 Localizable class will have four main pieces:

load function will load the string resources from the desired Locale as you can see in the parameter.

of function 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 the Intl.message wrapper in the return, that will make the intl tool lookup this class and populate the initializeMessages for us with the translated ones.

initializeMessages this 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 Localizable there’s another class LocalizableDelegate. This is the true Localization class from our app, Localizable is used to encapsulates the resources and LocalizableDelegate to 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 our Localizable.load.

isSupported, as the name suggests, yes, it returns true if the app has support for the receivedlocale.

shouldReload, basically, if this method returns true then all the app widgets will be rebuilt after theload of resources.

So summarizing, our Localizable class is the object expected by the delegate and contains the resources in the get’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.

 by the author.

Gerrel

Written by

Gerrel

Native mobile app developer (Android/Flutter/iOS)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade