Add Multi languages to your app using GetX

the best way to set local and add languages on your app using GetX , the most common library on pubdev >> so let’s get started >>

• First at all create a folder inside the lib and call it languages
• create inside it a file and call it translation.dart
• inside this file create class like this :

class Translation extends Translations {
@override
Map<String, Map<String, String>> get keys => {
‘ar’: ar,
‘en’: en,
};
}

• inside the map you can add whatever you need form languages for example:

‘ar’: ar, >>>>>>>>Arabic
‘tr’: tr, >>>>>>> Turkish
‘ru’: ru, >>>>>> Russian
‘en’: en, >>>>> English

• Inside the languages folder create a file for each language named by it’s code .dart for example like this : en.dart , tr.dart , ru.dart , ar.dart
• inside each file add this lines of code and set the translations for example the en.dart file should be something like this

const Map<String, String> en = {
‘signIn’:’Sign In’,
‘signOut’:’Sign Out’,
};

• and the ar.dart file should be something like this

const Map<String, String> ar = {
‘signIn’:’تسجيل الدخول’,
‘signOut’:’تسجيل الخروج’,
};

• add all translations files you need in the same way
• now inside the main file inside GetMaterialApp add :

translations: Translation(),

Don't forget to import the translation class

• and to set default language add :

locale: Locale(‘ar’),

• you can set any language you want to run as default language on your app
• and add this line to set the default language when happening any error like miss key spelling in the map

fallbackLocale: Locale(‘en’),

• now add shared_preferences to you pubspec.yaml file to use it to save the local and language who set by user :
• now create file inside the library folder and call it shared_service.dart and inside it add this lines of code to use shared_preferences more easily

import ‘package:shared_preferences/shared_preferences.dart’;

class PrefService {
Future createString(String key, String value) async {
SharedPreferences _pref = await SharedPreferences.getInstance();
_pref.setString(key, value);
}

Future readString(String key) async {
SharedPreferences _pref = await SharedPreferences.getInstance();
var cache = _pref.getString(key) ?? ‘’;
return cache;
}
}

• and create file inside the languages folder and let’s call it languages_controller.dart. to control _ set and save the languages

class LanguageController extends GetxController {

final PrefService _prefService = PrefService();

var savedLang = ‘EN’.obs;

saveLocale() {
_prefService.createString(‘locale’, savedLang.value);
}

Future<void> setLocale() async {
_prefService.readString(‘locale’).then((value) {
if (value != ‘’ && value != null) {
Get.updateLocale(Locale(value.toString().toLowerCase()));
prefLang.value = value.toString();
update();
}
});
}

@override
void onInit() async {
setLocale();
super.onInit();
}

}

• now add this drop-down item where ever you want inside your desgin to let user choose and set the language

GetBuilder<LanguageController>(
init: LanguageController(),
builder: (value) {
return DropdownButton<String>(
dropdownColor: bgColor,
value: value.prefLang.value,
icon: Icon(
Icons.arrow_downward,
size: 20,
color: goldColor,
),
elevation: 16,
style: const TextStyle(color: Colors.white),
underline: Container(
height: 1,
color: goldColor,
),
onChanged: (String? newValue) {
value.prefLang.value = newValue!;
Get.updateLocale(Locale(newValue.toLowerCase()));
value.saveLocale();
},
items: <String>[
‘EN’,
‘AR’,
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
}),

• the last step you need just use the keys from maps instead the texts and add .tr to it for example :

Text(

‘signOut’.tr,

),

• Don't forget the .tr after the text and make sure to use the correct spelling of key you set
• and that’s it Congratulations 🥳 👏 🎉 you have multi languages in your app work perfectly >>
• Hey don’t leave this page without read the lines bellow it’s So Important 😃

Preparing and writing these lessons takes a lot of time and work from me so do not forget to clap 👏 to it here and share the lesson and support my channel in YouTube by writing comments and subscribe to it and certainly hit the like button 👍

Thank You

Dv. Amar Awni

#codewithammar

#englishwithammar