Flutter Internationalization the Easy Way — using Provider and JSON

Image for post
Image for post

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.

In this tutorial, we are going to learn how to localize our apps the simple way by using JSON files to store your data in multiple languages.

Getting Started

Let’s create a new Flutter project and clean your main.dart file. In this tutorial, my app has 2 languages which are English(LTR) and Arabic(RTL). The App will show sentences by device language.let’s do it

Prepare Your Project

before writing any actual code we need to create the files containing translated strings first and update the pubspec.yaml file.

Create a new folder i18n in the project root. This folder will hold all of the language files. Our project, we will have 2 Language Arabic and English so we will create en.json and ar.json.

Image for post
Image for post

These files will contain only simple key-value pairs of strings. Using JSON is beneficial, because similar to XML, you can just give it to a translator without them needing to access your code.

Flutter has a localization package for translating own component by languages. so we need to add it .open pubspec.yaml file and add flutter_localizations to your dependencies.

Image for post
Image for post

since you’ve just added new language JSON files, you need to specify them as assets in order to access them in code.

Image for post
Image for post

DemoLocalizations Class is the main class of localization. This class will load all sentences by given language then this class gives sentences by the loaded languages. This class uses load a method for loading the sentences from json files and it can get sentences from loaded sentences with translate method. My Language service will work by sentence keys.

you still need to provide a way for Flutter to step in and decide when the load() method will be called and which locale will be used. Flutter localization uses delegates for initialization. this is why we will create a delegate class to be able to use that class.

The setup of the localization happens inside the MaterialApp widget, which is the root of a Flutter app. Here you specify which languages are supported

Now we have all the setup done to start working.

Translating text in the UI

to translate your Just call the of() helper static method on AppLocalizations() to get the instance properly set up by Flutter and then translate using the keys you’ve specified in the JSON files!

Image for post
Image for post

Now to test if this works. Go to the app Settings and change the language to Arabic and re-open the app and you will see that the message and title are translated immediately to Arabic.

Image for post
Image for post

changing App language manually

Let’s be honest. When you’re building an app which you plan to release to the public, having it responsive to locale is not enough. you need to give the user the option to change the language and store his preferred language. MaterialApp allows us to immediately specify what locale we want our app using the locale property . to change this property I will be using provider and shared_preferences to store user choice.

Go ahead and install the 2 new dependencies into our pubspec.yaml

  • shared_preferences
  • provider
Image for post
Image for post

Our AppLanguage will have 2 responsibilities

  • fetch the locale from the SharedPreferences whenever the app loads for the first time
  • Calling changeLanguage() from anywhere in the app to change the locale and store it in SharedPreferences .

Updating Main And Ui

to force our app to change language we will use locale property.

locale property: is the locale used when .the app first run. The initial locale for this app’s Localizations widget. If the locale is null the system’s locale value is used.

before starting our app we will create AppLanguage() instance and call our function fetchLocale() and pass to it our app to make sure it's unique and we will create two buttons to change the language.

That’s all our app Should Be ready to rock.

Image for post
Image for post
Image for post
Image for post

Final Thoughts

The sole objective of this article is to share a solution that works for me, which I hope could also help others. I am sure other solutions exist using a different approach than JSON Files so I hope you check them.

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 to consider following me on Github, or LinkedIn.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store