Multi Language Support App In Flutter | Flutter Internationalization and Localization Tutorial

hi everyone welcome back to my channel in this video I'll be talking about how to use multiple language support in flutter application if you are developing a mobile app and want it to succeed at the global level you must consider internationalizing and localizing your flutter app in this tutorial we will learn an easy way to implement the internationalization and localization in flutter app as you can see here this is the demo of application so here it is supporting five Language by default it is showing content in English but when I'll choose Language by clicking on the drop- down it will change according to our language selection so let's jump into the coding part right after this [Music] intro now we are in main page and I have deleted all the boiler plate code accept this main function and now I'm taking your state full widget and rename this as my app and here I'll use material app so now I'll install a package which is flutter localization and it says flutter localization is a package used for inapp localization with map data easier and faster to implement so we will go inside pbpc and we'll paste the package and the pubget and also there is one more change an Android app build. gridle you make sure that your Min SDK version is at least 21 now my package is installed let me ignore this now if you will run the app you will see a black screen so inside this I'll have to add screen which is home screen it is also a stateful kind of widget and it is returning scaffold so now now I'll take flutter localization for initializing flutter localization instance and I'll create a method configuration localization and we'll call this method inside any state so let me remove this figuring localization now inside configuring localization function we'll initialize the localization and here it will take two parameters which is map locals and initial language code so map locals will be all of the language that we are using initial language code I'm using en for English Language by default here I'm creating one function on translated language which will be called once we will change our language and inside this first of all let me add parameter which is local and inside this I'll be using set state so that it may it will get updated and here I'll create a call back function localization do on translated language and we'll initially ize it with my created language on translated language here let me remove this yes that's it so after this now I'll create one folder by the name localization here inside this again I'll create dot file by the name locals and here I'll Define all the language that we will use in our app so mixing local data and inside this curly Braes first of all I'll Define constant strings I'll be using abar AB bar title and it will be [Music] title let me copy paste this would be heading title heading text I'll use this for heading title another one is string body text body text and after this static constant map and it will be map of string with Dynamic values and this is for English language that is why I'm using Ian here so inside this app bar title let's say app localization and heading title heading text basically mobile [Music] application and last one body text would be this is demo application on localization so let me copy this and I'll use DN here for German language now I'm using using Google translator to convert these English text into German now again I'll copy this and I'm using AE for Arabic language again using Google translator and zh for Chinese language and I'm using hi for Hindi language so that's the thing let's move up I'm creating list of map local and and here I'm defining map local and en for the language code and local data. here I'll change this according to the respective languages little bit of correction DN is not the code of German de is the code so I'll change that now we'll move to main function and inside this map locals I'll use the same list of locals local basically for initial language code I'm using Ian because I want my app to start with English language and here there are two properties that we will have to add supported locals it would be localization do supported locals and if this is the error app is app is crashing so don't worry we will have to add another property localization delegates that would be localization do localizations delegates and now when we will run the application the error which was coming is no more now we are done with main function now we will do coding for home screen here I'm using App bar inside scap fold and as a title of app bar I'm using text vidget and as value I'm using using local data doab bar title. get string and inside that I'm passing context so initially it will print in English because I'm using here Ian now I'm changing it to hi for printing my appar title in Hindi let me run this and as you can see here my app title is changes from from English to Hindi now let me revert back to English after that inside body I'm taking your column children and inside text viget I'm using context dot format string local data dohe heading text and then there is argument because we want some extra data in front of each heading for now I'm using Mt array let's apply some styling font size 25 font weight would be bold so there is no data after mobile application so for adding extra data let me apply some padding also so I want this flutter text to be written after the heading text so for that you will have to apply percent a to each language to each language local so this is flutter and now I'll apply percent a in Arabic also we will have to apply percentage to the left side because we write Arabic from right to left in Chinese I don't have idea but I'm going to add here percent a and in German and now Finly in Hindi here I have added drop- down in app bar so inside action I have added drop- down button and inside items I have added drop- down menu item with a value of language code I for English and the text which would be visible is written as a child inside text widget so same as for Arabic Chinese German and Hindi and on change whenever we will tap on the particular drop down it will provide a value which is the language code now let me run this and I'm printing the value here whenever I'm going to tap on any drop down option it will provide value which is local code so inside this I'll have to create another method by the name set Loc and we'll pass the value so inside this I'm applying condition if value equal to equal to null then it will return otherwise if value equal to en n then it would be English and also setting up the translation according to the language code for the rest languages so I'm applying all the codes here for different languages and also we'll have to provide El if condition so inside every condition I'm using here flutter localization translate and inside that I'm providing local code language [Music] code and inside else it will return and after that there would be set State and inside that currently localized will be equal to the value now let me run the application whenever I will tap on any language it is changing the value actually here also I will have to change the the code for German I will have to change the code to De now when we will run the application that it is changing the language as per our selection let me add another text which is body [Music] text and I'll REM remove this and instead of that I'll be using local data dot body text do get string and we'll pass the current context and also let me change the font weight and font size of body text now you can add your image or any other text if you want let me apply some space between heading and body text so I'll be using height of 300 now when I'll select any language each and everything is changing and the heading text is coming with flutter text just because of line number 50 that I'm using here so you must have learned something important in this video if you do then please hit the Thumbs Up Button And subscribe to my channel hope to see you next time in the next video bye for now

Channel: thecodeme

Views: 694

Keywords: flutter, flutter app development, app localization, internationalization, flutter localization, flutter internationalization, mobile app development, cross-platform development, flutter tutorial, flutter localization tutorial, flutter internationalization tutorial, app development tutorial, flutter packages, multilingual app development, flutter framework, programming tutorial, mobile development, software development, coding tutorial, flutter widgets, dart programming

Id: jbeFG2uHB5Y

Length: 16min 26sec (986 seconds)

Published: Wed Feb 14 2024