Flutter Internationalization the Easy Way — localization without BuildContext
“Why Localization in Flutter is so complicated?” I bet you just asked yourself this question. I, too, have exclaimed this question in frustration when I try to implement multiple languages in my application (English, Thai, and Vietnamese)
If you are going to deploy your app to users who speak another language then you’ll need to “internationalize” it. Flutter offers good documentation on how to set up your localized values for each locale that your app supports. but it can be sometimes unclear and hard to implement or hard to manage. Especially the need for BuildContext, which I find a bit troublesome. Let me explain why:
- When I design a function/method or a widget, my function would end up like this if buildcontext is used.
Widget buildMessageWidget(BuildContext context) {
return Text(DemoLocalizations.of(context)[WidgetMessages.message1]);
}2. Flutter Internationalizing is using Locale which is derived from the Device’s Language, this means the user will have to change Language in Settings if they were to switch language. <Personally, I want my user to be able to change the language in my app>
In this tutorial, I am gonna walk you through my current way of handling localization using only Static Map.
After this Tutorial, your code will look like this
class DemoApp extends StatelessWidget { @override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(LanguageService.title),
),
body: new Center(
child: new Text(LanguageService.title),
),
);
}
}
Instead of this:
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(DemoLocalizations.of(context).title),
),
body: new Center(
child: new Text(DemoLocalizations.of(context).title),
),
);
}
}What you need
- A Bug-free Flutter Project
Create the language file
class LanguageService {
static String defaultLanguage = 'en'; static Map<String, Map<String, String>> _localizedValues = {
'en': {
'title': 'Storefront',
'language': 'Language',
'googleLogin': 'Login with Google'
},
'vn': {
'title': 'Cửa hàng',
'language': 'Ngôn ngữ',
'googleLogin': 'Đăng Nhập với Google'
}
}; static set language(String lang) {
defaultLanguage = lang;
} static String get title {
return _localizedValues[defaultLanguage]['title'];
} static String get language {
return _localizedValues[defaultLanguage]['language'];
} static String get googleLogin {
return _localizedValues[defaultLanguage]['googleLogin'];
}}
That’s it!
You can start using it anywhere, and everywhere.
The default language would be ‘en’ (English). So you will have to expose a button to allow users to change the default language using this LanguageService.language = ‘vn’
Other than that, this way has essentially solved the Internationalization of your application. You just have to remember the user Language Preference. This can be done by saving the language to local memory (Here is the plugin for that)
Final Thoughts
The sole objective of this article is to share a solution that works for me, which I hope to help others. I am sure there are advantages using the Locale approach, but that was overkill for me.
That’s all, thanks! If you liked this post, don’t forget to leave a 👏!
If you found this article interesting and Flutter development interests you, Or you need help do consider following me on Github, or LinkedIn.
If you found this article helpful and we would like support my writing. You can buy me a coffee at https://www.buymeacoffee.com/itchybum
