Flutter Tutorial - Localization & Internationalization with INTL & ARB Files

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

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

50% 1

With Flutter Internationalization you can display multiple languages and the language used by your end-user within your Flutter app.
Click here to Subscribe to Johannes Milke: ru-vid.com...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/loca...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Speech To Text Tutorial: • Flutter Tutorial - Spe...
Translation - Google Translate Tutorial: • Flutter Tutorial - Tra...
Text Recognition Tutorial: • Flutter Tutorial - Tex...
Share Texts & Files Tutorial: • Flutter Tutorial - Sha...
Light & Dark Theme Tutorial: • Flutter Tutorial - Flu...
Native Splash Screen Tutorial: • Flutter Tutorial - Nat...
App Icon Tutorial: • Flutter Tutorial - Cha...
Display Software Licenses Tutorial: • Flutter Tutorial - Lic...
Notification Badges Tutorial: • Flutter Tutorial - Not...
Create Flutter Project For AppStores Tutorial: • Flutter Tutorial - Cre...
Change Package Name & Bundle ID Tutorial: • Flutter Tutorial - Cha...
Update Packages Automatically Tutorial: • Flutter Tutorial - Upd...
TIMELINE
0:00 Introduction Flutter Internationalization
0:28 Setup Flutter Localizations
1:42 Add Flutter App Translations
4:23 Generate Translation ARB Files
5:31 Setup App Localizations
6:21 Add Material & Cupertino Localizations
6:58 Add Widgets Localizations
7:16 Display Translation Texts In App
8:36 Display Language Flag
10:32 Introduction Local Languages
11:03 Languages Provider
12:47 Languages Dropdown Menu
13:49 Select Language In App
15:14 Add Parameters To Translation
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

Наука

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

1 июл 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@HeyFlutter Год назад

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

@fraturkish 11 месяцев назад

is the description mandatory? @HeyFlutter

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

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

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

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!!!!

@tube-rp1nb 2 года назад

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

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

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

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

Your tutorial save my life. thank you

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

No BS, to the point. Thank you!!

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

You are the best man . short and easy explanation

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

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

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

you saved my day! many thanks Johannes

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

Thanks Johannes. Excellent content.

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

Much needed one...thank you!!

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

exactly what i was looking for ! thanks .

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

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

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

@@HeyFlutter Can you make a lesson for phone authentication

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

dude you're so amazing, thank you very much

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

Fantastic explanation!

@eNONO-ot4zh 3 года назад

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

@hk20092009able Год назад

very clear and tuff understanding with easy explaining thank you HeyFlutter

@HeyFlutter Год назад

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

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

As usual awesome .. Thank you very much.

@stalkinstalk9813 Год назад

Schönes und hilfreiches Video.

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

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

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

+1 follower, this is very well documented

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

Very useful video, Thanks.

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

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?

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

Concise Informative Brilliant

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

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

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

That was great help .. many thanks:)

@ucnamnguyen7549 Год назад

Very helpful and informative. Thanks

@HeyFlutter Год назад

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

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

Excellent explaination

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

Thank you, FlutterShip! 🙂

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

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

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

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 3 года назад

@@HeyFlutter Thanks Boss 👍 🌸🌸

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

thanks! Really, really helpful

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

Thanks for everything

@amjadzayed5651 Год назад

worked! many thanks

@HeyFlutter Год назад

You're welcome, amjad zayed! 🙂

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

Thanks mate!

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

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

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

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?

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

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 :')

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

very very good. thank you

@mohammedaymen8542 Год назад

you are THE BEST 👌

@HeyFlutter Год назад

Thanks, @mohammedaymen8542! 🙂

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

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.

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

You are great👍😊👏

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

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?

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

gutes Video.

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

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

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

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?

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

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

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

Caramba ! Gorgeous !

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

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:

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

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

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

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

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

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

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

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.

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

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?

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

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 ;)

@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 🙂

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

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 3 года назад

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

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

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

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

need help ..getting error String getTranslate(BuildContext context, String key) { return AppLocalizations.of(context).helloWorld; } The getter 'helloWorld' was called on null. Receiver: null Tried calling: helloWorld

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

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

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

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 ('!').

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

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❣️❣️

@DongNguyen-lu9ej 2 года назад

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 2 года назад

@@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

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

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

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

in-app-purchase video plz

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

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

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

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 3 месяца назад

I would also like to know, I need that functionality

@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! 😊

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

i love you you are great

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

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 3 года назад

@@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 3 года назад

@@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).

@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 🙂

@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

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

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 2 года назад

did u fix this ?

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

Same here

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

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

@enesozmen7455 Год назад

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

@user-di4ig2pm2t 4 месяца назад

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 4 месяца назад

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 🙂

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

Please Brother, Make series on Bloc

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

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 3 года назад

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

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

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 3 года назад

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

@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 🙂

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

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 :)

@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 🙂

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

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

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

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

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

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

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

@@HeyFlutter thanks

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

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 2 года назад

@@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 2 года назад

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

@yamunag4383 Год назад

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

@HeyFlutter Год назад

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

@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.

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

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

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

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

@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 🙂

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

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 3 года назад

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

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

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

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

@@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 3 года назад

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

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

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

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

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

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

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

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

It's not showing any .dart_tool file

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

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 10 месяцев назад

Thanks for sharing, @spacec0der! 🙂

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

How to save user choice with shared preferences?

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

@@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 ?

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

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 2 года назад

@@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 2 года назад

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.

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

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...

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

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