Flutter Tutorial - Localization & Internationalization with INTL & ARB Files
Vložit
- čas přidán 27. 07. 2024
- 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: czcams.com/users/JohannesMilke...
👉 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 - Věda a technologie
This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/localization_arb_example
is the description mandatory? @HeyFlutter
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!!!!
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
always watching your tutorials. always they are the best of all. thank you man
Thank you very much for this! Easy to follow instructions on the latest way to handle localization.
Thank you!! This helped me a lot. Nice tutorial!
Much needed one...thank you!!
Thanks Johannes. Excellent content.
As usual awesome ..
Thank you very much.
exactly what i was looking for ! thanks .
No BS, to the point. Thank you!!
You are the best man . short and easy explanation
That was great help .. many thanks:)
you saved my day! many thanks Johannes
Absolutely brilliant as always keep going forward..🌸🌸🌸
@@HeyFlutter
Can you make a lesson for phone authentication
Just like in my dream. Thank u.
You are amazing 🤩🤩
dude you're so amazing, thank you very much
Fantastic explanation!
Your tutorial save my life. thank you
+1 follower, this is very well documented
Very useful video,
Thanks.
thanks! Really, really helpful
First I press the like button then start watching your video 😊
Thank you so much for this .Really love you bruh🥰😘😘😘😍💖💖
Schönes und hilfreiches Video.
love your videos, you make difficult tasks look easy :). Please make a similar video for in app purchases. Thanks
worked! many thanks
You're welcome, amjad zayed! 🙂
Concise Informative Brilliant
Excellent explaination
Thank you, FlutterShip! 🙂
very clear and tuff understanding with easy explaining thank you HeyFlutter
You’re most welcome, عبد الحكيم عجاج! 🙂
Thanks mate!
Thanks for everything
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?
Very helpful and informative. Thanks
You are welcome, Đức Nam Nguyễn!
very very good. thank you
Caramba ! Gorgeous !
You are great👍😊👏
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?
did u fix this ?
Same here
I also have this problem... Does someone have a soultion?
try this: Locale? _locale = const Locale('en');
you are THE BEST 👌
Thanks, @mohammedaymen8542! 🙂
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.
@@HeyFlutter Thanks Boss 👍 🌸🌸
gutes Video.
Hi Johannes, is there a way to implement the LocaleProvider in a Multiprovider setup? Grüße aus Deutschland ;)
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?
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?
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 :')
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?
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:
Ich darf Dir mitteilen, dass ich aufgrund deiner Kurse programmieren gelernt habe. Dafür darf ich mich bedanken.
Glad to hear that, Thank you sporttirol! 😊
by this i am able to change language in one page what if i want that language to reflect in all the app?
sir if my mobile default language is english but i want to show spanish language first time i open the app
Is it possible to change it during run time like when user entered their name their name is translated in different lang?
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 ;)
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.
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
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.
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
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?
i love you you are great
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 ('!').
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
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❣️❣️
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 ?
Pls is there any reply to this
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?
@@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)?
@@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).
Hi Johannas, Great tutorial.
Can you please make a tutorial for reading and opening all app notifications. It will be very helpful.
Thanks.
Thanks a lot for your humble response. Will be waiting! 🙂
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
I would also like to know, I need that functionality
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
@@HeyFlutter thanks a lot for help .. good luck :)
If I want to make German as my default app language, How can I achieve this case ?
Unable to use ChangeNotificationProvider described at 12:00 in the video... The flutter gives an error for MyApp type how to fix this?
I forgot to add provider: ^6.0.1 in pubspec.yaml file if anyone else has the same issue its because of this
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
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 🙂
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?
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 🙂
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.
Thanks to you too for making such a nice videos for this language..
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?
@@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 :(
@@HeyFlutter oh the cn information is inside the same file of the zh one.
hi Milke, such a great tutorial. But i have a question. How can we combine this with remote languages and words ? Thanks you
@@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
13:50 When closing the app the selected language is lost, how do I keep it even after closing the app?
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 🙂
When i try to access the localized method somewhere i want,
i get no such method error.
Is there a fix for this?
My bad I forgot to declare delegates inside my materialApp, it works fine now😊 thanks for the reply
Its showing me error when i add import statement @Johannes Milke Can you help what i did wrong
Thank you Monika Sharma, make sure to follow the tutorial step by step 🙂
in-app-purchase video plz
How you have put the flag inside ' '? Like we have to copy the flag from Chrome or something else?
@@HeyFlutter thanks
any short way to use AppLocalizations.of(context)!.languagein every page?
Thank You dhruvin prajapati! Follow this link: medium.flutterdevs.com/localization-multi-language-in-flutter-5cedb6ff459b
I hope you will get your answer 🙂
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.
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 🙂
@@HeyFlutter No, that did not help. Already saw it.
Please Brother,
Make series on Bloc
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 :)
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
@@HeyFlutter You are right about that. But FLutter sound null safety is like a new standard. Help us follow it
What if there will be change an ip address as the country name?
Does it possible?
And thank you so much for this tutorial!
@@HeyFlutter its like a vpn;
While we seleted the country then the ip address will be changed!
plz help ..........AppLocalizations.of(context) getting null why?
Thank you Yamuna G, make sure to follow the tutorial step by step 🙂
I love your videos Man . However i face some issue about The getter 'value' was called on null
@@HeyFlutter thanks i forgot that i have a main.dart.
dose i have to translate each word in the ARB file or it generated automatically
@@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
@@HeyFlutter thanks for demonstration i really appreciate you time sir
how to translate data inside listView builder can someone help..?
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 🙂
sir i need to know can we send sms throw our special app, without open mobile sms app.
@@HeyFlutter my "service maintain" app need send sms to all customers a special message.
@@HeyFlutter AND you will get best flutter developer award soon. 💕❤💕💕💕💖
How to save user choice with shared preferences?
@@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 ?
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...
It's not showing any .dart_tool file
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.
@@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'] .
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.
A value of type 'Null' can't be assigned to a variable of type 'Locale'.
I have the same issue
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
Nice
حلو
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
:))))))
Thanks for sharing, @spacec0der! 🙂
PUBSPEC JAML FILE.
AppLocalizations dont definded ...... ;(
@@HeyFlutter , solved
@@unomas9686 how do you solve it?
no Israel it is Palestine