Improve your i18n in Flutter

I’ve started to use Flutter some months ago creating an app from scratch👇👇

Flutter: creating an app from scratch

So, I want to share with you a nice tip to improve localizations strings in Flutter. I’ve implemented it and it worked for me.

Note: you must include this dependency in your pubspec.yaml

flutter_localizations:
sdk: flutter

We’ll support for two language: english (‘en’) and spanish (‘es’).

1- Create Localization Strings file

First, you must create the strings that you will have in the app. So, let’s define them as a simple map with key-value making first a file named localization_strings.dart and then the following content:

We simply define the name of string as a const String . Then, we use it in the Map definitions as key. The values will be the translated strings.

If you want to add more languages, you just have to add another Map definition with the language shortcode (Code 2)

2- Create Localization file

The second step is create a file named localization.dart. In that, you must define two clases: Localization and LocalizationDelegate:

As a quick summary, I’ll enumerate the main things that you must have in mind.

Localization class

• Create final Locale locale; property.
• Create a static function named of that returns a Localization type and has BuildContext as parameter type. It will be the entry point to access to string resource. That is the reason because it’s static .
• Create a static Map variable with this types: Map<String, Map<String, String>> . Also, you must define the content with two key-values which they will be the language shortcode for localization (that we defined in . To retrieve some value, you must call to map and use the language shortcode (1st key) and the name of string (2nd key)
• Create getters to access to strings. You can customize it making a function that resolves the call to map

LocalizationDelegate class

• It must extend of LocalizationsDelegate<Localization>
• Override isSupported function. You have to check if the provided Locale is contained in the Map
• Override load function implementing a new instance of SynchronousFuture<Localization> class.
• Override shouldReload function returning false . We don’t want to reload the async operation.

3- Define delegates and support languages

We must to define two more things:

• Localization Delegates: defines where the app should take the localization resources.
• Supported Locales: configures what languages should be taken.

Those things must be defined when you create an App (e.g: MaterialApp)

4- Call to some string using Localization class

Now we are ready to use a translated string. Let’s call it from a RaisedButton from our Screen:

We simply call to Localization.of(context).[string_resource_name] . And that’s all! We are using the language based on the found locale on device.

Feel free to share any thoughts or comments! They will be welcomed ;)

The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.