Flutter Internationalization by Using JSON Files

3 min readMar 30, 2018

The Flutter has a good document for internationalization but this document is so mixed. Today, the Flutter haven’t any language class or function for using your own sentences on the app but you can create your own language provider and use this easiest. In this tutorial, I’ll create my own language provider and I’ll get my sentences by json files.

Getting Started

I’ll use a clean Flutter project in this tutorial. Let’s create a new Flutter project and clean your main.dartfile for using by this tutorial. In this tutorial, my app have 2 languages which are English and Turkish. The App will show sentences by device language. Let's start!

Prepare Your Project

First of all, you need to prepare your project for using the locazations dependencies. Next, you can start to code your project.

Create Json Files

I’ll get my sentences from json files. I choose json because a lot of translation tool support this file type. So, I can use this sentences easily in translation tools. Open your Flutter project and create two files for languages.

resources/lang/en.json

resources/lang/tr.json

Create these files by these contents. I have only one sentences because I just show how to work the localization features in Flutter in this tutorial.

Add Json Files by Assets

We have json files now but the Flutter doesn’t know that files. So, we should say these files are my assets to Flutter. Flutter using pubspec.yaml for looking the your assets files. In this file, you can show assets block. Let's add your files to this code block.

Now, we have completed our language files. Next, we need to work on Flutter codes.

Add Localizations Package

Flutter have a localizations package for translating own component by languages. This package supports 19 language today. So, we can use this package for Flutter components. Let’s open pubspec.yaml file and add flutter_localizations to your dependencies.

Next, you should run get packages command for updating your project dependencies. Open your terminal in project and run this code.

flutter packages get

You are ready for using the localizations package.

Code Your App

Now, you can start to code your app. In this tutorial, i have 2 classes for locazations. Let’s start coding these classes. I used example codes in this tutorial.

Create DemoLocalizations Class

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

Create Delegate Class

You have a localization class but we need a Delegate class for using this class on Flutter app. Flutter has a abstract class LocalizationsDelegate for declaring your delegate class. So, we will create a delegate class by extending the abstract class.

Create MyApp Class

Now, we have our language classes. So, Let’s use these classes on Flutter MaterialApp class constructor. We will define our supporting languages in this step. Next, we will define detecting language function. And, we will define our delegate classes and flutter localization package delegate classes.

And I’ll add a page for testing the localization of app. When I want to translate a text, I’ll use my transmethod in DemoLocalizations class.

That’s all. Now, your app can represent your sentences by the device language. Let’s give a shot.