Flutter Localization the Easy Way - Internationalization with JSON

Подписаться 112 тыс.

Просмотров 91 тыс.

50% 1

📗 Learn from the written tutorial 👇👇
resocoder.com/flutter-localiz...
👨‍💻 Do you write good code? Find out now 👇
resocoder.com/good-code-quiz
Let's face it. When you're building an app which you plan to release to the public, having it in just one language isn't going to cut it. While English is definitely one of the most spoken languages throughout the world, internationalizing your apps is really a must.
Contrary to frameworks like native Android, Flutter doesn't have an absolutely set way of how localization is done. It gives you a lot of freedom which can be good if you know what you're doing, but also extremely confusing if you're just starting out.
In this tutorial, you're going to learn how to localize your apps the simple way by using JSON files to store your strings in multiple languages.
Go to the website for more information, code examples, and articles:
● resocoder.com
Follow me on social media:
● / resocoder
● / resocoder
● / resocoder
● gab.ai/resocoder

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 188

@danielfelten 5 лет назад

Thanks for the tutorial, it helps a lot. One improvement: It's necessary to check if locale is not null for the localeResolutionCallback. Otherwise, there will be an error message (The getter 'languageCode' was called on null) if the language is adjusted while the app is open in the background. I would also add a default value if the string is not existing in the json: return _localizedStrings[key] ?? key;

@cuenotes5768 4 года назад

Can you tell me how I check if locale is not null and where exactly I put it in the Code? I tried if (locale == null) { return supportedLocales.first; } as mentioned further down in this thread, but where I put is not correct. My iOS app doesn't crash any more but remains in English, doesn't switch languages...

@holofox66 4 года назад

@@cuenotes5768 It will be beautiful like this: if (supportedLocale.languageCode == locale?.languageCode || supportedLocale.countryCode == locale?.countryCode) { return supportedLocale; } But that's not all. You need to open the Runner.xcodeproj file on this path: your_project/ios/Runner.xcodeproj and add base Localization languages in Project info, Localizations section. This will fix your problem.

@sathishgadde1924 4 года назад

if (locale == null) { locale = Localizations.localeOf(context); }| Above code work for me in IOS device!

@psybitcoin 3 года назад

@@holofox66 && instead of || ?

@idoroi5124 4 года назад

Thank you for a straight forward and simple to understand video. I feel much more confident in approaching this challenge in my app, even though I don't have any experience with it!

@hashankannangara8723 3 года назад

This is an awesome channel for all Flutter developers!

@ihebdjebbar 2 года назад

One of the best flutter tutorials.

@PhamQuang 4 года назад

wonderful tutorial and clear instructions. You wouldn't find anywhere else

@user-sq5xv6dr1v 3 года назад

Quite useful tutorial. Must thank you with my native languages: спасибо, kiitos, kiitoš.

@DennisPush 4 года назад

the timbre of your voice is mesmerising ! :) thanks for explanations about localisation

@jimmyfmedina 5 лет назад

Very useful, great content, I will continue watching yours videos

@mhafegypt 5 лет назад

Thank you so much , Each one has been explained , Very very wonderful explanation.

@josiahsaunders7358 5 лет назад

Was just wondering how to do this, thank you!!

@johncerpa3782 3 года назад

Just what I needed, thank you

@ahmadhayek9225 3 года назад

Mashallah. How flexible and understandable your explanation way is.

@VladVons 3 года назад

your english is very good and clear as this tutorial too. thanks!

@mehmetyilmaz001 4 года назад

Thanks for the clean explanation

@RiyazParasara 4 года назад

Thank you so much its working very smoothly.

@Zeraton 3 года назад

Love your tutorials

@muhammadfaizan2461 4 года назад

thank you for this. Helped allot in my projects (y)

@euivanw 4 года назад

Thanks for sharing this!!

@akopvardanian992 4 года назад

Extremely thank you!

@aaronsoto5711 4 года назад

5:47 yes i am from Mexico and great tutorial!

@j3ns 4 года назад

Very good tutorial, thanks!

@carlz3965 3 года назад

Great video! I love it

@Pedro5antos_ 2 года назад

AWESOME content! Thanks

@lakhdarghazali7051 4 года назад

thanks for the tutorial it works for me i'll add another useful method is how to get the language: String getLanguage() { return supportedLanguages[supportedLanguages .indexWhere((language) => language.locale == _locale)] .language; }

@abd_el_majidbouikken_bahi_5895 3 года назад

Bruuh! that was awesome

@imranit 5 лет назад

Keep it up man

@akashbansal6216 4 года назад

thanks ,you are great really working video

@omarmneimneh983 5 лет назад

That's better than google documentation 😂. Thank you!

@amoggoma430 7 месяцев назад

Thank you

@ayoksus 4 года назад

Thanks! it works.. the problem now.. how can i switch language with buttons?

@ResoCoder 5 лет назад

🔒 Get protected by NordVPN with a 75% discount 👇👇 resocoder.com/nordvpn-75off You can also use the coupon code 👉resocoder👈 during the checkout.

@arturoespinosa3447 3 года назад

Thank you for the tutorial, and I Will follow you only because you mentioned Mexico in your video.🤣

@danielgranda511 4 года назад

Gracias por el tutorial

@tiberiugeorgescu2152 3 года назад

Great job on your tutorials. What I find missing in this implementation is possibility to interpolate values in the translations. Perhaps add method that receives an array of values and replaces some placeholders inside the value ( e.g. "this string contains 2 values ${val1}...${val2}...")

@FilledStacks 5 лет назад

Nice video

@bouidiaabdelrahmene1617 4 года назад

Thank you (y)

@leonardorignanese5902 4 года назад

Thanks

@correagoncalves 4 года назад

A small helper to write less code in the beginning of each Widget with text: String _t(String k) => AppLocalizations.of(context).translate(k); Then, you can use _t("first_string") instead of AppLocalizations.of(context).translate('first_string'),

@nagaprasannabharadwajsarip1485 5 лет назад

Great tutorial can you make one for search sort filter with flutter both on client and Firestore query

@marh122 3 года назад

ani som nedopozeral video a uz som dal like :)

@ResoCoder 3 года назад

Správny Slovák sa hneď pozná 😄

@thiagocars 3 года назад

Obrigado!!!

@andressanabria9622 5 лет назад

The localizations package automatically checks if the locale is supported, so there is no need to implement the logic for that! 🙌🏻

@dennisbarzanoff9025 2 года назад

the shouldLoad thing is probably for debugging purposes, so you don't have to do a hot restart, you can hot reload and it's gonna reload all the fonts

@ahkamkhalaf7082 4 года назад

very nice video, i wonder about how to switch between two language using button ?

@StrifeTheHorseman 3 года назад

Hi, have you found a good way to do this?

@mavbcn1790 4 года назад

Hi great video! How can I select the language instead of getting the devices's one? thanks!

@furkanvatandas4819 5 лет назад

Is there any performance difference with intl package? Memory performance, for example.

@unomas9686 3 года назад

it work

@its_seezz8844 5 лет назад

Thank you for the tutorial, can you kindly extend it and add how to change the app language dynamically in app, thanks.

@invoPOS 4 года назад

www.didierboelens.com/2018/04/internationalization---make-an-flutter-application-multi-lingual/

@anuguprashanth5330 5 лет назад

Small request from our side : can you please make a video on amplitude integration to flutter app ????? Please it would help😀

@anandkumark3396 4 года назад

Hey Reso Coder. Thanks for valuable content. I came across flutter_i18n package, which looks little easy compared to flutter_localizations. Would like to know your opinion. Thanks..

@cuenotes5768 4 года назад

I can use this for translating a Text widget. How can I translate a string in a variable?

@erperejildo 4 года назад

How to change the language manually from the app itself?

@mavbcn1790 4 года назад

I looking for the same

@BelchiorPinto 3 года назад

Mine is not working... Seems that with this new Flutter update something is no longer working... Error message - The Method ''Translate ' was called on null

@robertocruz1200 2 года назад

There will be some easy way to load these json file from server and after use it ? Thanks so much

@CSSuccessGamer 4 года назад

How do you format long sentences paragraphs in json? If it goes across multiple lines?

@KsAmJ 5 лет назад

what is the name of the vs code theme u using?

@algeriennesaffaires7017 4 года назад

How to translate other strings in other layout its not working in other layouts it only works on the main layout error Error: Not a constant expression. title: Text(AppLocalizations.of(context).translate('title')),

@emwagner 10 месяцев назад

What if you were supporting US English and British English? Would you add another key pair and have GB instead of US?

@rebarius 5 лет назад

Your forgot one major thing: For android it will work (because local callback will call once), but on iOS this will crash with a duplicated GlobalKey in MaterialApp! You have to check if local is gonna be null (because of first call it will!). Try master and stable branches, both got this error now

@nagaprasannabharadwajsarip1485 5 лет назад

facing same issue can you specify the fix

@rebarius 5 лет назад

Of course: just check: if (locale == null) { return supportedLocales.first; } on the second call on iOS it will then automatically skip that step and return configured language on your device.

@nagaprasannabharadwajsarip1485 5 лет назад

@@rebarius thanks a lot also can you suggest how can we change the locale dynamically like this github.com/flutter-devs/flutter_localization_demo/raw/master/screens/demo.gif

@nagaprasannabharadwajsarip1485 5 лет назад

@@rebarius found this useful medium.com/saugo360/managing-locale-in-flutter-7693a9d4d6ac

@rebarius 5 лет назад

@@nagaprasannabharadwajsarip1485 of course combine that with shared prefs or secure local storage and it should work

@creative-commons-videos 5 лет назад

Hello, Please help me, I am trying to detect whether device screen is locked or not, how can I listen when user lock his device using hardware key ?

@darko8376 3 года назад

is it possible to have dynamic string in the json files, thanks!

@imransefat8770 4 года назад

Isn't there any way to translate the whole app or do I need to write everything in multiple languages?

@piusyawgyamenah 3 года назад

Hello, how do I get the language to change automatically when user changes language while app is running without having to rerun.

@thutiiee 3 года назад

how can i localize list items , when i have a list of strings for a dropdown? that is my list: List _titles = [' ', 'A', 'B', 'C.']; plese can somebody help'?

@MidasLabs 4 года назад

Great tutorial I do have a small issue though. At 7:35 you are talking about checking that the current device locale is supported by the app. localeListResolutionCallback: (locale, supportedLocales) { // Check if the current device locale is supported for (var supportedLocale in supportedLocales) { if (supportedLocale.languageCode == locale.languageCode && supportedLocale.countryCode == locale.countryCode) { return supportedLocale; } } I have an error for locale.languageCode and locale.countryCode The getter 'languageCode' isn't defined for the class 'List'. Try importing the library that defines 'languageCode', correcting the name to the name of an existing getter, or defining a getter or field named 'languageCode' Any thoughts on what I am missing? thanks

@nicolasdupere 4 года назад

It's not localeListResolutionCallback, it's localeResolutionCallback

@masoudesmaeilian5083 4 года назад

Hi Matt, I need to have nested json file keys, how can I come over it? if I say AppLocalizations.of(context).translate("key.nestedkey.nestednestedkey"), it will give me null. is it possible with library to do it?

@adamkonecnycz 4 года назад

Ty jsi ze Slovenska? WOW :D

@sokheangkhun6634 4 года назад

In android I got black screen after splash screen. I think because It wait to load string from file. Can you fix this?

@arifikhsanudin9724 4 года назад

Can we use yaml instead of json?

@MudHut67 3 года назад

What if the user just wanted to change the app language instead of device language?

@keerthanakeerthana1904 3 года назад

Hi is this help for web app?

@Superhost_Sabrina 3 года назад

Hello, somehow it's not working, i don't know why, I did exactly the same methods and I tried twice in two apps, and when I changed the language setting, the app language just not change. Are your method still working considering right now it's 1.5 years later since you upload this video. Thank you!

@vOnez212 4 года назад

Very nice! Any chance JSON can be loaded at runtime instead of pre-packaged in app?

@vijaybabaria3253 2 года назад

@Reso Coder, thanks for these amazing flutter training, I have similar use case of dynamically building widget label from json text and depending on chosen language, i need to render label text for specific language. any suggestion would be appreciated.

@MrChickenpoulet 3 года назад

so much boilerplate code here for this feature!

@marcelhh5722 3 года назад

After this tutorial i have only a white screen on my app?

@bikrampandit3652 3 года назад

Same everywhere. How to handle the placeholder nobody says!

@syspire 4 года назад

Thank you very much this is very helpful. One question: how can I allow users to change language from the app itself?

@vardanmelkonyan6791 4 года назад

Did you find a way to do that?

@nasirdev5378 2 года назад

I'm also trying..... not found yet!

@faizy3132 Год назад

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

@furkankamaci6180 3 года назад

why this error: Easy localization Formatexception: syntaxerror unexpected token < in JSON (at character 0)

@fatihsumbul7621 4 года назад

why didn't you say anything about dynamic language situations with button? When you shared this video.

@segundojaramilloromero9909 3 года назад

how can i use the following structure "login": { "welcome": "Welcome" }, and I call it like login.welcome, but I have this error Failed assertion: line 285 pos 10: 'data! = Null' if i define it like this "login.welcome" in the json if it works

@eikeb5171 3 года назад

Make Map _jsonMap; a variable of class AppLocalizations. Then override the function translate with this: dynamic translate(String key) { if(key.contains('.')) { List keys = key.split('.'); var tempMap = _jsonMap; for(String k in keys) { if(tempMap.runtimeType == tempMap[k].runtimeType) { tempMap = tempMap[k]; } else { return tempMap[k]; } } } return _localizedStrings[key]; } There might be a more efficient way, but I've just started dart this week.

@trueToastedCode 3 года назад

who saving it as json if can also be directly coded into a dart file?

@adamtak3128 5 лет назад

Could you make a video on Provider please and thanks :)

@FilledStacks 5 лет назад

Something like this ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kDEflMYTFlk.html ? It shows the complete architecture for state management using provider.

@3bua7m3d 3 года назад

Mixed Text (RTL and LTR) breaks the RTL justification flutter Is there a solution to this problem.

@mehmetpeker9047 5 лет назад

very complex than android

@mertmusaoglu211 4 года назад

Thanks for the tutorial, but it's not working on IOS

@hatimmts 3 года назад

thanks for your effort brother , but it didn't work with me , I did all exactly like you , but with Arabic language , ['ar' , 'AR'] , please help

@Lensbreak 4 года назад

Is it really only me who thinks managing and maintaing this JSON files will be a PITA in a larger app? How are you going to add new Strings? Manually adding them to every JSON file???

@LukePighetti 4 года назад

That's exactly what you do and it really sucks. Localization is NOT easy.

@Lensbreak 4 года назад

@@LukePighetti isnt there any solution/plugin? like in android studio when makong native apps in java there is an editor for this as far as i can remember. it was so easy to manage multi language

@LukePighetti 4 года назад

@@Lensbreak You might find this useful. Localization in a similar style using Google Sheets. github.com/aloisdeniel/flutter_sheet_localization medium.com/@aurimas.deimantas/flutter-localisation-google-sheets-api-python-internalisation-paradise-8439cab57866

@Lensbreak 4 года назад

@@LukePighetti thank you so much. quite nice, still seems a bit hacky to me but definitely an interesting approach to learn from

@LukePighetti 4 года назад

@@Lensbreak I personally don't care for a GUI editor because I agree that it's hacky but it sounded like that was a hard requirement for you so I tried to provide a solution for you.

@nagaprasannabharadwajsarip1485 5 лет назад

also how can we change the language dynamically

@themindstorm9947 4 года назад

Did you find a solution?

@loicngou9592 4 года назад

@@themindstorm9947you could found a better way to manage app localization in my comment above

@double8tz 4 года назад

I hope this link could be useful ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AS-0SXT2qio.html

@UmerFarooq-gl9vj 4 года назад

How to supprt "Arabic" language?

@Patrick-ed7hd 4 года назад

When would you say is the best point in the App creation process to internationalize your app? After it is finished (I would prefer that) or during development?

@moseskarunia 4 года назад

i think after it is finished is fine. But you still need to setup your Text widgets to use the en only language, therefore it'll be easier to add more languages later

@Patrick-ed7hd 4 года назад

Moses Karunia ok thanks

Год назад

This doesn't work at all with null safety

@klausegebjerg7409 4 года назад

I am getting this error: The method 'translate' was called on null. Receiver: null Tried calling: translate("menu") Ant idea what the problem is ?

@josoma123 4 года назад

static String traslate(BuildContext context, String key) { final keyTraslate = AppLocalizations.of(context).translate(key); return (keyTraslate == null) ? key : keyTraslate; }

@yacine101 4 года назад

did you found a solution for that error ? i have the same error

@luthiers5488 4 года назад

have you found out a solution?

@DenzilFerreira 3 года назад

To solve: String translate(String key) { if (translations!=null) return translations[key]; }

@antonkuchinsky9974 4 года назад

Hello! I have this issue Localizations.of(context, Localizatoin) returns null. Could you help me with this?

@luthiers5488 4 года назад

have you found out a solution for this?

@antonkuchinsky9974 4 года назад

@@luthiers5488 yes, make shure that Localizations.of initializes before you try localize values

@marcelhh5722 3 года назад

@@antonkuchinsky9974 and how?

@antonkuchinsky9974 3 года назад

@@marcelhh5722 not clear what you mean. Add 2 break points, one on Localization.of, second on your closest value localize. If second called first, there is a mistake.

@digitalkhataudharbahiledge2965 4 года назад

How i can get the source code for this?

@ResoCoder 4 года назад

It's in the written tutorial.

@samanahmed856 3 года назад

it's good but if we have ac big app it will not be usefull

@kennethordona4893 4 года назад

The method 'translate' was called on null. Receiver: null Tried calling: translate("email_string") how to fix this? need help asap

@luthiers5488 4 года назад

have you found a solution for this?

@DenzilFerreira 3 года назад

To solve: String translate(String key) { if (translations!=null) return translations[key]; }

@adamtak3128 5 лет назад

Any reason for not just including the lang folder without having to include each individual file? Like assets: - lang/

@ResoCoder 5 лет назад

Oh, I didn't know something like this was possible 😑 Thanks!

@rebarius 5 лет назад

definetly! That's enough! I don't know why all flutter devs online recommend that static config 😑

@loicngou9592 4 года назад

@@ResoCoder really ?

@ResoCoder 4 года назад

@@loicngou9592 Now I know, lol

@loicngou9592 4 года назад

@@ResoCoder lol good, thanks for this tutorial, but I found it very limited, we cannot use nested JSON object, we cannot change the lang dynamically, we cannot pass parameters to translated strings, that is why I have created this repository github.com/loicgeek/flutter_localization_boilerplate , that support all these features an more like saving user preferred language, it doesn't depend on any context, I've read a lot on didierboelens.com blog. It would be nice if you could check that and make a tutorial based on it. My English is very bad so I could not do that. thanks here is a demo app video facebook.com/loicgeek90/videos/2576796032591340/

@YouWatchGames 4 года назад

Does not Work on ios

@YouWatchGames 4 года назад

I found a way easier approach, but it took me really long to find it

@edgedevstudio1826 4 года назад

@@YouWatchGames drop a link

@YouWatchGames 4 года назад

@@edgedevstudio1826 on pub dev flutter i18n plugin make sure to add all languages on xcode

@edgedevstudio1826 4 года назад

@@YouWatchGames why can't you freaking drop a link

@YouWatchGames 4 года назад

@@edgedevstudio1826 relax pub.dev/packages/flutter_i18n

@MaksMikhnevych 5 лет назад

So, do you realy want to have keys duplicated in multiple json files instead of having single json, containing single instance of every key like this: "key1": "locales": [ "en": "value1", "fr": "value2" ]

@ResoCoder 5 лет назад

I mean, your solution will work perfectly fine too with some minor modifications to the code. Coming from Android, my solution is the closest to the strings.xml file.

@VolkerAndres1 5 лет назад

If you use a translation service where you send the files to another company for translating, merging the strings back together would be hell. Splitting into multiple files is more comfortable. If you have a thousands of strings, all languages are loaded at the same time. This could also influence performance, if you just need one language.