Easy way to localize your flutter app | Localization in Flutter

in this video I will show you how to achieve localization in your flutter app flutter localization provides the flexibility to add multiple languages to your flutter app so that you can Target multiple region user for example country like United States Canada user from there will see your app in English while country like Spain Mexico user from there will see your app in Spanish before we dive into the code don't forget to hit the Subscribe button firstly we have to add packages that needed to achieve flut localization so go to your pspec file add flutter localization SDK and inl package next we have to create translation file for each languages so inside my lead folder I will create another folder called l10n this naming follows flutter official documentation to prevent any confusion I will just follow the official naming inside this folder I will create three ARB file for each languages so in this tutorial I will create localization for Arabic English and Spanish ARB file is essentially a Json file enhan for localization so it's store key value pair now in each file I will create a translation language for hello world for example in Arabic this is the translation for hello world and will be stored as the value same goes for English and Spanish for tutorial purposes I will just add one key value pair if you wish to add more values just modify the Json in ARB file next we have to configure localization tool so in your flutter project root directory create a new file called l10n yo this file will hold the configuration for the genore l10n tool this genore l10n tool mainly used to generate code for the ARB files inside this yma file we have to add three configurations firstly ARB DD the path of the directory that contains the translation files secondly template db- file the name of the template ARB file that will be used as basis for generating the dot localization files lastly output D localization D file the name of the file for the output localizations and localization delegate classes once we added this configuration now go back to ppsp ymer file below flutter set the generate value to true this enable flutter compiler to automatically run the ymer file during build now in the terminal run flutter PB get command once this command run successfully in your root directory there is a folder called dot doore to inside this folder you can see a new folder generated called flut uncore gen and inside flut uncore gen is all the localization generated code files each languages that you add will have its own generated files and one app localization file make sure you have the correct number of files generated before you continue these are generated code file so do not modify it manually coming back to our main do do file firstly import app localization file then in material app wiget set the localization delegates value to app localization do localization delegates and supported locals value to app localization do supported local once this is set up we can now apply localization in our code now I will show you how to use flutter localization in flutter vidget firstly we have to call localization do override function to overwrite the languages accordingly in this function we have to specify the language local I will set it to English first next in the child parameter return a builder viget so that it can access to the local using the correct build context in the Builder vget only then return a text vidget in the text viget we have to access the hello world text using App localization doof context. hello world this is because we have created localized hello world text in our ARB files now let's try it out in the simulator so as you can see the simulator showed hello world in English as I set the local to en now when I change the local value to es which is Spanish and I rebuild the app you can see that the hello world text translated to Spanish that I have set in the ARB file same goes for Arabic local in conclusion this is how you achieve localization in your flutter app if you have any question feel free to comment below don't forget to like the video and subscribe to our Channel see you in the next tutorial

Channel: AI with Flutter

Views: 2,146

Keywords: localization in flutter, easy localization flutter, flutter app localization, flutter app development, flutter tutorial for beginner, flutter localization, flutter internationalization

Id: YPXbesBx9is

Length: 8min 8sec (488 seconds)

Published: Tue Mar 26 2024