Improve your i18n in Flutter
I’ve started to use Flutter some months ago creating an app from scratch👇👇
As an Android native developer, I want to share my experience and thoughts about Flutter and its great performance for…medium.com
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
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.
final Locale locale;property.
- Create a static function named
ofthat returns a
Localizationtype and has
BuildContextas parameter type. It will be the entry point to access to string resource. That is the reason because it’s
- 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
- It must extend of
isSupportedfunction. You have to check if the provided
Localeis contained in the Map
loadfunction implementing a new instance of
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:
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.