No video

Flutter Tutorial - Flutter Dark Mode Switch - Light & Dark Theme For Android & iOS

  Рет қаралды 74,952

HeyFlutter․com

HeyFlutter․com

Күн бұрын

Пікірлер: 135
@HeyFlutter
@HeyFlutter Жыл бұрын
This might help you :) 👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com Source Code: github.com/JohannesMilke/theme_example
@adamhowley8037
@adamhowley8037 Жыл бұрын
I have watched this so many times and compared to everyone else it is simple and clearly explained. Thank you! 🎉
@HeyFlutter
@HeyFlutter Жыл бұрын
Thanks, Adam Howley! 🙂
@dovkaupas
@dovkaupas 3 жыл бұрын
Man, you make hands down the best Flutter tutorials. Thank you!
@RajA-me9cl
@RajA-me9cl 3 жыл бұрын
Your channel is very informative. Focusing on one feature at a time. Thank you.
@StarBattle08
@StarBattle08 3 жыл бұрын
Thanks for starting it with a new project, a lot of tutorials starts with a somewhat done app already and you have to watch their previous videos first
@Pedro5antos_
@Pedro5antos_ 3 жыл бұрын
14:42 the last tip was awesome! Because default was the light theme THANKS!
@TheGaoNan
@TheGaoNan 3 жыл бұрын
I'm watching each and every video of yours, keep up the fantastic work. Can't thank you enough!
@thorvalld
@thorvalld 3 жыл бұрын
Clean and clear! Thank you for the effort, straight to the point and very helpful! I do have a question, **How to add Shared preferences to this project?**
@ranatr
@ranatr 2 жыл бұрын
Great video...I need this kind of navigationbar
@mahmoudmakled5685
@mahmoudmakled5685 Жыл бұрын
your channel has motivated me to take this course
@HeyFlutter
@HeyFlutter Жыл бұрын
Thanks, Mahmoud Makled! 🙂
@moodmud261
@moodmud261 3 жыл бұрын
Good explanation so far. I can easily get it. But i saw that there are some missing or skipped step which will be hard for beginner to understand.
@barziyassin1
@barziyassin1 Жыл бұрын
Thanks Johannes, another victory as expected ✌
@HeyFlutter
@HeyFlutter Жыл бұрын
You’re most welcome, Barzy Yasin! 🙂
@SoothingSoulSymphonies
@SoothingSoulSymphonies 3 жыл бұрын
Awesome as always!
@harysuryanto
@harysuryanto 2 жыл бұрын
Thank you!
@dominatingtrend5872
@dominatingtrend5872 2 жыл бұрын
bro, thanks for the video, it was really easy to understand. but I have a question what about selected icon theme?
@rod5751
@rod5751 3 жыл бұрын
Hi Johannes, great video. All other examples use static methods, but you've gone with a class and methods, any reason for that? Thanks.
@e.b.a2523
@e.b.a2523 3 жыл бұрын
God bless u man
@ARTPROGRAMS
@ARTPROGRAMS 2 жыл бұрын
Thanks! Great video! )
@aschlemmer
@aschlemmer 3 жыл бұрын
top video, again. Your solution works like a charm. Thank you!
@mobihen
@mobihen 2 жыл бұрын
You are so well informative! Thanks ! your videos are very much fun :) 🤩
@ankitvishwakarma530
@ankitvishwakarma530 3 жыл бұрын
Very clean video with clear step thanks keep doing it
@ShuaibShahzan
@ShuaibShahzan 3 жыл бұрын
@Johannes Milke Thank you so much for this wonderful tutorial. Could you please make a tutorial focusing on theming form fields such as TextFormField, radio button, checkbox and so on using ThemeData.
@ShuaibShahzan
@ShuaibShahzan 3 жыл бұрын
@@HeyFlutter Thanks for adding it to you todo list.
@BB-fg9ed
@BB-fg9ed 3 жыл бұрын
Teacher the theme applies when system dark mode is on but the switch doesn't turn on...Please make a video about it(I copied it exactly as your vid)
@fikreamlak
@fikreamlak Жыл бұрын
Your tutorial is awesome. Thank you so much!
@HeyFlutter
@HeyFlutter Жыл бұрын
You’re most welcome, Fikreamlak! 🙂
@reemaahuja8397
@reemaahuja8397 2 жыл бұрын
Always helpful. Keep up the good work♥️👍🏻
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank you, Reema Ahuja! 🙂
@yunismaruf
@yunismaruf 2 жыл бұрын
15:12 Thanks!
@joegoodman4358
@joegoodman4358 3 жыл бұрын
Great video! I think I'll go with this on my app
@Moncellence
@Moncellence 3 жыл бұрын
Thank you so much Johannes Milke
@behnamjafari2731
@behnamjafari2731 2 жыл бұрын
Well done brother
@erick-boh
@erick-boh Жыл бұрын
Awesome! Thank you!
@HeyFlutter
@HeyFlutter Жыл бұрын
You’re most welcome, @erick-boh! 🙂
@ivomele6604
@ivomele6604 Жыл бұрын
Hi, first of all thank you for all! you are a great developer. I have a question, why at 7:14 you use two Provider.Of and not re-use the same?. Thanks
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank You Ivo Mele! Follow this link: stackoverflow.com/questions/58774301/when-to-use-provider-ofx-vs-consumerx-in-flutter I hope you will get your answer 🙂
@kickart7517
@kickart7517 2 жыл бұрын
man your a really mvp for flutter developers, you even let us thing what actually missing in some of your video on which is good for our critical thinking. i have a question when i change the theme inside the app and close it, it return to its default theme which is system themes? how can i stay it in the dark mode after i close the app and the system theme was light mode?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Kickart! Follow this link: stackoverflow.com/questions/59852379/saving-state-after-app-is-closed-with-provider-package-flutter I hope you will get your answer 🙂
@naushadhusain443
@naushadhusain443 Жыл бұрын
very nice explanation
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, Naushad Husain! 🙂
@spinoff2011
@spinoff2011 2 жыл бұрын
@johannes I have a question!! In the minute 7:14 why didn´t you use the top reference to the provider instead of the one that you put in the onchange callback? I don´t understand the difference between both... :s Thanks a lot!!!🙏🏼🙏🏼
@tnd_
@tnd_ 2 жыл бұрын
Hi Johannes, thank you for your great tutorials! I have a question: I want to change a variable (different assets for dark and light) in my home.dart based on whether dark mode is activated or not. Do you know how/if that is possible?
@sanjibdutta9270
@sanjibdutta9270 3 жыл бұрын
Great man. I become your fan 🙂
@MuhammadUmair001
@MuhammadUmair001 2 жыл бұрын
thank you
@mariagromova2119
@mariagromova2119 Жыл бұрын
Thank you 🙏
@HeyFlutter
@HeyFlutter Жыл бұрын
You are welcome, Maria Gromova 😊
@hanahusein5860
@hanahusein5860 2 жыл бұрын
That was amazing, thank you
@HeyFlutter
@HeyFlutter 2 жыл бұрын
You’re most welcome, Hana Husein! 🙂
@caleboruta4850
@caleboruta4850 2 жыл бұрын
Very lovely video, simple and easy to implement. How do I have the theme chosen to flutter storage they don't get the default system theme after choosing a theme
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank you, Caleb Oruta! 🙂 it's simple you can stop listening to device's current theme once user selected from app
@peacefulnaturalworld8964
@peacefulnaturalworld8964 Жыл бұрын
Hello I'm using this code after watch video. I like code but if you use with shared prefrences for your code, It will be better.
@HeyFlutter
@HeyFlutter Жыл бұрын
Thanks for the suggestion @peacefulnaturalworld8964! 🙂
@ScottKFraley
@ScottKFraley Жыл бұрын
Great tutorial kind Sir! My question is, how do I change all the colors, etc. if my app does NOT have a theme switch, but only goes by the system settings? Thanks!
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank You Scott K. Fraley! Follow this link: stackoverflow.com/questions/49203740/how-to-change-the-entire-themes-text-color-in-flutter I hope you will get your answer 🙂
@xluzka
@xluzka Жыл бұрын
Hi Johannes, greetings from Brazil! I want to create a custom navbar, just like yours. Is there any video you're teaching how to make it?
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank You Lucas Monteiro! Follow this link: pub.dev/packages/custom_navigation_bar I hope you will get your answer 🙂
@rexarvind-in
@rexarvind-in 2 жыл бұрын
do you have a course on Udemy, I'd love to buy. we all would buy 🎉, you are good teacher.
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Arvind Kumar!. Learn about it here: johannesmilke.teachable.com/p/home
@mrbusy4215
@mrbusy4215 3 жыл бұрын
Thanks for your helping Us
@heavyTeabyBangla
@heavyTeabyBangla 3 жыл бұрын
Great Video :)
@hwwinn25
@hwwinn25 2 жыл бұрын
Wonderful Video, i was wondering, is there any way how i can save the state? when hot reloading the theme returns from dark to light ?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You UJ! Follow this link: stackoverflow.com/questions/69824460/save-full-state-of-a-flutter-application I hope you will get your answer 🙂
@markcagas1622
@markcagas1622 3 жыл бұрын
Hi! I was wondering if it were possible to have a gradient background for the scaffoldBackgroundColor. Is there a way to implement this?
@markcagas1622
@markcagas1622 3 жыл бұрын
@@HeyFlutter Thanks! It works now. Your videos are really helpful. Keep up the great content!
@popbob4780
@popbob4780 2 жыл бұрын
Wie geht es das bei der NavigationBar kein Rand darum ist bei mir ist wegen der margin immer ein rand?
@mrwalkan
@mrwalkan 2 жыл бұрын
How to change the system navbar color based on light and dark mode
@alperbayata2877
@alperbayata2877 2 жыл бұрын
How to save theme in local?
@maitreyiprabhaharan4544
@maitreyiprabhaharan4544 3 жыл бұрын
Thanks a lot.
@manojkumarnayak5493
@manojkumarnayak5493 3 жыл бұрын
Why scaffold rebuilds many times if we change theme? It should rebuild only once if we change theme right?
@vidyasagargaikwad1268
@vidyasagargaikwad1268 3 жыл бұрын
How can we implement with Multiple Providers? I could not please help sir 🙏🙏
@VinaySharma-bb6ib
@VinaySharma-bb6ib 3 жыл бұрын
I use vs code for android and ios simulation via flutter on my android emulator and the theme doesn't work on both platforms is use the custom ThemeData class. Do you have any solution?
@putrabahriantararamadhan6970
@putrabahriantararamadhan6970 2 жыл бұрын
how do dark mode stay active when user closes app and revisits app?
@king4053
@king4053 3 жыл бұрын
How to save the preference and load the theme in startup?
@Axie_thebossbabe
@Axie_thebossbabe 3 жыл бұрын
I followed all the processes till the end but only got the UI as in the first section. Why is that?
@thazeroword646
@thazeroword646 3 жыл бұрын
Very nice ui...
@anasyousuf485
@anasyousuf485 2 жыл бұрын
I have used custom colors in my app like one container having a certain color and then another container having a different one (same goes with text widget), so doing a theme like this way maybe won't solve it. so do I have to use ternary for it everywhere? or is there a better solution?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Hey 😊, Anas Yousuf! Check out this solution : stackoverflow.com/a/63954659 I hope it may help you
@kdrocks7
@kdrocks7 3 жыл бұрын
Will this work when i close the app from the background and restart, will it show the selected theme again?
@phosepio.
@phosepio. 11 ай бұрын
dunno if anyone would see this but is there a way to change the switch into a button?
@HeyFlutter
@HeyFlutter 11 ай бұрын
Yes, @phosepio. 🙂you can change it. It's pretty easy. But still, I prefer switch is a better option for better UI/Ux.
@deepjyotibaishya7576
@deepjyotibaishya7576 2 жыл бұрын
i am not able to access changenotifier provider On tap Navigation material page route .
@deepjyotibaishya7576
@deepjyotibaishya7576 2 жыл бұрын
@@HeyFlutter I solved . I removed Import path . then i use auto import . Basically i rename using f2 .but rename not changed everywhere . thats why i got error .
@erlend1587
@erlend1587 3 жыл бұрын
Thanks for a great tutorial! Would you know how to support dark mode on a CupertinoApp?
@erlend1587
@erlend1587 3 жыл бұрын
@@HeyFlutter Oh, just watched this video, but it is using MaterialApp, which supports themeMode and darkTheme. CupertinoApp doesn't 🤔
@broteendas1194
@broteendas1194 Жыл бұрын
5:30 Why did we use *get* there? Couldn't we just give isDarkMode the value directly?
@HeyFlutter
@HeyFlutter Жыл бұрын
Hey, Broteen Das 🙂 Getters and setters are part of OOPS, you can use directly also
@broteendas1194
@broteendas1194 Жыл бұрын
@@HeyFlutter Got it sir... I'll look more into it
@rangasamyeswaran8440
@rangasamyeswaran8440 3 жыл бұрын
i want to know switch theme by using icon button
@rangasamyeswaran8440
@rangasamyeswaran8440 3 жыл бұрын
@@HeyFlutter yah I got it thank you.. Dude..
@tharoseth8064
@tharoseth8064 3 жыл бұрын
The best vdo.
@ReyRendryo
@ReyRendryo 10 ай бұрын
how to make the switch off for first open the apps?
@HeyFlutter
@HeyFlutter 10 ай бұрын
Thank You @ReyRendryo! Follow this link: stackoverflow.com/questions/60792667/flutter-switch-toggles-off-on-its-own I hope you will get your answer 🙂
@eddielicea3740
@eddielicea3740 2 жыл бұрын
So in the bonus section, you set theme mode to ThemeMode.system; when I change display to darkmode and start my app, the switch isn't toggled on automatically, I have to click it twice. can you help me with this?
@eddielicea3740
@eddielicea3740 2 жыл бұрын
@@HeyFlutter Thank you very much brother :)!
@vaibhavlohakare4590
@vaibhavlohakare4590 3 жыл бұрын
hiii @johannes Mike i implement this video in my app but get problem is if a reload that app my sleected the i.e dark theme turn it into light i search many solutions but i didnt find any relative plz help me in this ...
@Gagan13
@Gagan13 3 жыл бұрын
Yes, because in this tutorial he hasn't used shared preference to save the theme and i don't know why he has still not updated his github with shared pref. This tutorial is incomplete and of no use.
@Munchalope
@Munchalope 2 жыл бұрын
Anyone know of a way to implement this in the settings_ui tutorial? Whenever I toggle the switch on the settings page, it bounces me out to the homepage. I'd like for the toggle to work but keep me in the settings page. Any ideas?
@user-cm2mq4fp4e
@user-cm2mq4fp4e 10 ай бұрын
I'm facing the same problem , did you find any solutions ?
@davalien7358
@davalien7358 Жыл бұрын
How do i chantge automatically all icons when changing to dark theme
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank You DAVALIEN 73! Follow this link: stackoverflow.com/questions/60232070/how-to-implement-dark-mode-and-light-mode-in-flutter I hope you will get your answer 🙂
@MusiGod
@MusiGod Жыл бұрын
one issue i am facing when restarting the app the theme reset
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, MusiGod! 🙂. Try to provide enough details with your question whenever you face any issue.
@sivavenkateshr
@sivavenkateshr 3 жыл бұрын
Great 👍
@sivavenkateshr
@sivavenkateshr 3 жыл бұрын
@@HeyFlutter I have been learning flutter for about a month. Your videos are awesome and easy to understand. Thank you. 😊 And keep rocking.
@spoiled_kitten
@spoiled_kitten 2 жыл бұрын
Might be a dumb question. But does this save upon restarting the app? Also does it save across different pages?
@spoiled_kitten
@spoiled_kitten 2 жыл бұрын
@@HeyFlutter sweet! Thankyou! Love tutorials btw!!!
@spoiled_kitten
@spoiled_kitten 2 жыл бұрын
@@HeyFlutter How do i set it acros the pages tho? I cannot seem to make it the same across different pages if i change it
@k_EC_ANURAGPAL
@k_EC_ANURAGPAL 3 жыл бұрын
simply explained.....excelent brother....today i discovered something i would like to share with you...... If someone helps others.. Who helps him If someone serving others who is serving him If anuraag said hurtful things to shivuBaby then who said such things to anuraag It's all balanced by God Mystery solved💪😄👌 If you start loving everyone God will start loving you❤🌙❤🌙❤... Universal balance⚖️⚖️⚖️ This should be unconditional... If you put a condition on ❤... Then it will cease to be ❤....
@k_EC_ANURAGPAL
@k_EC_ANURAGPAL 3 жыл бұрын
😅😂
@sagarmoriya9773
@sagarmoriya9773 3 жыл бұрын
can you make dark mode state changes using getx package instead of provider package
@sagarmoriya9773
@sagarmoriya9773 3 жыл бұрын
@@HeyFlutter also picking multiple images from gallery and displaying it on screen 😅 cause using image picker we can only select one image there are lots of package like multi image picker but it doesn't work well hope you will make video on this topic
@ilwsl
@ilwsl 2 жыл бұрын
I want to change the theme with a dropdownmenu, some can help?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Willders Daviel Carvajal Peña! Follow this link: stackoverflow.com/questions/60232070/how-to-implement-dark-mode-and-light-mode-in-flutter I hope you will get your answer 🙂
@rexarvind-in
@rexarvind-in 2 жыл бұрын
@@HeyFlutter waaoo, you are so kind to help. well done 😇
@idiotsinaccidents
@idiotsinaccidents 3 жыл бұрын
DISLIKE! The selected theme does not persist when app is relaunched. There is no easy way to apply shared preferences method using this structure.
@flutterquick
@flutterquick Жыл бұрын
anyone who knows how to i persist theme data in my phone.
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank You amanuel gulilat! Follow this link: stackoverflow.com/questions/68267016/how-to-save-the-state-of-the-app-with-the-current-theme-in-flutter I hope you will get your answer 🙂
@Gagan13
@Gagan13 3 жыл бұрын
Pls update your github with shared pref. so that people can really use this in their app. How can a tutor like you miss that. People follow you for some reason and you should make it worth. Don't give them reason to unsubscribe you. Waiting for the update. Your 10 mins time could save beginners 5 hours, first to understand the reason and to do this all over again in the app by following somebody else.
@Gagan13
@Gagan13 3 жыл бұрын
@@HeyFlutter Thanks. Hope you do it soon and mention it in pinned comment.
@angadcheema
@angadcheema 2 жыл бұрын
and i thought kotlin was difficult
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thanks for your feedback, Angad C! 🙂
@oijgg3p
@oijgg3p 3 жыл бұрын
Dislike. Next time finish the project with Shared Prefs, don't scam people. We can do shit with this toggle switch if we lose all data when we leave the app. (Don't say 'oh here is shared prefs video', no, you should have placed it here already). Next time I see a state that you don't care to save, I will unsubscribe.
@oijgg3p
@oijgg3p 3 жыл бұрын
@@HeyFlutter It's not about me, but some kids that are just learning flutter. I know when I started, I followed a video to a work (I could just guess how it feels when they find out Dark Mode stops working every time they close an app). And, it's just 3 lines, initialize, setBool, getBool and done. Don't take my rant as a bad thing, you are still an amazing teacher.
@Gagan13
@Gagan13 3 жыл бұрын
@@HeyFlutter fix this pls, now i have followed your tutorial in app and now it is of no use and pls update your github and let people know.
@Geceparlayan
@Geceparlayan Жыл бұрын
you really don't know about flutter too much like a professional to teach. you just google it and copy past codes here. you even don't have enough experience with flutter. you are not theming like a professional. thanks god there is someone who is worse enough in flutter than me 😂😂😂😂😂😂😂
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, FTF Music! 🙂. We always learn and try to improve ourselves, you kind suggestion will help in that regard. Let us know what should we improve in our videos? Your suggestion will be highly appreciated.
@lbm5444
@lbm5444 2 жыл бұрын
For MultipleProviders use the context from the *builder* method and not the one MaterialApp is using. Widget build(BuildContext notThisContext) { return MultiProvider( providers: [ ...], builder: (useThisContext, child) { return MaterialApp( themeMode: Provider.of(useThisContext).themeMode, ... );})}
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank you, lbm5444! 🙂
@JassimSays
@JassimSays Жыл бұрын
Thank you!
@HeyFlutter
@HeyFlutter Жыл бұрын
You are welcome, @JassimSays!
Flutter Tutorial - Showcase & Highlight Widgets of Flutter App
10:11
HeyFlutter․com
Рет қаралды 19 М.
هذه الحلوى قد تقتلني 😱🍬
00:22
Cool Tool SHORTS Arabic
Рет қаралды 52 МЛН
Can This Bubble Save My Life? 😱
00:55
Topper Guild
Рет қаралды 86 МЛН
Секрет фокусника! #shorts
00:15
Роман Magic
Рет қаралды 39 МЛН
ROLLING DOWN
00:20
Natan por Aí
Рет қаралды 11 МЛН
🥷🏽📱 DARK MODE • Flutter Theme Tutorial
8:02
Mitch Koko
Рет қаралды 34 М.
Dark & Light Theme with BLoC Flutter
6:00
Flutter Tricks
Рет қаралды 2,5 М.
Most overpowered way to build mobile apps?
8:33
Beyond Fireship
Рет қаралды 776 М.
ThemeExtensions | Decoding Flutter
6:13
Flutter
Рет қаралды 56 М.
Riverpod Tutorial - Flutter Dark Mode Switch
2:47
Flutter Guys
Рет қаралды 7 М.
هذه الحلوى قد تقتلني 😱🍬
00:22
Cool Tool SHORTS Arabic
Рет қаралды 52 МЛН