Flutter Tutorial - Create Multi Language App (i18n) | Internationalization In Flutter
HTML-код
- Опубликовано: 13 июн 2024
- How to translate texts into any language using Flutter Internationalization and Localization to create a Flutter multi language app.
Click here to Subscribe to Johannes Milke: ruclips.net/user/JohannesMilke...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/inte...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
Docs Internationalization: docs.flutter.dev/development/...
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
TIMELINE
0:00 Flutter Internationalization / Localization (i18n)
0:32 Setup Flutter Localizations
2:15 Generate Translations For Different Languages
5:17 Display Translation Texts In App
7:58 Add Parameters To Translation
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-) 
Наука
This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/internationalization_app
Docs Internationalization: docs.flutter.dev/development/accessibility-and-localization/internationalization
Change Language Translation MANUALLY In App Tutorial: ruclips.net/video/Zw4KoorVxgg/видео.html
Null Safety Introduction Tutorial: ruclips.net/video/PnSpQkOKwv0/видео.html
Migrate Flutter App To Null Safety Tutorial: ruclips.net/video/GLnQphHi1BY/видео.html
TOP 10 Flutter Questions Answered: ruclips.net/video/0-gS_JTLwaM/видео.html
Expand Floating Action Button Tutorial: ruclips.net/video/YHNCYfqGrBY/видео.html
Home Screen Quick Actions Popup Tutorial: ruclips.net/video/sqw-taR2_Ww/видео.html
Hide/Show AppBar/Pinned TabBar On Scroll Tutorial: ruclips.net/video/xzPXqQ-Pe2g/видео.html
Hide/Show Bottom Navigation Bar On Scroll: ruclips.net/video/pr_Go9I19SA/видео.html
Hide/Show Widgets In Flutter Tutorial: ruclips.net/video/MqIBOlG7Dts/видео.html
Show iOS Popup Alert Dialog Tutorial: ruclips.net/video/UYVylKqdKRY/видео.html
Show Material Banner Tutorial: ruclips.net/video/WXmvbsEhMWk/видео.html
Show Toast Message Tutorial: ruclips.net/video/o2tq4RMcAJw/видео.html
Show SnackBar Tutorial: ruclips.net/video/Q_YO_Y5u2Pg/видео.html
Show/Hide Bottom Sheet Tutorial: ruclips.net/video/AjAQglJKcb4/видео.html
Show/Hide Navigation Drawer Tutorial: ruclips.net/video/vZ7vdMok98g/видео.html
Amazing Lottie Animations Tutorial: ruclips.net/video/kyPizhfn8k8/видео.html
QR Code Scanner Tutorial: ruclips.net/video/hHehIGfX_yU/видео.html
You're amazing, thanks for ALL the help you provided us!
Appreciate your consistency greatly.thanku
I was really stucked at this point and I was getting frustrated but then I saw your video. Thanks a lot for sharing all this information!!
Glad it was helpful, @cris4lomas 😀
This was very helpfull too me ,danke bro !
Hello I love what you are providing for us
Can I ask if you can do about encryption like encrypt chat messages using rsa encryption algorithm or any other method thank you very much.
Hi Milke, nice tutorial. How does the app rebuild the widgets when you change the language? Does the package take care of it? It seems like you should manage the state somewhere to rebuild when listening to a change.
Hello Johannes! Great video! I'm wondering how this method would apply to a text-heavy app? Could we store the translations in a database and load them as needed? If so, how would that work? Sorry I'm still kinda new to this so I hope this question makes sense!
Thanks for this video.
इस वीडियो के लिए धन्यवाद।
Gracias por este video.
Merci pour cette vidéo.
thank you, brother. You are awesome!
You are welcome, Dharyel Santos!
Would be great if you provided links to documentation in description
Thank you, Patrick Witter! 🙂 Here you go: docs.flutter.dev/development/accessibility-and-localization/internationalization
Amazing tutorial Mike!, I would like to ask if is there any tutorial to the menu to change the language locally too, since it would be useful for some cases
Thanks for the idea, HrHr! 🙂 I have added it to my list of ideas for future videos!
Very useful Video, thanks a lot
Glad you liked it, @daumienebi4864 😀
नमस्ते
आपका बहुत बहुत धन्यवाद ।
Great video, I'll integrate it shortly. Any chance you could create a similar video on a11y (accessibility)?
@@HeyFlutter Awesome, happy to help. Thanks for the great content.
Hey Johannes, is there a way to chance the localisation for numbers and dates? I want 2,99 instead 2.99 and 22.10.2022 instead 10/22/2022. I can't find any advice... is it so easy? 😅 I hope you can help me out!
Thanks for the idea Fl3tscheR Thornbridge 😀, i have added it in my list of future videos
Hello Sir! I hope you are doing well. I loved to learn from your videos. I want to ask a question sir as we know an app have multiple things. As you're adding the hello World for text. If i want to change the language of complete app by single click then i have to add all the things one by one??????????????
Sir I want to change the language of whole app like change the language of signup page, login page, dashboard etc??? Will this tutorial work for me???
You're just adding hello world in this tutorial and changing the language of that hello world only... That's why I m asking this que... I hope you'll understand what am I trying to ask?? Sorry 😐 sir for stupid question!
@@shakeebahmedkhan8026 Bro for that you need to get it from back end through API
@@shamshushaash5251 thank you bro but I m using Firebase as a backend for my application
@@shamshushaash5251 oh i see
What about the alignment of the language..like English is left to right..Arabic is right to left. Will the alignment of the language also take place automatically?
I don't want to translate but upload unique language texts. Pls advise.
Thank you, Shah Rahman! 🙂. Yes it will.
شكرا لك
thanks bro
You are welcome, SSuperCrack!
Hello, can you do it in retrieving the translated content by using key in the string format like
‘language’ instead of .language, because I would like to display it based on my database query
By the way, thanks for your guiding 😇
Thank You Chen Yang Bee! Follow this link: stackoverflow.com/questions/58021915/how-to-get-key-data-on-flutter#:~:text=You%20can%20use%20JSON%20to,fast%20with%20less%20human%20error.
I hope you will get your answer 🙂
Thanks alot
Glad you liked it, @ahmedzizo19988 😀
hello. after providing data to receive access to your github, the mail that you send for confirm subscription does not work.Any help?
Thanks, pct constantin! 🙂 Learn more about it here: github.com/JohannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website
Hi, great video. There is an error throwing in my code at 0:59 -> (Abstract classes can't be instantiated.
Try creating an instance of a concrete subtype.) on all Locale('en'),Locale('hi'),Locale('ar') etc. Code also complains about const before locale. Right now i have used Locale.fromSubtags('en') which removes the error but i don't know if its the right approach. How do i tackle this error?
Also, how did you reference .dart_tool at 5:42 without any error? In my code it shows "Target of URI doesn't exist: 'package:flutter_gen/gen_l10n/app_localizations.dart'.
Try creating the file referenced by the URI, or Try using a URI for a file that does exist."
Right now i just copied all the flutter_gen files inside the lib folder. That's alright(good practice), right? It's working then.
@@HeyFlutter I have the exact same issue and this article does not help me... I copied your l10n.dart file but get errors on every const and every Locale. But I dont know why :(
@@linusreutter2108 in your l10n.dart file, add the following import: "import 'package:flutter/material.dart';". Locale is a class from "flutter/material", not from "intl/locale".
@@mattrudin4074 ty 😁
But you didn't show us how to change the language inside the app , like the menu you are using at the beginning
Thank You abdou Ben! Follow this link: stackoverflow.com/questions/65307961/button-to-change-the-language-flutter
I hope you will get your answer 🙂
Thanks a lot for this! But how to change the language at runtime without rebuilding the entire widget tree? Thanks again
@@HeyFlutter Thanks a lot for your valuable reply! 💙
Thank You Mohammed Nihad! Follow this link: docs.flutter.dev/resources/architectural-overview
I hope you will get your answer 🙂
I followed all of it, but the Applocalization is not generated in my app. What should I do?
@@HeyFlutter , I restarted my app, but the flutter_gen package that contains app_localization.dart not generated by itself and now my app show that "AppLocalization is undefined" at localizationsDelegate part.
Does this support Kurdish language? If not, how can I add the Kurdish language to the "ckb" or "ku" code?
Thank You Amin Samad! Follow this link: pub.dev/packages/kurdish_localization
I hope you will get your answer 🙂
Very nice.
Thank you, abbas jafary! 🙂
Thanks a lot ! .. i couldnt reatch github link to get the source code.
Hey, @whitebracket 🙂 make sure to subscribe on github to access code
It's also supposed in Web?. how to change language with the help of pop up. Boz it's define the Mobil local language only
Thank You Jayamurugan J! Follow this link: docs.flutter.dev/development/accessibility-and-localization/internationalization
I hope you will get your answer 🙂
Hi! I have question? How much it cost to add multi languages program in a new developing app?
Thank you, Yogtrack! 🙂. It has no cost.
@@HeyFlutter thanks!
is it incomplete video? u did not show how to change language from the app..by clicking button
@@HeyFlutter Thanks for the excellent video, I would also like to know how to change the language from within the app, I think it's the only thing missing from it.
Thank you, Pritom Chaki! 🙂. I have explained all the important things related to the topic in this video
Bro..This is a nice tutorial but you didn't mention somethings...like are we the one that's going to ask the user what language he wants the app in with a pop up or is playstore already going to provide the appropriate language as they download the app from Google play?
I have already figured this out though....I feel you should have mentioned how to implement also if you get the data from probably a local database not just static data in the arb file...though you used a username parameter...that's nice though...Also what other datatypes does that stuff support??...is it normal datatypes in flutter ??
Hope you understand the question
I think the following video will cover your requirement of letting a user change the language: ruclips.net/video/yrbaZgMtFQs/видео.html
Thank You segga multi!. I showed the main functionality, which is important for this package. Learn more about it here: docs.flutter.dev/development/accessibility-and-localization/internationalization
how can i change the language of text which is coming from api?
Hey 😊, @user-xn2or5te3i! Check out this package: pub.dev/packages/translator you can translate it on your end
Can we change these languages using dropdown button,
if Yes than how ?
Hey, Taimoor Saleem 🙂 please follow this video : ruclips.net/video/z0ihUbwlSHs/видео.html
sir please make a pdf to excel and excel to pdf converter app in flutter
How to improve SEO in flutter plz tell sir
Thank You shive52gaming! Follow this link: medium.com/mindful-engineering/flutter-web-seo-friendly-317528c29cc6#:~:text=Need%20to%20add%20keywords%20meta,making%20the%20website%20SEO%20friendly.
I hope you will get your answer 🙂
Why we have used intl package ?
Thank You vishwajeet patil! Follow this link: pub.dev/packages/intl
I hope you will get your answer 🙂
Hi, How do i apply the same to ios?
because xcode is just giving me like 6 languages
Thank You Ali Dahud! Follow this link: medium.com/@lumeilin301/multi-language-in-flutter-ee393b298ec5
I hope you will get your answer 🙂
set playback speed to 0.75 for better catching
Thanks for your feedback, @nasseralyahya1138! 🙂
Just for you information not all people india knows hindi. And there are crores of people india who doesn't know hindi. And hindi is not an indian national language and it will never become one.
hi sir, i follow your videos alot and they are very infomative.
Thank you, for pointing it out yashwanth babu! 🙂 let's only focus on idea behind video and not on social concerns
@@HeyFlutter yeah sure as usually this is also very informative video,Sir. These hindi speakers shows the racial discrimination not all of them but there are people. It's all about politics.
Thank you for your response keep going with your great explanatory skills.
share code....
Thank You Elsevar!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
yeah the spelling of hindi is incorrect by the way...
Sorry to hear that, EdenIsLive! 🙂
@@HeyFlutter no worries great content though.
previuosly, you provided a free source code, and we share your videos but now you wasting out time to got the code!
Thank you, زيزو الانطاكي! 🙂
why do you have to add unnecessary stages in getting the source?? omg these ytbers tsk
Thank You ʲᵒᵉ!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
Its hindi not hanidi
Thanks for your feedback, RAHUL PRAJAPATI! 🙂
@@HeyFlutter welcome brother
no israel, free palestine !
Thank you, @zakariaelaaliji7747! 🙂
bro nice video, but I just can't stand your voice man. Please add captions
Hi Johannes,
danke, dass du dieses Video hochgeladen hast.
leider funktioniert es bei mir nicht weil ich folgende Fehlermeldung habe:
AppLocalizations lookupAppLocalizations(Locale locale) {
// Lookup logic when only language code is specified.
switch (locale.languageCode) {
case 'en': return AppLocalizationsEn();
case 'es': return AppLocalizationsEs();
}
throw FlutterError(
'AppLocalizations.delegate failed to load unsupported locale "$locale". This is likely '
'an issue with the localizations generation tool. Please file an issue '
'on GitHub with a reproducible sample app and the gen-l10n configuration '
'that was used.'
);
}
habe im Internet bereits geschaut aber leider ist die Lösung für mich leider nicht ersichtlich.
Ist dir dieses Problem bekannt?
Hast du nen Tipp um das Problem zu lösen ?
mit besten grüßen und mach weiter so !!!
Brian