Flutter Tutorial - Localization & Internationalization with INTL & ARB Files

[@HeyFlutter]

This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/localization_arb_example

[@fraturkish]

is the description mandatory? @HeyFlutter

[@bnetz]

What a great tutorial! Speed, understandability is perfect. Instructor is so well prepared, we don't have to watch while he's typing, all comes from the clipboard or is already prepared. Thank you so much, it immediately worked for me when I (beginner in flutter, advanced in programming) implemented it in an existing project. You are the new flutter-god!!!!

[@ziyadmansy6016]

Man, you are a mind reader! I started liking every video of urs before even watching + i subscribed to notifications whenever you upload any video! you among a few really deserve it

[@adeelzahid9622]

very appreciated. please make a detailed video on BLOC, I'm still confused about a better way to manage a state and what is the best way to manage the state.

[@adeelzahid9622]

@@HeyFlutter Thanks Boss 👍 🌸🌸

[@tube-rp1nb]

always watching your tutorials. always they are the best of all. thank you man

[@allenrichardyeager8449]

Your tutorial save my life. thank you

[@tekocode]

You are the best man . short and easy explanation

[@gumdum6764]

Thank you very much for this! Easy to follow instructions on the latest way to handle localization.

[@hk20092009able]

very clear and tuff understanding with easy explaining thank you HeyFlutter

[@HeyFlutter]

You’re most welcome, عبد الحكيم عجاج! 🙂

[@sanjibdutta9270]

First I press the like button then start watching your video 😊

[@stalkinstalk9813]

Schönes und hilfreiches Video.

[@RaphaelPungin]

Hi Johannes. Your video helped me to learn how to use placeholders for localization of interpolated strings. For some reason that was not mentioned in the official Flutter documentation. So that you for making this video! Do you know how plurals are handled in Flutter localization using ARB format?

[@kolansheen]

you saved my day! many thanks Johannes

[@ucnamnguyen7549]

Very helpful and informative. Thanks

[@HeyFlutter]

You are welcome, Đức Nam Nguyễn!

[@FlutterShipp]

Excellent explaination

[@HeyFlutter]

Thank you, FlutterShip! 🙂

[@MisterNorthernCanuck]

No BS, to the point. Thank you!!

[@kwakukusi4094]

dude you're so amazing, thank you very much

[@alvarofernandez4637]

Thank you!! This helped me a lot. Nice tutorial!

[@margaretisolan9189]

Fantastic explanation!

[@amigoface]

exactly what i was looking for ! thanks .

[@sporttirol]

Ich darf Dir mitteilen, dass ich aufgrund deiner Kurse programmieren gelernt habe. Dafür darf ich mich bedanken.

[@HeyFlutter]

Glad to hear that, Thank you sporttirol! 😊

[@uvaismohammad1862]

Thank you so much for this .Really love you bruh🥰😘😘😘😍💖💖

[@agreensh]

Thanks Johannes. Excellent content.

[@sumittiware9382]

Much needed one...thank you!!

[@haiderjaafer8164]

Absolutely brilliant as always keep going forward..🌸🌸🌸

[@haiderjaafer8164]

@@HeyFlutter Can you make a lesson for phone authentication

[@uditmishra5583]

Very useful video, Thanks.

[@eNONO-ot4zh]

Just like in my dream. Thank u. You are amazing 🤩🤩

[@stayfen2499]

hello :) I really like ur type of videos, easy to follow and useful as well !! I got a little issue tho, while u were in minute: 12:08, when i type this line "final provider = Provider.of(context);" inside the changeNotifierProvider I get an error saying: "The method 'dynamic Function(BuildContext)' is declared with 0 type parameters, but 1 type arguments are given. Try adjusting the number of type arguments." I tried adding build context and everything but I still get the same problem I hope u can help :')

[@amjadzayed5651]

worked! many thanks

[@HeyFlutter]

You're welcome, amjad zayed! 🙂

[@TheWhoIsTom]

Hi Johannes, is there a way to implement the LocaleProvider in a Multiprovider setup? Grüße aus Deutschland ;)

[@johnpeter122]

As usual awesome .. Thank you very much.

[@anaselboudali2824]

+1 follower, this is very well documented

[@MultiYiff]

I did your guide but it was a bit outdated. I can't set the variable "Locale _locale" and it say's it must be non nullable. Tried with "late Locale _locale" but getting the message "The following LateError was thrown building Builder(dirty, dependencies: [_InheritedProviderScope]): LateInitializationError: Field '_locale@23001738' has not been initialized." How should I do?

[@ahmedsaheed8935]

did u fix this ?

[@NoelmineZockt]

Same here

[@luisafuss5898]

I also have this problem... Does someone have a soultion?

[@enesozmen7455]

try this: Locale? _locale = const Locale('en');

[@kirtik1972]

Hi , Please help . Launching lib\main.dart on AOSP on IA Emulator in debug mode... Running Gradle task 'assembleDebug'... Error: Cannot run with sound null safety, because the following dependencies don't support null safety:

[@ahmedjawad7350]

That was great help .. many thanks:)

[@hectorprx]

Concise Informative Brilliant

[@qadirkrimov6448]

Thanks for everything

[@FarazKhanDev]

love your videos, you make difficult tasks look easy :). Please make a similar video for in app purchases. Thanks

[@palakpandey1376]

by this i am able to change language in one page what if i want that language to reflect in all the app?

[@kardoaziz6530]

thank you for the great tutorial, But I have a question, do you have any video that shows how to remember selected language after closing the application and reopening it ? your tutorial works fine but every time i close the application and open it it will go back to default language

[@mattgeek49]

I would also like to know, I need that functionality

[@mohammedaymen8542]

you are THE BEST 👌

[@HeyFlutter]

Thanks, @mohammedaymen8542! 🙂

[@pedromartin3766]

thanks! Really, really helpful

[@SumanBaul]

Hi Johannas, Great tutorial. Can you please make a tutorial for reading and opening all app notifications. It will be very helpful. Thanks.

[@SumanBaul]

Thanks a lot for your humble response. Will be waiting! 🙂

[@Pedro5antos_]

Thanks mate!

[@lynixisbleysed8537]

Hello, thanks for this awesome tutorial, i tried your tuto, but I have problem, after each restart of app, it's give me the default locale, how i can save the selected language and use it ?

[@sorunkehassan4531]

Pls is there any reply to this

[@joelfah]

A very nice tutorial there. Always strainght forward. I like it. Keep up. But pease, I tested your approach on Flutter web and it works like charm but I noticed that when ever I purposely reload the tab the locale is reseted to the system's locale. It doesn't take into consideration if it there were any changes before. Is there any way to persist the locale value after calling setLocale ? Thanks

[@HeyFlutter]

Thank You Joel Fah! Follow this link: stackoverflow.com/questions/49441212/flutter-multi-lingual-application-how-to-override-the-locale I hope you will get your answer 🙂

[@rakeshsinghrawat4408]

sir if my mobile default language is english but i want to show spanish language first time i open the app

[@mnutube8095]

Thank you for the video, I have a question : Can we do internationalization manually without localisation? For exemple i want to set a default language, default date and time formats.... and give him the choice to change whenever he wants without needing the location ? Is there any exemples please?

[@satishdhend2345]

You are great👍😊👏

[@itjoe1971]

very very good. thank you

[@bnetz]

Is it possible to use the Strings from the *.arb-files in separate classes without the context? Means, let's say I have a separate class Calculator with a method String calc() { int a = 1 * 3; return "The result is " + a; } How can I use a localized String for "The result is"? As the class has no context I cannot use something like AppLocalizations.of(context).theResultIs . Perhaps it is possible to pass the context as a parameter to the methods?

[@bnetz]

@@HeyFlutter Thanks a lot! Because I am new to Flutter I think 1 and 2 might be the most handsome solutions. Do you think it would make problems passing the context around (instead of passing the AppLocalization)? Like writing a method void setContext(BuildContext b) { this.myPassedContext = b; } in my workerclass and then use it there, to stay in my initial example: … return AppLocalizations.of(myPassedContext).myLocalizedString + a; Or will this lead to problems (like when switching the language to runtime or something like that)?

[@bnetz]

@@HeyFlutter Thanks a lot Johannes! So I solved it with solution 2 (as my worker class returns Strings which are used by the validator; solution 1 therefore is not applicapable, as my example was simplified).

[@aliomayrat1707]

danke für deine super video! wie sieht es aus wenn man dabei noch eine suchen funktion hat für die json datein aus einer API. die arber in der App übersetzt werden. das wenn man in seiner sprache sucht auch die ergebnisse in seine Sprache bekommt?

[@JeffreyLiu8]

This is great thank you. Can you teach us how to save the language preference in shared pref so load up would work? Now with your code I believe once we kill the app, it will reset back to default system local. If you save the local, then loading local from shared pref would be async and it would be slow on app start up.

[@KafiMohammed-c9g]

in the provider folder,, local_provider.dart we have Locale _locale but it shows error for me '' Non-nullable instance field '_locale' must be initialized. Try adding an initializer expression, or a generative constructor that initializes it, or mark it ' and also void clearLocale _locale = null; null not working said '' A value of type 'Null' can't be assigned to a variable of type 'Locale'. '''.. how i can solve please?

[@HeyFlutter]

Thank You @user-di4ig2pm2t! Follow this link: stackoverflow.com/questions/67034475/non-nullable-instance-field-must-be-initialized I hope you will get your answer 🙂

[@okokokokokok5173]

i can't use fr_FR code even when change my file name to app_fr_FR it cause an error arb not found, I tried this because when I set locale to null the app not used the system language so I tries to get it with Platform.localeName

[@dohranovicart6241]

How fix this? The property 'language' can't be unconditionally accessed because the receiver can be 'null'. Try making the access conditional (using '?.') or adding a null check to the target ('!').

[@DongNguyen-lu9ej]

hi Milke, such a great tutorial. But i have a question. How can we combine this with remote languages and words ? Thanks you

[@DongNguyen-lu9ej]

​@@HeyFlutter ah sorry, my bad. What i mean is we download list of language files at run time instead of fixed number of language at compile time. So when we need to add new language, we don't need to change and submit the app again. You know, it similar to remote config. After downloaded all language files. How can we combine those files with this approach ? Thanks you for replying :D

[@hooriqbal1099]

Unable to use ChangeNotificationProvider described at 12:00 in the video... The flutter gives an error for MyApp type how to fix this?

[@hooriqbal1099]

I forgot to add provider: ^6.0.1 in pubspec.yaml file if anyone else has the same issue its because of this

[@sarveshpathak4879]

Hey Johannes Milke I loved this content it was very important for my application. I am getting an error called NoSuchMethodError. Getter was called on null. Receiver null. Could you please help me out. Thanks in advance.

[@JohnLiuFromHK]

Hello, i want to ask sth about the arb file. As I have to generate language for simplified chinese which requires a locale with country code. But then when I build the project, an error told me I have to create a base arb file. So i have app_zh.arb and app_zh_CN.arb. But inside the generated files, I can only find the app_localizations_zh.dart. Do you know what am i missing?

[@JohnLiuFromHK]

@@HeyFlutter but whats the file name should I use for the locale with country code? My locale is Locale.fromSubtags(lauguageCode: ‘zh’, countryCode: ‘CN’) But my app_zh_CN.arb name not working :(

[@JohnLiuFromHK]

@@HeyFlutter oh the cn information is inside the same file of the zh one.

[@rv9570]

Hi Johannes , if i add the other language in text widget without any package use will it support that for all devices as on my device it work fine ? can we process like that as i don't want to translate anything just to show the text of other language as it is as a text. Please if possible then let me know. Thanks for you wonderful videos it help a lot to me and i think all of the globe who watch it.

[@rv9570]

Thanks to you too for making such a nice videos for this language..

[@manggamusasuleiman]

In my case my flutter gen folder is changed to generated and AppLocalization.delegate is changed to S.delegate, and lastly app_en.arb is changed to intl_en.arb, apart from these changes, it works superb, thank you :)

[@hurolinci5986]

gutes Video.

[@ahsanraza756]

in-app-purchase video plz

[@rc5016]

Great tutorial! But I've got this error :"Exception has occurred. _CastError (Null check operator used on a null value)" .Flutter suggest to add "!" like this "AppLocalizations.of(context)!.appName " but it generates the error.Did you had it?

[@premchandraseakaran1847]

If I want to make German as my default app language, How can I achieve this case ?

[@Joel19199]

Hi @Johanees! Is there a list where we can get all the flags? I need Spanish and Catalonian flag, and I can´t find the flag code. Thanks in advance ;)

[@Wishkova_baksuzna_statistika]

How to modify the code to add supportedScript? I tried to add translations, add supportedScript in the list of languages, but it is not working. Also returned Locale.subfromSubtags(), but seems it is not working.

[@HeyFlutter]

Thank You A Projekt! Follow this link: stackoverflow.com/questions/66185977/flutter-internationalization-intl-code-generation-not-working I hope you will get your answer 🙂

[@Wishkova_baksuzna_statistika]

@@HeyFlutter No, that did not help. Already saw it.

[@danielchan1203]

Thank you for your tutorial, it is great. However, I face some issues that I need help. I notice the fontSize is different when changing locale between en and zh, even on the text that are not translated. Any ideas about how to fix this?

[@ahmedjawad7350]

Johannes please, how can I call a function inside the statefulWidget from the statelesswidget afther changing the language? I need the refresh the app afther changing the language, the localeResolutionCallback: did not help

[@ahmedjawad7350]

@@HeyFlutter thanks a lot for help .. good luck :)

[@zakblacki]

There is error on your git project The current Dart SDK version is 2.10.5. Because localization_arb_example depends on cupertino_icons >=1.0.1 which requires SDK version >=2.12.0-0

[@arunchetan6943]

if i restart the app it changes to default language English, can you plz tell where to use the shared preference to save the language... thanks in advance❣️❣️

[@valerijt4344]

Now this example does not work correctly with FLutter sound null safety. how can I change it to make it work? you can see these errors by setting in pubspec.yaml environment: sdk: "> = 2.12.0

[@valerijt4344]

@@HeyFlutter You are right about that. But FLutter sound null safety is like a new standard. Help us follow it

[@ezone2726]

What if there will be change an ip address as the country name? Does it possible? And thank you so much for this tutorial!

[@ezone2726]

@@HeyFlutter its like a vpn; While we seleted the country then the ip address will be changed!

[@ankiy]

Is it possible to change it during run time like when user entered their name their name is translated in different lang?

[@blueinc4132]

I love your videos Man . However i face some issue about The getter 'value' was called on null

[@blueinc4132]

@@HeyFlutter thanks i forgot that i have a main.dart.

[@Nicosfrs]

13:50 When closing the app the selected language is lost, how do I keep it even after closing the app?

[@HeyFlutter]

Thank You Nico! Follow this link: stackoverflow.com/questions/71613395/how-to-keep-language-changed-even-after-my-app-is-closed-in-flutter I hope you will get your answer 🙂

[@yamunag4383]

plz help ..........AppLocalizations.of(context) getting null why?

[@HeyFlutter]

Thank you Yamuna G, make sure to follow the tutorial step by step 🙂

[@arnaudduquenoy2061]

Caramba ! Gorgeous !

[@spacec0der]

Good practice tip for everyone: Create an extension like so you can access the translation values like Text(context.locale.yourTranslation) import 'package:flutter/material.dart'; import 'package:flutter_gen/gen_l10n/app_localizations.dart'; extension LocalizationsExtensions on BuildContext { AppLocalizations get locale => AppLocalizations.of(this)!; } You can set also for other situations like access the Theme.of(context) colors properties: import 'package:flutter/material.dart'; extension BuildContextExtensions on BuildContext { ThemeData get theme => Theme.of(this); TextTheme get textTheme => theme.textTheme; ColorScheme get colorScheme => theme.colorScheme; Color get backgroundColor => colorScheme.background; Color get cardColor => theme.cardColor; } from Theme.of(context).colorScheme.background to context.backgroundColor :))))))

[@HeyFlutter]

Thanks for sharing, @spacec0der! 🙂

[@dhruvinprajapati4345]

any short way to use AppLocalizations.of(context)!.languagein every page?

[@HeyFlutter]

Thank You dhruvin prajapati! Follow this link: medium.flutterdevs.com/localization-multi-language-in-flutter-5cedb6ff459b I hope you will get your answer 🙂

[@monikasharma3403]

Its showing me error when i add import statement @Johannes Milke Can you help what i did wrong

[@HeyFlutter]

Thank you Monika Sharma, make sure to follow the tutorial step by step 🙂

[@ankiy]

How you have put the flag inside ' '? Like we have to copy the flag from Chrome or something else?

[@ankiy]

@@HeyFlutter thanks

[@developerbuddy4652]

Please Brother, Make series on Bloc

[@RADIOSCATRACHASUTAN]

Hum, long step and lots of files to do this, useful if your app doesn't need internet but will give increase App size, what I do if internet connection is necessary is send I payload with language code and reseive the translation from server, async is your friend and small footprint size for ur app.

[@RADIOSCATRACHASUTAN]

@@HeyFlutter wasn't a question is what I actually do in my App, if connected to the internet I just send a Post payload with language code to retrieve translation from the server, PHP or any other server side programming language, this as result make ur app lightweight.. async and a Map and you have ur translated example lang['welcometoflutter'] .

[@RADIOSCATRACHASUTAN]

And then if u dont want to make this everytime ur app init u can save it in your app cache folder or app folder.

[@karthikr9288]

When i try to access the localized method somewhere i want, i get no such method error. Is there a fix for this?

[@karthikr9288]

My bad I forgot to declare delegates inside my materialApp, it works fine now😊 thanks for the reply

[@bhumikachaplot]

It's not showing any .dart_tool file

[@qaisnezami1770]

A value of type 'Null' can't be assigned to a variable of type 'Locale'.

[@mohammedridazilat4114]

I have the same issue

[@3shmawyz]

dose i have to translate each word in the ARB file or it generated automatically

[@3shmawyz]

@@HeyFlutter Thanks a lot sir one more question dose google translation effective in large apps ?? and what if i used the normal local with ARB files and added comments section or reviews in my project this mean i have put a hole language like a dictionary in {Key:values} or there is another way... i know a m a Little bit annoying but forgive me, you dont find flutter experts every where :D and i just find you

[@3shmawyz]

@@HeyFlutter thanks for demonstration i really appreciate you time sir

[@ziyadmansy6016]

An advice: please illustrate more, you are very good in illustrating using examples, but coding is understanding not memorizing. you had to tell us what does a template file mean? why did you choose the English one as the template in l10n.yaml not any other language, etc... still liked the video and deserved the like

[@mohamedshifan1088]

sir i need to know can we send sms throw our special app, without open mobile sms app.

[@mohamedshifan1088]

@@HeyFlutter my "service maintain" app need send sms to all customers a special message.

[@mohamedshifan1088]

@@HeyFlutter AND you will get best flutter developer award soon. 💕❤💕💕💕💖

[@faizy3132]

how to translate data inside listView builder can someone help..?

[@HeyFlutter]

Thank You faizy 313! Follow this link: stackoverflow.com/questions/54163874/listview-builder-in-flutter-with-different-items I hope you will get your answer 🙂

[@sokdethchuon6094]

How to save user choice with shared preferences?

[@sokdethchuon6094]

@@HeyFlutter Thanks and Sorry for my bad English. I already known about Shared preferences but i don't know how to use it in this case. Ex: if user choose on language i save language code with shared preferences and when user open app i want to get language code to display language that user have choose in previous. How can i do that ?

[@jraulc]

This dude is so cool that I hate him already just because of that... but he deserve more views and subscribers so I'm in...

[@NajeebAslan]

i love you you are great

[@unomas9686]

AppLocalizations dont definded ...... ;(

[@unomas9686]

@@HeyFlutter , solved

[@meddhiaalaya1337]

@@unomas9686 how do you solve it?

[@IamAWildMan]

PUBSPEC JAML FILE.

[@delmanali4863]

Nice حلو

[@mohammedgamal3358]

no Israel it is Palestine

[@tarikali720]

Good but there is no israel , it's palestine