🥷🏽📱 DARK MODE • Flutter Theme Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ธ.ค. 2024

ความคิดเห็น • 73

  • @createdbykoko
    @createdbykoko  ปีที่แล้ว +2

    💬 Chat App w/ Notifications • mitchkoko.gumroad.com/l/ChatAppMasterclass
    📱 Flutter Masterclass • mitchkoko.app/
    🔥 I'm coding a startup.. www.patreon.com/mitchkoko
    🍀 What feature should I add next?
    Previous video 👉🏽Comments 💬 th-cam.com/video/r6AkdYf_bkE/w-d-xo.html
    🔒Watch the FLUTTER AUTH PLAYLIST first:
    1📱 Modern Login UI • th-cam.com/video/Dh-cTQJgM-Q/w-d-xo.html
    2📱 Email Login & Logout • th-cam.com/video/_3W-JuIVFlg/w-d-xo.html
    3📱 Email Sign Up • th-cam.com/video/qlVj-0vpaW0/w-d-xo.html
    4📱 Google Sign In • th-cam.com/video/1U8_Mq1QdX4/w-d-xo.html
    FULL PLAYLIST • SOCIAL MEDIA APP
    📱 1 • The Wall • th-cam.com/video/yJ7qQxzkh9E/w-d-xo.html
    ❤ 2 • Like Button • th-cam.com/video/yeE5PHHBDnQ/w-d-xo.html
    🤷🏽‍♂ 3 • User Profile • th-cam.com/video/TpW7nLL57uQ/w-d-xo.html
    💬 4 • Comments • th-cam.com/video/r6AkdYf_bkE/w-d-xo.html
    🥷🏽 5 • Dark Mode • th-cam.com/video/66dj7wqXfeA/w-d-xo.html
    🗑 6 • Delete Posts • th-cam.com/video/3owMkQP6SHc/w-d-xo.html
    🐞 7 • Bug Fixes
    Let's talk on Twitter 🐦 twitter.com/createdbykoko/ ✌🏾
    Instagram 📷 instagram.com/createdbykoko/

    • @royalwolves7010
      @royalwolves7010 ปีที่แล้ว

      Brother also videos, the next feature can possibly be that users are allowed to delete their own post

    • @royalwolves7010
      @royalwolves7010 ปีที่แล้ว

      Brother when are we starting the messaging app journey🥺💜

  • @ranjanadissanayaka5390
    @ranjanadissanayaka5390 หลายเดือนก่อน +2

    extremely clear and easy to understand lesson. I had no idea how to set up a theme but now I do. Thank you so much. 😀

    • @createdbykoko
      @createdbykoko  หลายเดือนก่อน

      @@ranjanadissanayaka5390 nice! Glad I could help ❤️ what app are you trying to make?

  • @dunce4629
    @dunce4629 ปีที่แล้ว +2

    Your videos are amazing for new learners, genuinely some of the clearest and most concise tutorials I have ever followed; Thank you very much!

  • @karimMonir_
    @karimMonir_ ปีที่แล้ว +15

    Hey, Mitch!
    I'd like to suggest few things:
    1- a functioning toggle button to toggle between dark and light themes separate from the system.
    2- something for flutter web.
    3- something for flutter desktop applications.
    Thank you, and keep the great work up ❤️

    • @jessesantos7679
      @jessesantos7679 ปีที่แล้ว

      Up

    • @jessesantos7679
      @jessesantos7679 ปีที่แล้ว

      Up

    • @jessesantos7679
      @jessesantos7679 ปีที่แล้ว

      Up

    • @oumaimasouid5229
      @oumaimasouid5229 ปีที่แล้ว +1

      Up

    • @createdbykoko
      @createdbykoko  ปีที่แล้ว +6

      I should've included that in the tutorial. But here's quickly how to do it:
      The setup in the video will automatically switch themes based on the system's theme. To allow users to manually switch between light and dark themes from within the app, you'll need to do a bit more work.
      1. You might want to create a ThemeProvider which extends ChangeNotifier:
      class ThemeProvider with ChangeNotifier {
      bool _isDarkMode = false;
      bool get isDarkMode => _isDarkMode;
      void toggleTheme() {
      _isDarkMode = !_isDarkMode;
      notifyListeners();
      }
      }

  • @JohnRayGlitse
    @JohnRayGlitse ปีที่แล้ว +3

    I've been waiting to seeing this video for so long😍😃... Thank you so much

  • @KaiMeister-p4s
    @KaiMeister-p4s ปีที่แล้ว +2

    Hey, some ideas for the next videos:
    - Follow other users
    - Push-Notifications
    - Delete user (with the option delete all posts and comments or set the creator to "deleted" or "unknown"
    - Delete postings with a swipe-function from the "own wall"
    - possibility to post photos or audio with mic (firebase storage)
    - other sign up methods (Facebook, Instagram etc)
    - settings Page (choose darktheme or use system-settings)
    - monetization with ads or "Ingame"-transactions

  • @Malikmehtabali1
    @Malikmehtabali1 9 หลายเดือนก่อน

    Mitch koku your designs are so precious 💞💕

  • @jointheflock
    @jointheflock ปีที่แล้ว +1

    Nice, thanks for the simple breakdown. Definitely something I want to do a better job at keeping in mind when designing apps

    • @createdbykoko
      @createdbykoko  ปีที่แล้ว

      No problem! Haha how’s flutter going for you so far?

    • @jointheflock
      @jointheflock ปีที่แล้ว

      @@createdbykoko Definitely a fan! It feels faster and more fun to prototype and blend code/design than my previous experiences with web and mobile dev.

  • @mugiwaranocoder
    @mugiwaranocoder ปีที่แล้ว +1

    That's great !!!

  • @ranjanadissanayaka5390
    @ranjanadissanayaka5390 2 หลายเดือนก่อน +1

    This tutorial is awesome dude.. Thanks so much

    • @createdbykoko
      @createdbykoko  2 หลายเดือนก่อน

      @@ranjanadissanayaka5390 ❤️

  • @shahidwani6445
    @shahidwani6445 ปีที่แล้ว +4

    Please implement in-app purchase in flutter next

  • @calpal101
    @calpal101 ปีที่แล้ว +1

    Great video as always ! Question ; what state management do you prefer to use for "big" projects ? I am currently planning to switch to riverpod and want to know what others are using

    • @createdbykoko
      @createdbykoko  ปีที่แล้ว +1

      riverpod bloc, depends on your needs :D what are you roughly trying to make

  • @guffyk
    @guffyk ปีที่แล้ว +2

    Great tutorial! Question… is it possible to have something similar with color themes? So instead of light/dark mode, I want to choose green, blue, dark, etc.

    • @createdbykoko
      @createdbykoko  ปีที่แล้ว +1

      yes of course you can! If you want just 2 different ones then u can use light and dark mode but use your own colors. If you want more than 2 themes then you will need to use something like provider and use themeNotifier!

    • @guffyk
      @guffyk ปีที่แล้ว

      Thanks man. Keep up the great work, really appreciate your tutorials

  • @christianmuntean
    @christianmuntean ปีที่แล้ว

    You could add a functioning Settings Page and cover topics like how to store userpreferences for the specific app (Maybe font size, or giving the user more than 2 themes to choose from, or maybe Date-format preferences)

    • @christianmuntean
      @christianmuntean ปีที่แล้ว

      Oh and maybe Notifications, those are also important. You could add those Notifications where you can directly answer on the notification itself (Android)

  • @nikunjchamaria7825
    @nikunjchamaria7825 ปีที่แล้ว

    I wanted to add some ways to post photo as well...can you add that in the nest section....btw loved the playlist so far

  • @PthCreations
    @PthCreations ปีที่แล้ว

    Was Waiting For This..

  • @d_o_o_m_g_u_y
    @d_o_o_m_g_u_y ปีที่แล้ว +2

    Loving this series. Thanks alot

    • @createdbykoko
      @createdbykoko  ปีที่แล้ว +1

      Glad someone likes it!! Hope it helps!

  • @mobcom4348
    @mobcom4348 ปีที่แล้ว

    Could you please make a multi selectable listview. And a button for select all

  • @lilshaunpicanto
    @lilshaunpicanto ปีที่แล้ว +2

    What about if I wanna change it manually without changing the system settings. Like if I wanted a toggle light or dark mode

    • @createdbykoko
      @createdbykoko  ปีที่แล้ว +4

      I should've included that in the tutorial. But here's quickly how to do it:
      The setup in the video will automatically switch themes based on the system's theme. To allow users to manually switch between light and dark themes from within the app, you'll need to do a bit more work.
      1. You might want to create a ThemeProvider which extends ChangeNotifier:
      class ThemeProvider with ChangeNotifier {
      bool _isDarkMode = false;
      bool get isDarkMode => _isDarkMode;
      void toggleTheme() {
      _isDarkMode = !_isDarkMode;
      notifyListeners();
      }
      }
      2. And then provide this ThemeProvider above your MaterialApp:
      return ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: Consumer(
      builder: (context, themeProvider, child) => MaterialApp(
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: themeProvider.isDarkMode ? ThemeMode.dark : ThemeMode.light,
      home: MyApp(),
      ),
      ),
      );
      3. Now, anywhere in your app, you can toggle between dark and light theme:
      context.read().toggleTheme();
      ✌🏾hope this helps

    • @lilshaunpicanto
      @lilshaunpicanto ปีที่แล้ว

      @@createdbykoko Thank you 🙏 appreciate it

    • @lumiplex404
      @lumiplex404 ปีที่แล้ว

      @@createdbykoko is there a way to do that using riverpod's state management ?
      I am currently using provider scope over the materialapp that's why asking

  • @godwinsampson6081
    @godwinsampson6081 ปีที่แล้ว +2

    Can you do a video about getX state management??

    • @createdbykoko
      @createdbykoko  ปีที่แล้ว

      i could but I don't think I will. There are tonnes of videos on that already

    • @godwinsampson6081
      @godwinsampson6081 ปีที่แล้ว

      @@createdbykoko Oh okay, thanks champ!

  • @TheAbhidugar
    @TheAbhidugar 4 หลายเดือนก่อน

    Hey, if I want different colors in dark/light theme for the 'like' button, how can I do that?

  • @AhmedMezu
    @AhmedMezu ปีที่แล้ว

    sweet so far so good ;D

  • @Ziemecki
    @Ziemecki ปีที่แล้ว

    Do you have any video about how to add adds in the app and get paid?

  • @Malikmehtabali1
    @Malikmehtabali1 9 หลายเดือนก่อน

    Wow amazing bro❤

  • @mohamedgamal-m6m
    @mohamedgamal-m6m ปีที่แล้ว

    how can i presist the theme with provider to get the dark mode on restarting the application ?

  • @ShakeelShirzad
    @ShakeelShirzad 2 หลายเดือนก่อน

    please create a video that when we click on the button the whole app color should change but not to the dark or light the color should be deffirent like blue or purple

  • @codereels
    @codereels ปีที่แล้ว +1

    nice ❣

  • @JasperPauwels
    @JasperPauwels ปีที่แล้ว

    Do you think you could do a video about Firestore and just go over all kinds of different things you can do with databases? One of the things I think about is disappearing messages, that's something that could be implemented in this app.

    • @JasperPauwels
      @JasperPauwels ปีที่แล้ว

      Oh, and while you would be going over a feature like that, showing the possibilities of disappearing messages/images/posts after 24 hours or at like 12am every day would be interesting too. I'd love to see how to incorporate that in this app.

  • @connectSanjayMali
    @connectSanjayMali ปีที่แล้ว

    Hey Mitch!,
    Hey something like mobile and web dev portfolio.

  • @lilshaunpicanto
    @lilshaunpicanto ปีที่แล้ว

    Adding groups/lobbies and individual chats and possibly have the comment section show only the two most popular comments and asks the user to view all to see all the comments added by users. Also a toggle dark mode light mode button
    😊

  • @Icanox
    @Icanox ปีที่แล้ว +1

    bro will it save when you close app and enter again

    • @createdbykoko
      @createdbykoko  ปีที่แล้ว +2

      yes it will change according to the system setting on the device

  • @Hajisarwarr
    @Hajisarwarr ปีที่แล้ว

    You are the best😊

  • @BrYarDJ
    @BrYarDJ ปีที่แล้ว

    work for navigation new screen, new screen ?

  • @SharyDev
    @SharyDev ปีที่แล้ว

    Sir please make a full chat app using firebase as backend and your tutorial is awesomes

  • @sharjeel_mazhar
    @sharjeel_mazhar ปีที่แล้ว

    how to add theme for text? so that the entire app text color changes to whatever we set in light/dark mode, i am talking about Text() widget

    • @doulaeiiminc7430
      @doulaeiiminc7430 ปีที่แล้ว

      Under thr theme data, there is a textTheme variable that takes a TextTheme Class

  • @candraherk1751
    @candraherk1751 ปีที่แล้ว

    Hello Mitch
    I'am teacher from Indonesia
    Please make tutorial to make simple timetable with flutter
    Respect and much love ❤

  • @abiodunosagie
    @abiodunosagie ปีที่แล้ว

    nice

  • @herverenard8805
    @herverenard8805 ปีที่แล้ว

    how do you do your illustrations?

    • @lumiplex404
      @lumiplex404 ปีที่แล้ว

      he already said , he uses rotato

  • @m7md_2009-i
    @m7md_2009-i ปีที่แล้ว +1

    I hope you start working on android studio, because most of those working on flutter are working on android studio, not visual studio.🥰❤

    • @lukassimon8324
      @lukassimon8324 ปีที่แล้ว +4

      Incorrect sir, vast majority of flutter developers use VS Code as it is generally better for development and is also being s lot more light weight.

  • @herverenard8805
    @herverenard8805 ปีที่แล้ว

    how do you do your illustrations?