Flutter Localization with Riverpod - Flutter App Internationalization

hey guys welcome back to our channel in today's video we're going to be localizing our chat application so that it can support multiple languages we're going to be using the flatter localization from flatter SDK so we're going to be following the instructions from this official documentation so without further Ado let's Dive Right In so before we install any package let's define first the languages that we're going to be supporting so inside this features directory let's create a language directory so we're going to be defining the languages inside an enam Al so let's define the properties down here this needs to be ConEd like this I don't know if this is correct I am just uh translating it all right these flags here are just an emoji I just copied it from this uh website here you can see you can see all the flag emojis here and you can just simply copy any flag that you're interested in all right so let's create the provider for this let's give it a default of English Okay so right over here let's create a popup menu button for our language settings so that once we tap on it it will show the list of languages where we can choose from okay so let's add the popup menu button inside this actions of our app bar but let's define the widget inside this language directory let's give this a type of language so what we're doing here is we're looking for the values of the language and for each value we return popup menu item and a row as a child and inside this row we get a child of the language flag and the language name and here on the unselected Callback we are updating the language provider passing the selected value as its state all right so let's now go ahead and use this all right we now have the popup menu button in place so let's now test this out oh no why it's not working what what is this oh there I forgot to pass the value here okay let's try it one more time all right all right it's now updating as expected okay so since it's now working let's now start the integration of the flatter localization package okay it says here that we need to create a project but since we already have a project let's go ahead and continue with the installation take note that when you're installing the package you need to choose the flatter localizations with s because this is the official package all right so let's import this and then let's copy this and since we're supporting for languages let's add to more local class here all right so it says here that we need to install the inl package all right and then let's add this inside our prfect that file all right and then here and then here it says here that we need to create an l10n yaml file inside the root directory of our project and then add this code so let's go ahead and do that and then let's copy this as instructed okay okay next up it says here that we need to create this appcore en. ARB file inside this l10n and inside this s directory so let's go ahead and create the l1n directory first since we are supporting for languages we're going to create a four files here you can name these files wherever you want as long as it ends with an underscore the language code and the ARB extension so inside these files is where we need to Define all the strings that we want to localize so so we need to Define it as a k value pair or adjon type and all the case should be the same for each files and the values should be the translations for each languages so let's localize this one this one and all of the labels of this botom navigation bar so okay okay after defining all the translations let's now restart our app okay so after restarting inside this Dart tools this flatter gen was autogenerated and this contains the classes for each of the language that we are supporting and inside of each class all the gets of the translations are already defined we also have this app localizations that Dart and and this is now the main class of our localization and inside this class we can see that the list of localizations delegates are all defined here and also the list of supported locals so let's go ahead to our my app class and reference to these definitions to eliminate redundancy okay let's we need to import it all right so we're now ready to go and here it says here that this is how we reference the localized strings so let's go ahead and implement it since we know that the settings is not null we can safely use this assertion operator here all right all right we are now referencing to the localized strings from the app localizations class but how can we link this popup menu button to our app localization class because as as you can see if we change the language it is not changing the text here so how can we do that so what we need to do is to go to our material app widget and inside this build widget we need to watch the selected language and down here we need to tap on the local attribute assign a local class and pass the code of the selected language all right let's now test this okay there you go it's now updating as expected all right so since it's working correctly let's go ahead and continue exploring some more features so here it says here that we can also localize a string with a parameter and the way to do that we can Define the string as usual and then wrap the parameter inside a bracket like this so let's go ahead and test this let's test it here all right let's define it like this take note that you shouldn't be adding a comma here in the last part of your K value pair because it will throw an error so let's remove this and restart all right all right perfect it's perfectly done however there is still another problem because when we try to restart our app the language revers back to the default language so what we need to do is to purchase the selected language in the local storage so we'll be using shared preference here all right to save time I already created this language repository class and I also have already installed the shared preferences and inside this class we Define this language code K as a static cons and we Define this set language method and this get language method so here in this set language method we are fetching the shared preferences using this syntax because I wrap the shared preferences inside the future provider after that we call this set string passing the language code key as the key and the language code as the value and then we update this language provider passing the selected language and here in the get language we once again fetch the shared preference and then we are fetching the code using this get string method passing the language code key and saving the result to a variable and here we are looping the values of the language and for each value we check if the value code is equal to this fetch code and if so we return the value if this doesn't return a value we return the English as a default all right and then lastly we Define the provider of this language repository class Okay so let's move on to the main. dart here in the main function we converted this to a future void and then we Define a provider container here and using this container we tap on the language repository class and call this get language method and then we assign the value to a variable after that we override the language provider using this override WID method and assign this fetch language as a value all right so inside the language popup menu here on the unselected Callback we tap on this language repository provider and call this set language method passing the selected value coming from here all right that's it let's test it let's change this with log all right let's try to restart okay as you can see it's still the yog let's change it to Hindi and then restart okay all right it's being persisted correctly okay so that's it guys if you found this video helpful please give it a thumbs up share and subscribe thank you

Channel: JOBERTECH

Views: 1,367

Keywords: flutter, flutter tutorials, flutter tips, flutter development, flutter ui design, flutter ui, flutter widgets, mobile app development, code guide, flutter tips & tricks, joberTech, JoberTech, JOBERTECH Flutter, Flutter Tutorials, Mobile App Development, Coding Guide, Flutter UI Design, Flutter UI, Flutter Widgets, Flutter Tips & Tricks, flutter_localization, App Internationalization, app internationalization

Id: wry7HwFpx-8

Length: 24min 30sec (1470 seconds)

Published: Tue Oct 31 2023