A Comprehensive Guide to Flutter Language Switching with GetX

Simplify Localization with Flutter and GetX

Introduction:

Flutter is a popular framework for building cross-platform applications with a single codebase. One of the essential aspects of app development is to provide support for multiple languages. Flutter provides built-in support for localization, but managing multiple languages can be time-consuming and error-prone.

GetX is a powerful state management library that makes it easy to handle complex state management in Flutter. It provides a range of useful features, including dependency injection, routing, and internationalization. In this blog post, we will explore how to use GetX for language switching in Flutter applications.

We will begin by introducing localization and the challenges of managing multiple languages. Then we will dive into the technical details of implementing language switching with GetX, including how to define and manage translations, switch between languages, and persist the user’s language preference. By the end of this tutorial, you will have a solid understanding of how to use GetX to streamline localization in your Flutter applications.

Localization is the process of adapting an application to a specific language and culture. With the growing global market, it’s become increasingly important for mobile applications to support multiple languages. Users expect to be able to use an app in their native language, and failure to provide this can lead to negative user experiences and decreased app engagement.

However, managing multiple languages can be a challenging and time-consuming task. It requires translating all the user-facing text in the application, including buttons, menus, and alerts. Additionally, the layout and design of the application may need to be adapted to fit the conventions and idioms of the target language and culture.

Without a well-defined localization strategy, managing multiple languages can lead to a bloated codebase, duplicated code, and inconsistent translations. The traditional approach to localization involves creating multiple versions of the same codebase, one for each language. This can quickly become unmanageable, particularly for applications with frequent updates and a large number of languages.

Fortunately, Flutter provides built-in support for localization, which allows developers to simplify the process of managing multiple languages. Additionally, GetX provides a range of useful features that make it even easier to handle complex localization tasks, such as language switching and translation management.

Use GetX for Language Localization :

Step 1 : Import Get

get: ^4.6.5

Step 2 : Change MaterialApp to GetMaterialApp in Main file

Step 3 : Create new directory under Lib directory named language

Step 4 : create an class called Language in new directory

class Languages extends Translations {
@override
Map<String, Map<String, String>> get keys => {
'bn_BD': BnLanguage().bnLanguage,
'en_US': EnLanguage().enLanguage,
};
}

Here BnLanguage and EnLanguage are class names for the Bangla and English Language Class respectively which hosts all the localized language for that specific language.

Here in bn_BD bn represents the language code and BD represents country code,

This codes can be found here : https://saimana.com/list-of-country-locale-code/

Step 5 : create a new class named “LanguageGlobalVar”

This class will hosts all the language keys

static String HELLO_WORLD = “hello_world”;

It is recommended to name the variable in all caps and the value to be with all small with underscores and no space

We will use them later.

Step 6 : Create an class for each language the app has i.e. bn_language for Bangla Language:

The Hashmap will have keys from LanguageGlobalVar Class and the value will be the text to be displayed for that language.

class BnLanguage {
//create hashmap for bangla language
Map<String, String> bnLanguage = {
LanguageGlobalVar.HELLO_WORLD: 'হ্যালো বিশ্ব',
//add other entries like this here
};
}

class EnLanguage {
//create hashmap for english language
Map<String, String> enLanguage = {
LanguageGlobalVar.HELLO_WORLD: 'Hello World',
//add other entries like this here
};
}

Step 7 : to use the code in widgets put extra .tr after the Variable from LanguageGlobalVar class

Text(
LanguageGlobalVar.LANGUAGE_CHANGE.tr,
)

Step 8: to change language locale use updateLocale methode in GetX

Get.updateLocale(Locale(“en”, “US”))

to get the current user Locale useGet.locale ( Could be null )

N.B. Save User Preference in SharedPrefs or Local Database like you do (I’m not documenting it here as that is a basic code, but if you want it, comment in this story, i will try to add it or write a new post about it)

get | Flutter Package