Flutter Localization

Sanju Bhatt
Nov 3 · 3 min read

The beginning

I have create a Flutter project from the scratch .In my code i’ll use transformation based on 4 languages , French , English , Italian and German. Let’s get the party started !

create a new project with below command:-

flutter create -i swift -a java flutter_project_name


Adding Dependencies

Below code snippet shows how to add dependencies in pubspec.yaml class.

Run the command flutter pub get to get the dependencies.

flutter_localizations:
sdk: flutter
shared_preferences: ^0.5.1+2

Creating JSON files

We’ll create a JSON file for every new language and every file will have a key value pair , the key would be same in all the files while the value will vary according to the language.


Folder Structure

The JSON file will be created inside the main project folder in the path mentioned below

Assets>Locale>localization_languagecode.json

Having completed our language files , we now move on to work on Flutter codes.


CODE PART

Create an app translation and delegates class.

App Translation Class

This is a main class of localization.. This class uses load method for loading the sentences from json files and it can get sentences from loaded sentences with text method . It works as a key value pair , as in the TEXT method the key is being passed on.

Delegate Class

Flutter has an abstract class LOCALIZATIONSDELEGATE for declaring your delegate class. So, we will create a delegate class by extending the abstract class.Our Delegate class will be used for implementing Flutter’s abstract class in our code.

app_translations.dart

UI PART

We’ll now set up the MyApp class as the root class in which we’ll set up the languageSetup class as the home for this class .Inside the class we will set up the global localization delegates, supported locale and observer(to get the call back) so that in future any changes in the languages get reflected in the application as well. All of this happens in the main.dart class.

main.dart

Language_Setup.dart Class

We are using language setup as a splash to get our default language based on system language or pre-selected language.

language_setup.dart

HOME

To display the language change on the application with respect to changes made on change language screen.The UI used in this example is quite simpe , you can use a modified one in case it is required.

home_page.dart

ChangeLanguage Page

Firstly we fetch the default language from the device e.g. If the default language is set up as Spanish then we get Spanish , then we set the upcoming locale i.e. we set up English as the default language or the selected language.

change_language.dart

We have used helper files AppString , AppPreferences and Application class.

app_string.dart
app_preference_key.dart
application.dart

Localization Without using context

GlobalTranslation Class

The code above was the default method in which we have to call delegates and pass build context , for working the way up without passing build context we directly decode JSON and fetch the value associated with the key. The AppTranslation class need to be replaced by the class GlobalTranslation in this case.It would be used in the UI as shown below.

global_translations.dart

Localization_Without_Context

Localization_With_Context

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade