Theme your Flutter Apps like a PRO | Flutter UI Design | Dark Mode in Flutter

Sdílet
Vložit
  • čas přidán 6. 11. 2021
  • #flutter #darkmode #theming
    In this Flutter UI Design Tutorial, we are going to take a look at implementing Dynamic Themes in Flutter. You will learn to change Flutter App Theme dynamically from Light Mode to Dark Mode by just a switch Toggle. You will learn to streamline the process of Changing Themes in your Flutter app so it is easy to make changes in your Design Elements in one place without going through the complete codebase. This is a necessary part of Flutter App Development and hence it is something that Every Flutter Developer Should Know.
    👉 Git: github.com/retroportalstudio/...
    (Consider Starring ⭐ the Repo if you Learned Something New!)
    👉 Flutter Docs: flutter.dev/docs/cookbook/des...
    🔥 Auto-Generate Flutter Custom Paint Code TRY THIS FREE TOOL👇:
    👉 Flutter Shape Maker: fluttershapemaker.com
    🔥 Learn About the Most Important Widgets in Flutter 👇:
    👉 Widget Essentials Series: bit.ly/3GpfiYw
    👉🏻 Product Hunt: www.producthunt.com/posts/flu...
    (Your UPVOTE Means a lot! 🙌)
    If you find this video useful consider Supporting @RetroPortal Studio :
    👉 Buy Me a Coffee: www.buymeacoffee.com/theretro...
    👉 Patreon: / retroportalstudio
    Social Links @RetroPortal Studio :
    👉 Twitter: / theretroportal
    👉 Medium: / retroportalstudio
    👉 Instagram: / retroportalstudio
    👉 Patreon: / retroportalstudio
    👉 GitHub: github.com/retroportalstudio
    If you like the tutorial, please hit the LIKE and Subscribe button and also consider supporting me on Patreon or Buy Me a Coffee for More Flutter Tutorial on RetroPortal Studio.
    Thank you for Watching! Happy Coding :)

Komentáře • 67

  • @RetroPortalStudio
    @RetroPortalStudio  Před 2 lety +2

    If you find this video useful, consider Following me on:
    👉 Twitter: twitter.com/theretroportal
    👉 Medium: retroportalstudio.medium.com
    👉 GitHub: github.com/retroportalstudio
    👉 Instagram: instagram.com/retroportalstudio
    👉 Patreon: www.buymeacoffee.com/theretroportal

  • @markh1791
    @markh1791 Před 2 lety +2

    This is great - very informative and clear. Thanks!

  • @ejasackey
    @ejasackey Před rokem +2

    I like the exactitude! straight to the point, Thank you.

  • @ferrynatanwibisono536
    @ferrynatanwibisono536 Před 2 lety +2

    Thank you for the tutorial, Awesome!

  • @kahanx10
    @kahanx10 Před rokem +1

    Made life clear, thanks a lot!

  • @henkiespenkie4414
    @henkiespenkie4414 Před 2 lety +2

    exactly what i needed

  • @lindermannla
    @lindermannla Před 2 lety +3

    Excellent tutorial. Congratulations!

  • @MrVipulLal
    @MrVipulLal Před 7 měsíci +2

    Clearly explained. Great tutorial. Many thanks

  • @marlon4008
    @marlon4008 Před 2 lety +1

    Thank you bro for making these videos.

  • @mruduladdipalli5417
    @mruduladdipalli5417 Před 2 lety +6

    Great, you have covered most important topic which is neccessary for everyone, I used to do inline theming for first flutter app which has lite and dark theme, and 20% code was for themeing, :)

  • @md.ruhulamin7963
    @md.ruhulamin7963 Před 2 lety +1

    Thank you sir. Very helpful video.

  • @yohannbelhassen4139
    @yohannbelhassen4139 Před rokem +1

    Thanks for the tuto
    Another thing for everyone to know, there is a transition in the textTheme, when you go an error, it may be because of the mix in the set of attribute.
    Some are frome 2018 and some from 2021 (headline1 from 2018 headlineLarge from 2021) don't mix them up else you got an error

  • @RiccardoGabellone
    @RiccardoGabellone Před 2 lety +3

    best ever!!! 💪

  • @davidtantz
    @davidtantz Před rokem +1

    Cool!

  • @TheJaniable
    @TheJaniable Před rokem +6

    Hey, could you make a video on the new updated theming system in Material 3?
    Things like using color scheme, seed color, etc.

  • @user-hf7fw2eg8r
    @user-hf7fw2eg8r Před rokem +1

    Awesome

  • @fadlydestrianarusmana1076

    Great video

  • @deepikarao2593
    @deepikarao2593 Před 2 lety +1

    If I move the MyHomeScreen widget to another page, the theme does not toggle, but if it is in the same page as the main function and the MaterialApp it works.

  • @TomTomDam
    @TomTomDam Před rokem

    Hi, I want to use DropdownButton instead of a Switch to change the theme. What parameter do I use for the onChanged function in DropdownButton?

  • @bulsond
    @bulsond Před rokem +1

    Thanks🥰

  • @anonymousghost5384
    @anonymousghost5384 Před rokem

    That's nice but i have trouble moving setting bar o another folder when I'm instanciating a new instance theme doesn't change

  • @ZeljkoRacki-wy7tc
    @ZeljkoRacki-wy7tc Před 11 měsíci +1

    Hvala!

  • @gopinathp4953
    @gopinathp4953 Před 2 lety +2

    Question : What if we are creating a custom button using { Material, inkwell,container, Text and icon widgets...} We have to give the background and button color and that color should be depend on the theme data. When we change the theme globally the cusbutton color also should change like elevated button????

  • @wayandanyaeleco4969
    @wayandanyaeleco4969 Před 2 lety +1

    thank you . please upload more video

  • @diyorxalloqov
    @diyorxalloqov Před 11 měsíci

    thanks

  • @ibrahimabushouk2970
    @ibrahimabushouk2970 Před rokem +1

    U BEST!!!

  • @samo92mx
    @samo92mx Před rokem

    with vs extends "changeNotifier" which is better?

  • @michealgabriel1437
    @michealgabriel1437 Před 2 lety

    Hi can this process work for flutter v2.2 and above

  • @muhammadtalhaakbar826
    @muhammadtalhaakbar826 Před 9 měsíci

    My HomePage is not in the same file, and I have used ThemeManager instance there as well, and it is not working.

  • @TechBuddy_
    @TechBuddy_ Před 2 lety +3

    hey just a side note we can use animated builder around the material app to listen to the change notifier which is much more simple and easy
    (edit) video was awesome btw

    • @RetroPortalStudio
      @RetroPortalStudio  Před 2 lety

      Thank you, and yes Sure you can 😁 It is even described somewhere in the documentation i remember 😅

    • @TechBuddy_
      @TechBuddy_ Před 2 lety

      @@RetroPortalStudio wait is it really in the docs cuz ive never seen that before also we can combine it with a service locator to get a wonderful state management solution

    • @RetroPortalStudio
      @RetroPortalStudio  Před 2 lety

      @@TechBuddy_ i am looking for it 😅 i read it somewhere

    • @TechBuddy_
      @TechBuddy_ Před 2 lety +1

      @@RetroPortalStudio or just make a video on it so others can benefit from it too instead of it being somewhere deep in the docs where no-one can find it

    • @TechBuddy_
      @TechBuddy_ Před 2 lety +1

      @@RetroPortalStudio hey I found it it's in the new app sample thingy

  • @MoisesConejo
    @MoisesConejo Před 2 lety +1

    6:16 what kind of magic you use to transform a Stateles Widget in to a Stateful widget in an snap of a finger?

    • @andreisas1621
      @andreisas1621 Před 2 lety +2

      right click on stateless, click refactor, click convert to stateful widget, done

    • @adeemmmm
      @adeemmmm Před rokem

      You had me laughing by saying magic

    • @MoisesConejo
      @MoisesConejo Před rokem

      @@andreisas1621 thanks!

  • @masishta
    @masishta Před 2 lety +1

    Didn't accentColor deprecated?

  • @sat_talk
    @sat_talk Před 2 lety +1

    Awesome video bro. can you give details of the style of your mouse cursor ?. How can I use such a nice mouse cursor?

  • @kamranprograming674
    @kamranprograming674 Před rokem

    Bro what if the the _themeManager is not in same file
    how I can use in another file
    create new instance ?

    • @john__0
      @john__0 Před 10 měsíci

      use any state management of your choice

  • @RafaelCapati
    @RafaelCapati Před 2 lety +2

    primaryColor din't changed appbar color for me. Flutter 2.5.3.

    • @idlevandal69
      @idlevandal69 Před 2 lety +1

      Same for me. Also running 2.5.3

    • @RafaelCapati
      @RafaelCapati Před 2 lety +1

      @@idlevandal69 The new way is using color scheme.

    • @APhatPanda
      @APhatPanda Před rokem +1

      for anyone running into this problem when trying to use primaryColor at 7:56, try using colorSchemeSeed instead:
      colorSchemeSeed: COLOR_PRIMARY
      also, its not good practice to use all caps and underscores for constant names e.g. const COLOR_PRIMARY.
      It is better practice to use LowerCamelCase e.g. const colorPrimary =

  • @slowDev.1
    @slowDev.1 Před 10 měsíci +1

    please make a video that explains Text Theme plz plz

  • @srkrishnan1989
    @srkrishnan1989 Před 2 lety

    System theme is missing

  • @anupambd94
    @anupambd94 Před 4 měsíci

    Not working. Can you help?

  • @pipaliyaashish4832
    @pipaliyaashish4832 Před 2 lety +1

    Any theme generator in mind ? Color combination ka idea nhi aata. Sare apps black & white theme ka banata hu. Sed lyf

  • @hassanamjadyousafzai6610
    @hassanamjadyousafzai6610 Před 2 lety +2

    I've done the whole code correctly, everything is fine, I've checked it several times, but theme of the app is not changing, kindly guide me a little.

    • @tomschfr1851
      @tomschfr1851 Před 2 lety +2

      Did you find a solution, today a got the same problem. Thanks!

    • @jyothishkoladath1907
      @jyothishkoladath1907 Před rokem

      Me too

    • @ccu28
      @ccu28 Před rokem

      @@jyothishkoladath1907 i think i solved it, check my answer.

  • @puriwatw.1323
    @puriwatw.1323 Před 2 lety

    Do I have to write
    TextTheme _textTheme = Theme.of(context).textTheme;
    in every files?

  • @ManojKumar-iu3zh
    @ManojKumar-iu3zh Před 2 lety +1

    Yo bro can i get job learning flutter

  • @faheemahmadofficial7701

    Please install windows 11

  • @somdey7604
    @somdey7604 Před 2 lety +1

    nah...i'm not giving any theme in here

  • @mohammadsalah716
    @mohammadsalah716 Před 8 měsíci +1

    Why you are in a hurry?! You are not trying to deliver a solution you are teaching