Flutter Tutorial for Beginners #6 - Colours & Fonts

Hey gang, in this Flutter tutorial I'll explain ho we can use the Material Design colour library in Flutter. I'll also show you how to add a custom font to our projects as well.
----------------------------------------
🐱‍💻 🐱‍💻 Course Links:
Course files - github.com/iamshaunjp/flutter...
Android Studio - developer.android.com/studio
Git - git-scm.com/downloads
Flutter Installation - flutter.dev/docs/get-started/...
🐱‍💻 🐱‍💻 Other Related Courses:
+ Modern JavaScript Tutorial - www.udemy.com/modern-javascri...

Пікірлер: 289

  • @amirmb_
    @amirmb_3 жыл бұрын

    As an experienced native android developer, this is exactly what I'm looking for. This makes my journey in flutter dev effortless. Thanks man!

  • @yoapps137
    @yoapps1374 жыл бұрын

    Seriously amazing. I say that with confidence because I was a guy who was thrown into flutter a flutter project with no experience. I learnt on the job... and believe me it was nerve wrecking. If I had seen this before, man it would have been so much more easier & pleasurable. Thanks again!

  • @zhongzhengge5296
    @zhongzhengge52962 жыл бұрын

    This series is exactly what I'm looking for!! It really starts from scratch and is friendly to beginners like me. Thank you so much bro!!!!

  • @rikiamaru
    @rikiamaru4 жыл бұрын

    i love how in depth this tutorial is but also not blabbering too much super technical aspect of one widget or another, because one way to teach is to get that person interested and IM HYPE FOR THIS FLUTTER BECAUSE OF THIS SERIES!! Thank you

  • @etekumoses3320
    @etekumoses33204 жыл бұрын

    man you have made me reach some level i used to ask myself how i would learn flutter but here i am keep up man

  • @clarencelunalo976
    @clarencelunalo9763 жыл бұрын

    so far the best flutter teacher on youtube outshines so many others, great work man

  • @NetNinja

    @NetNinja

    3 жыл бұрын

    Thanks! 😃

  • @arunavkhare2733
    @arunavkhare27334 жыл бұрын

    Man, you are just awesome. The tutorials you created are best on the web. May you grow higher and may you make more such videos. Thanks !

  • @sameerk12982
    @sameerk129824 жыл бұрын

    Excellent tutorial.....Started to loving Flutter only because of your tutorials.....Thank you for your efforts.

  • @bimalinc6230
    @bimalinc62302 жыл бұрын

    i must say that this is the best beginners tutorial on KZread. if you have 0 knowledge on flutter please watch this video. he will literally teach you from SCRATCH.

  • @zb2747
    @zb2747 Жыл бұрын

    Thank you! love your tutorials - simple, well explained, and to-the-point!

  • @NetNinja

    @NetNinja

    Жыл бұрын

    You're very welcome :) thanks for the kind words ZB!

  • @Dstra4551
    @Dstra45512 жыл бұрын

    Thank you soo much sir!! Your Lectures are helping me to understand how things works in flutter.

  • @patrick-zb6fx
    @patrick-zb6fx3 жыл бұрын

    i love the way you explain, it's crystal clear for me

  • @amisheth5740
    @amisheth57404 жыл бұрын

    Sir thanks a lot u really have helped me Your language is bit difficult sometimes some words but u r too good I learnt so many things Thanks a lot sir

  • @gamegunner9079
    @gamegunner90794 жыл бұрын

    And that's because this is a button and buttons are there to be pressed - Shaun Pelling (The Net Ninja)

  • @kameshparashar

    @kameshparashar

    3 жыл бұрын

    So press the subscribe button!!

  • @angelicamanjarres3179
    @angelicamanjarres317910 ай бұрын

    Hi! It's three years into the future here and this is still relevant. I was trying to learn Flutter on my own and while I got the gist of it, this really cleared up a lot of things for me. Thank you.

  • @NetNinja

    @NetNinja

    10 ай бұрын

    That's great to hear :) thanks

  • @udaynj
    @udaynj2 ай бұрын

    Incredible set of tutorials - so well explained and logically laid out!

  • @NetNinja

    @NetNinja

    2 ай бұрын

    Thanks, that means a lot :)

  • @FlexitoolGuides
    @FlexitoolGuides4 жыл бұрын

    Great teaching style, so easy to understand!

  • @adforknowledge6582
    @adforknowledge65824 жыл бұрын

    U r awesome.. Loved those fonts.... Thanks... Finally I am doing programs of flutter... Thanks buddy for uploading it and making it so engaging and awesome.... :)

  • @AhmedSalah-yd6we
    @AhmedSalah-yd6we4 жыл бұрын

    Nice work and great effort

  • @bryxjp
    @bryxjp4 жыл бұрын

    thank you sir im workin on it rn and i actually learning from your vids so im on #6 rn will do #7 tomorrow :> thank you for the tuts

  • @hououinkyouma5372
    @hououinkyouma53723 жыл бұрын

    I can't tell you how much I appreciate this...

  • @govindkrishnalb
    @govindkrishnalb3 жыл бұрын

    If Font not changing: try this Fix#1 : The font and folder names are case sensitive, check the names and update accordingly Fix#2: Check the indentation (spaces) Fix#3: Restart the emulator.

  • @lalaboxer7606

    @lalaboxer7606

    3 жыл бұрын

    restarting what like in the run console kinda thing

  • @ioana-ut8rz

    @ioana-ut8rz

    3 жыл бұрын

    I don#t really understand how exactly should be the indentations

  • @crookshanksacademy

    @crookshanksacademy

    2 жыл бұрын

    @@ioana-ut8rz I know that it's late, but you can get precise indentations here: docs.flutter.dev/cookbook/design/fonts#2-declare-the-font-in-the-pubspec

  • @sakthiraja8517

    @sakthiraja8517

    2 жыл бұрын

    this helped man!

  • @alimurtazaharoon1072

    @alimurtazaharoon1072

    9 ай бұрын

    Restarting the emulator worked for me. Thanks man

  • @josbexerr5166
    @josbexerr51664 жыл бұрын

    Gracias Mister Ninja, muy didactico y muy bien explicado

  • @mohamadnateqi5456
    @mohamadnateqi54564 жыл бұрын

    So good tutorial, Thanks for all the effort

  • @67Azhaar
    @67Azhaar4 жыл бұрын

    Very easy way of teaching, Thank you so much...

  • @TygruletZ
    @TygruletZ3 жыл бұрын

    At the minute 1:31 if you need the shortcut for MacBook then when you have that list of colours just press Control + J and the 'Quick Documentation' will show up.

  • @faridmurzone

    @faridmurzone

    2 жыл бұрын

    Thanks!

  • @brijpatel237
    @brijpatel2374 жыл бұрын

    75k views and 1k likes, man you deserve more, Awesome video!

  • @eved
    @eved4 жыл бұрын

    I like how that you explain everything. It has really helped a lot. But I have a question. How did you automatically arrange the selected fonts code around 8:22? thanks.

  • @battleragecoc9411

    @battleragecoc9411

    4 жыл бұрын

    Finally found it... Select the lines you need to move.. Press tab to make it move right and shift + Tab to move it left.

  • @IssaalaaRacing

    @IssaalaaRacing

    4 жыл бұрын

    @@battleragecoc9411 I was wondering the same thing, thank u so much.

  • @ghassanalkaraan

    @ghassanalkaraan

    4 жыл бұрын

    @@battleragecoc9411 Thanks

  • @nikjavor

    @nikjavor

    4 жыл бұрын

    My life too

  • @minizealex3339

    @minizealex3339

    4 жыл бұрын

    @@battleragecoc9411 thanks maaaaan :D I was wondering 3

  • @user-vw5si9oe5v
    @user-vw5si9oe5v4 жыл бұрын

    This tutorial is just perfect

  • @john.doe.2024
    @john.doe.20244 жыл бұрын

    Hello from Turkey! Thenks for tutorials.

  • @salomastation6004
    @salomastation60044 жыл бұрын

    It was awesome like no one could make it before 👍👍👌

  • @smilingreshmi
    @smilingreshmi3 жыл бұрын

    VERY HELPFUL TUTORIAL !! GOD BLESS YOU

  • @robertopena3346
    @robertopena33463 жыл бұрын

    Great job. Thanks from Mexico.

  • @JagSan.
    @JagSan.4 жыл бұрын

    Awesome! Thanks!

  • @raymondjones6273
    @raymondjones62732 жыл бұрын

    Creating layouts programmatically is quite a change from the visual method of creating layouts for native apps in Android Studio.

  • @lokeshmahant1061
    @lokeshmahant10614 жыл бұрын

    Your tutorial is awesome..... 😍

  • @sounsavdan7086
    @sounsavdan70863 жыл бұрын

    Good job man!! thanks

  • @omarahmad7634
    @omarahmad76344 жыл бұрын

    thank u man ,that is amazing

  • @abhisekgoutam787
    @abhisekgoutam7874 жыл бұрын

    So organising way of teaching 👌

  • @simonnice9030
    @simonnice90304 жыл бұрын

    You're right up there with Traversy and AcadeMind in quality of tutoring my friend, be proud :).

  • @ademineshat

    @ademineshat

    4 жыл бұрын

    I think Traversy and Academind move things very quickly and they don't wanna explain like Ninja does, it's like borring for them! NetNinja the best, I really mean it, been on KZread and Udemy for a while!

  • @oojamitsrivastava1008

    @oojamitsrivastava1008

    4 жыл бұрын

    @@ademineshat I feel the same way!

  • @MRCDF7

    @MRCDF7

    4 жыл бұрын

    @@ademineshat Academind is very good. But then he starts to talk very fast and I dont like to be always pausing and go back. Probably its for people with more experience in programming. But all they teach is very good. I have paused their flutter course for now and Im going to give net ninja a chance. For now it seems very good.

  • @ademineshat

    @ademineshat

    4 жыл бұрын

    @@MRCDF7 You are absolutely right! I've also paused the same course, bought the new JavaScript from Academind, but it's the same moving fast and not going step by step! Yes they are good but for advanced, like you said.

  • @PritamKarmakar
    @PritamKarmakar4 жыл бұрын

    Awesome !!!

  • @itzdevaraj
    @itzdevaraj4 жыл бұрын

    Awesome tutorial

  • @aunghtayoo337
    @aunghtayoo3373 жыл бұрын

    helpful!! thank you.

  • @212_sandhyak2
    @212_sandhyak22 жыл бұрын

    Great explanation

  • @harshchoksi8471
    @harshchoksi8471 Жыл бұрын

    Best Flutter Tutorial so far...

  • @NetNinja

    @NetNinja

    Жыл бұрын

    Thanks Harsh!

  • @Ashley-po3xu
    @Ashley-po3xu4 жыл бұрын

    The emulator was not adopting the new Font Family on pressing hot refresh (but was adopting other changes). I had to stop the emulator and start it again to make it use the new font family. Maybe this is required the first time a new font file is added?

  • @maherusman4134
    @maherusman4134 Жыл бұрын

    Super helpful video....thanks for this detailed video..really helped a lot...thanks

  • @NetNinja

    @NetNinja

    Жыл бұрын

    Thanks Maher, glad it was helpful! :)

  • @ShahrizanRajak
    @ShahrizanRajak Жыл бұрын

    thanks bro, on to the next videos

  • @muhammadrosyidi9028
    @muhammadrosyidi90284 жыл бұрын

    i love so much your accent.

  • @mohamedmaher6398
    @mohamedmaher63983 жыл бұрын

    very nice tutorial keep going for us

  • @clueless_experimenter
    @clueless_experimenter3 жыл бұрын

    huge help mate

  • @MrRynRules
    @MrRynRules4 жыл бұрын

    Thank You!

  • @mcardosodev
    @mcardosodev2 жыл бұрын

    Awsome 🖤

  • @monikasinghal3876
    @monikasinghal38763 жыл бұрын

    Good explained

  • @MrDuda
    @MrDuda4 жыл бұрын

    The directory name in which you save the fonts should be the same in pubspec. It is case sensitive too. I made the mistake so just wanted to say.

  • @kaleemullah6342
    @kaleemullah63424 ай бұрын

    Thank you sir ❤❤❤

  • @2chotti
    @2chotti9 ай бұрын

    fabulous

  • @DanaKurdi
    @DanaKurdi4 жыл бұрын

    Thank You .

  • @globalographerr3889
    @globalographerr3889 Жыл бұрын

    Amazing teaching.All the best.

  • @NetNinja

    @NetNinja

    Жыл бұрын

    Thanks a lot :) hope it was useful

  • @bandraman9199
    @bandraman91993 жыл бұрын

    Cool man

  • @crispusmicheal3784
    @crispusmicheal3784 Жыл бұрын

    Thanks a lot! mr ninja

  • @NetNinja

    @NetNinja

    Жыл бұрын

    No problem! :)

  • @MdAkter-ln4vv
    @MdAkter-ln4vv2 жыл бұрын

    Nice video

  • @jorgefrpfrancisco1675
    @jorgefrpfrancisco16754 жыл бұрын

    Hi, I really like your videos at the university, I am watching flutter, can you please tell me how I can move that "child text" so that it is located in the lower left of the screen, and another so that it is in the upper right?

  • @zaheemschemnad5377
    @zaheemschemnad53772 жыл бұрын

    Thankyou!

  • @muhamadsobari7386
    @muhamadsobari73864 жыл бұрын

    Thank You

  • @battleragecoc9411
    @battleragecoc94114 жыл бұрын

    The only part i hated was 8:22 Where you didn't explain how you arranged the lines.. i did it manually line by line.. got frustrated.. had to fix few line errors... till that everything was going fine.

  • @EthicalboarHD

    @EthicalboarHD

    4 жыл бұрын

    shift + tab to unindent the code and press tab to indent by one :)

  • @dtechtricks213

    @dtechtricks213

    3 жыл бұрын

    @@EthicalboarHD Thank you mr....

  • @letaciogalvao9908
    @letaciogalvao9908 Жыл бұрын

    Great

  • @Abhishekpatil-nk4qs
    @Abhishekpatil-nk4qs4 жыл бұрын

    help please : Error: unable to locate asset entry in pubspec.yaml: "fonts/ComicNeue-Regular.tff"

  • @inilonge2927
    @inilonge2927 Жыл бұрын

    Please can you do a new playlist for this flutter tutorial. A lot of things are outdated and I really love the way you teach. It's really good!

  • @alisheykhlar6930
    @alisheykhlar693011 ай бұрын

    perfect

  • @maherusman4134
    @maherusman4134 Жыл бұрын

    Btw I have one question that Is there any extension which you have installed to preview the colors while coding?

  • @woudjee2
    @woudjee23 жыл бұрын

    For me, the font bit didn't work, but I ended up making it work because I discovered I ought to use a \ instead of a / in the path: -So NOT: fonts/IndieFlower-Regular.ttf -But CORRECT is: fonts\IndieFlower-Regular.ttf I found out about this by right clicking the font in the font directory - Copy - Copy Path - option 2. Edit: my second mistake was that I wrote the family name in CAPITALS, this is not allowed. Edit 2: now I'm confused because I also got it working, exactly like in the tutorial. But hey if it works it works :p

  • @PythonicPath1

    @PythonicPath1

    3 жыл бұрын

    Hey mate, thanks alot for this comment, i had same issue and your solution worked !! :)

  • @mac3k282

    @mac3k282

    3 жыл бұрын

    just restart emulator, it will work.

  • @syedabdaalzahid2972

    @syedabdaalzahid2972

    3 жыл бұрын

    Tysm man

  • @s2productions242

    @s2productions242

    3 жыл бұрын

    Its been an hour seeing why the fuck wasnt that shit working thanks mate

  • @fluttermakers
    @fluttermakers Жыл бұрын

    good video i subscribed 👍😉

  • @NetNinja

    @NetNinja

    Жыл бұрын

    Awesome thank you!

  • @hassanhammad2040
    @hassanhammad20404 жыл бұрын

    Hi, first of all Thank you so much for such amazing tutorial. You have done a superb job and its helping a lot! I have a query: I am working on a Mac, so when u say press Ctrl+Q it doesnt work for me and for the life of me i havent been able to figure out which keys to use. Can u help me with that. Thanks again :)

  • @tushar2289

    @tushar2289

    4 жыл бұрын

    Press the F1 button.

  • @visheshkumarjain8293

    @visheshkumarjain8293

    4 жыл бұрын

    @@tushar2289 Doesn't work yet

  • @ryoishiguro7238

    @ryoishiguro7238

    4 жыл бұрын

    You can hover over it with your mouse

  • @prashantkhatri5383

    @prashantkhatri5383

    4 жыл бұрын

    It doesn't work here in windows either... Any suggestions please?

  • @hnahash1612

    @hnahash1612

    3 жыл бұрын

    Press "shift+Ctrl+i" it should work

  • @eff_gee321
    @eff_gee3213 жыл бұрын

    my university teacher told us "I can't stress this enough, flutter is about widgets." I see more and more that he's right

  • @isholaoluwatomisin1906

    @isholaoluwatomisin1906

    2 жыл бұрын

    They teach you flutter in your university????

  • @kritikaparihar1507
    @kritikaparihar15073 жыл бұрын

    thnkuuu so much

  • @DevangChhajed-bn9ux
    @DevangChhajed-bn9ux Жыл бұрын

    What plugin do you use to highlight the tree objects in code?

  • @Alphaswifty
    @Alphaswifty4 жыл бұрын

    how do i get crt Q to work. im so stressed out over this. it just shows some texts. is there some additional plugin i need to download?

  • @cro9364

    @cro9364

    3 жыл бұрын

    "Ctrl + Shift + i " should do you the trick

  • @faisalindrianto5868

    @faisalindrianto5868

    3 жыл бұрын

    @@cro9364 thanks man

  • @noelthomasbejoy3089

    @noelthomasbejoy3089

    3 жыл бұрын

    @Phuc Nguyen Hung click the mouse on Colors and then do ctrl+q

  • @thashreefpkl8478
    @thashreefpkl84782 жыл бұрын

    💌 from INDIA

  • @hamzausmani7287
    @hamzausmani72874 жыл бұрын

    Hey ninja your course is pretty amazing and easy to understand. I was just having problems importing fonts from google and putting it under font directory since i am using it on Vs code. Please can you tell me how we can do it in Vs code?

  • @Eslam-Sameh

    @Eslam-Sameh

    4 жыл бұрын

    Just do this in your file explorer

  • @russoahmed1700

    @russoahmed1700

    2 жыл бұрын

    @@Eslam-Sameh yup..thanks!..

  • @usr829
    @usr829 Жыл бұрын

    What shortcut key did you use to align the font property in pubspec.yaml file. You said zoom it back and zoom it forward . I could not understand. Pls explain

  • @harshalthachapully9453
    @harshalthachapully94534 жыл бұрын

    What is the shortcut alternative for ctrl+q for changing the strength of the colour on a mac?

  • @live4pool1

    @live4pool1

    4 жыл бұрын

    Harshal Thachapully Control + J

  • @Alphaswifty
    @Alphaswifty4 жыл бұрын

    i am using windows acer computer. I cant seem to see the accent colors when i select CTRL + Q. like some texts appears on the right..... package:flutter/src/material/colors.dart MaterialColor red Containing class: Colors Type: MaterialColor The red primary color and swatch. {@tool snippet} Icon( Icons.widgets, color: Colors.red[400], ) {@end-tool} See also: redAccent, the corresponding accent colors. deepOrange and pink, similar colors. Theme.of, which allows you to select colors from the current theme rather than hard-coding colors in your build methods

  • @yahya9889

    @yahya9889

    4 жыл бұрын

    same here, leme know if u solved it

  • @Alphaswifty

    @Alphaswifty

    4 жыл бұрын

    @@yahya9889 solved. Basically I reinstalled the program. Like I redid the entire installation process from the start. I think the issue is that the flutter SDK was not installed properly.

  • @yahya9889

    @yahya9889

    4 жыл бұрын

    @@Alphaswifty thanks broski

  • @myth1cdemonvods352
    @myth1cdemonvods3524 жыл бұрын

    for the fonts how did you move it back on windows

  • @aradhyasharma6483
    @aradhyasharma64833 жыл бұрын

    If somebody is having a problem applying a font, make sure that you don't have a hyphen '-' within your font name.

  • @toddherron4832
    @toddherron48324 жыл бұрын

    Here is a link to all the ANDROID STUDIO KEYBOARD SHORTCUTS (Mac & PC): developer.android.com/studio/intro/keyboard-shortcuts

  • @funandhobby782
    @funandhobby7823 жыл бұрын

    Hi,when I highlits fonts what should I click for changing it color to orang?control and windows...!!??

  • @user-ny2bp7wo7m
    @user-ny2bp7wo7m3 жыл бұрын

    What's the shortcut for color strength in Mac? ctr+q doesnt work for me.

  • @andyal868
    @andyal8683 жыл бұрын

    Control + J on Mac for colors

  • @michaelfu8841
    @michaelfu88413 ай бұрын

    At 8:29, What shortcut keys are used to indent the code block? thanks

  • @sarahmellouki1514
    @sarahmellouki15142 жыл бұрын

    I have a question. I made a mistake and entered "Color" instead of "Colors". What is the difference? (of course Color didn't do anything to the background, ba=ut what is it for? Is it also a widget ?)

  • @SSG_10
    @SSG_103 жыл бұрын

    By seeing this video can I learn to make apps I don't know any programming language

  • @maiii3742
    @maiii3742Ай бұрын

    hiii, for the floatingActionButton, i got the error that it must add onPressed, if not it wouldnt able to run the code. i do exactly as the video but it give me error must added (parameter onPressed must be provide)

  • @sandeshrai276
    @sandeshrai2764 жыл бұрын

    hey man how to align at once you did on font code. I didnot understand please can give me shortcut key.

  • @santanuroy2546
    @santanuroy25464 жыл бұрын

    how the floatingaction button comes bottom right corner by default ? thanks

  • @hasansha9719
    @hasansha97193 жыл бұрын

    font cannot be added where my location of projects and the font folder is differ can you solve my issue

  • @Muzica1155
    @Muzica11553 жыл бұрын

    cant change the font its Showing error like Hot Reload Error DevFS synchronization failed.

  • @prashantkhatri5383
    @prashantkhatri53834 жыл бұрын

    Error: unable to locate asset entry in pubspec.yaml: "fonts/Pacifico-Regular.ttf". im having an errror while giving command for font, i have followed exactly the way you have mentioned. anyone to rescue?

  • @germannajardelgado6774

    @germannajardelgado6774

    4 жыл бұрын

    Look if you have the fonts carpet in the main carpet (with the named that you gave It) or in the android [name that you gave it] It has to be in the main one to work I've spent the an hour figuring It out, hope this helps someone

  • @orthodoxmezmur9321

    @orthodoxmezmur9321

    4 жыл бұрын

    check your indentation this might help, Press tab to make it move right and shift + Tab to move it left

  • @ourvlogstosuccess7432
    @ourvlogstosuccess74322 жыл бұрын

    On Windows: Shift + Alt + Up/Down. On Mac: Shift + Option + Up/Down. On Ubuntu: Ctrl + Shift + Alt + Up/Down.

  • @JoolsParker
    @JoolsParker4 жыл бұрын

    Hey Ninge - that Control-Q trick to get the list of colour variations up doesn't work on a Mac - is it a plugin that we might need to install? Or is there a different keyboard shortcut for it on a Mac?

  • @kaka97100

    @kaka97100

    4 жыл бұрын

    Same problem here

  • @JoolsParker

    @JoolsParker

    4 жыл бұрын

    MobileGlory I found the Mac solution - it’s F1

  • @liveyourlife4565

    @liveyourlife4565

    4 жыл бұрын

    i press F1 on my Macbook Air 2017, and it doesn't work, it just change my Laptop birghtness when i press it. do you have another solution? @JoolsParker

  • @liveyourlife4565

    @liveyourlife4565

    4 жыл бұрын

    Ahh i found it, you have to click fn + F1 to open it on Macbook Air 2017

  • @visheshkumarjain8293

    @visheshkumarjain8293

    4 жыл бұрын

    Doesn't work even in VS code