Everything About Flutter Themes In Less Than 10 Minutes

Sdílet
Vložit
  • čas přidán 27. 07. 2024
  • Don't understand how themes work in Flutter? In this video I go over how to figure it out fully. I show you how access the documentation and find out for yourself how to make the changes you desire.
    In this video I also show how to implement dark mode very briefly and how to use ThemeData.dark() (and also how to customize it).
    Customizing Flutter themes can be much simpler than you would think!
    In this video we also explore the buttonTheme and how to customize it properly, as well as the very recent elevatedButtonTheme (what you learn from the example can also be applied to textButtonTheme and outlinedButtonTheme).
    I truly believe that after finishing this video, you will have at your disposal all the tools you'll need to become a Flutter Themes master.
    Theming is an art, use it wisely!
    Documentation:
    Creating An App Theme (Cookbook): flutter.dev/docs/cookbook/des...
    ThemeData Class: api.flutter.dev/flutter/mater...
    TextTheme Class: api.flutter.dev/flutter/mater...
    00:00 - Intro
    00:30 - The theme Property
    01:02 - ThemeData Documentation
    01:47 - ThemeData.dark() (Dark Theme)
    02:31 - Customizing ThemeData()
    03:59 - Applying Theme To A Specific Button
    05:05 - Changing Scaffold Background Color
    05:43 - textTheme
    06:35 - Customizing ThemeData.dark()
    07:20 - Giving a Button Its Own Theme
    07:38 - Applying Theme To Any Widget
    07:47 - Defining A buttonTheme
    08:45 - Exemplifying The elevatedButtonTheme
    09:13 - Flutter Mentor Out
    #flutter #themes #themedata
    Credits:
    OUTRO SONG:
    Mitsubachi by Smith The Mister smiththemister.bandcamp.com
    Smith The Mister bit.ly/Smith-The-Mister-YT
    Free Download / Stream: bit.ly/mitsubachi
    Music promoted by Audio Library • Mitsubachi - Smith The...

Komentáře • 32

  • @user-nf9sz6cy7l
    @user-nf9sz6cy7l Před rokem +3

    Hello! Since Material 3 is out, I am sure a new updated video of theming will give you more views!!

  • @yonastemesgen1478
    @yonastemesgen1478 Před 4 měsíci +1

    This is the best Flutter Theme video on youtube. I have spent many hours on other channels jumping from on to the other. Finally, your vid pops up in my home page as suggestions. Thanks for those who contributed to this vid's suggestion. Please let's support out guy by subscribing and giving a hit!
    Thank you so much, Flutter Mentor.

  • @timh8839
    @timh8839 Před rokem +2

    Great vid, I have been struggling to figure out how to use themes with the new buttons, you made it very straight forward. Keep up the great work.

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

    I feel like I just got 43 hours of knowledge in 10 minutes. THANK YOU.

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

      Haha, thank you so much! Appreciate the support

  • @marflage
    @marflage Před 3 lety +4

    Thank you so much. My head hurt when I was trying to implement a consistent theme for the entire app. Now I believe I can do it swiftly. It would have been great if you also showed the icon theme, but now I feel confident enough to be able to try it myself. Thanks again!

    • @FlutterMentor
      @FlutterMentor  Před 3 lety +1

      Glad it helped! It's great that you want to try it yourself. That's the best way to learn. I don't have any videos on the icon theme, but if you want to look at another theme example, I do have a video on using themes to style a Slider here: czcams.com/video/ZlUEnA4ggYA/video.html

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

    Thank you for this tutorial. I had a rough understanding of it, but you made it much clearer.

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

    this video for sure helped me understanding themes in general.

  • @samuelernandes4772
    @samuelernandes4772 Před 3 lety

    I am a Brazilian university student and I am learning a lot with your videos. Thanks

    • @FlutterMentor
      @FlutterMentor  Před 3 lety

      Love it! Thanks so much! (Cumprimentos de Portugal haha !)

  • @henriquedeveloper8101
    @henriquedeveloper8101 Před 3 lety

    Man, your channel is very informative, keep going!

  • @gautambedi591
    @gautambedi591 Před rokem

    Thanks for the good explanation mate!

  • @juanmacias5922
    @juanmacias5922 Před 2 lety

    Great vid, thanks!

  • @sleepntsheep1169
    @sleepntsheep1169 Před 2 lety

    Thanks! very helpful

  • @Axie_thebossbabe
    @Axie_thebossbabe Před 3 lety

    Awesome video! Looking forward to more videos in the future :)

  • @achyut_ft
    @achyut_ft Před 2 lety

    great tutorial 👍

  • @JAY-bo7tg
    @JAY-bo7tg Před 2 lety +1

    thank you

  • @lowlydeveloper3693
    @lowlydeveloper3693 Před 2 lety +4

    Good tutorial, but much has changed since the day of this recording. Apparently, with the new version of Flutter (I'm using 3.0.3), one must use something like this:
    colorScheme: ColorScheme.light().copyWith(primary: Color(0xFF45D1FD)).
    Colors and theme behaviors change significantly, so you cannot really follow this tutorial starting around 3:36 .... I hope you could update or release a new version. Nevertheless, this is great.

  • @user-uz8gf5kv6y
    @user-uz8gf5kv6y Před 2 lety

    God bless CZcams for half video speed)) Thanks author for the explicit video tutorial!

  • @joeaugusto8035
    @joeaugusto8035 Před 2 lety

    Thank you

  • @samichaudhary8027
    @samichaudhary8027 Před 2 lety

    Oh really great 👍

  • @basil9238
    @basil9238 Před rokem

    After you printed the ThemeData() how did you show the properties is there a button or something?

  • @azersd6778
    @azersd6778 Před 2 lety

    primaryColor doesn't work anymore
    is there any other way to set the primary color with a hexadecimal color value?
    and thanks for the content

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

    deprecated