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/iam...
Android Studio - developer.andr...
Git - git-scm.com/do...
Flutter Installation - flutter.dev/do...
🐱‍💻 🐱‍💻 Other Related Courses:
+ Modern JavaScript Tutorial - www.udemy.com/...

[@amirmb_]

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]

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!

[@etekumoses3320]

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]

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

[@NetNinja]

Thanks! 😃

[@govindkrishnalb]

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]

restarting what like in the run console kinda thing

[@ioana-ut8rz]

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

[@crookshanksacademy]

@@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]

this helped man!

[@ali_murtaxa]

Restarting the emulator worked for me. Thanks man

[@zhongzhengge5296]

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]

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

[@gamegunner9079]

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

[@kameshparashar]

So press the subscribe button!!

[@TygruletZ]

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]

Thanks!

[@bimalinc6230]

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

[@eved]

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]

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]

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

[@ghassanalkaraan]

@@battleragecoc9411 Thanks

[@nikjavor]

My life too

[@minizealex3339]

@@battleragecoc9411 thanks maaaaan :D I was wondering 3

[@sameerk12982]

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

[@angelicamanjarres3179]

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]

That's great to hear :) thanks

[@arunavkhare2733]

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 !

[@zb2747]

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

[@NetNinja]

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

[@udaynj]

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

[@NetNinja]

Thanks, that means a lot :)

[@battleragecoc9411]

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]

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

[@dtechtricks213]

@@EthicalboarHD Thank you mr....

[@Ashley-po3xu]

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?

[@patrick-zb6fx]

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

[@raymondjones6273]

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

[@Casio-e4p]

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

[@MrDuda]

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.

[@simonnice9030]

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

[@ademineshat]

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 KZbin and Udemy for a while!

[@oojamitsrivastava1008]

@@ademineshat I feel the same way!

[@MRCDF7]

@@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]

@@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.

[@hououinkyouma5372]

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

[@amisheth5740]

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

[@harshchoksi8471]

Best Flutter Tutorial so far...

[@NetNinja]

Thanks Harsh!

[@brijpatel237]

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

[@AhmedSalah-yd6we]

Nice work and great effort

[@netstatgrep]

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

[@FlexitoolGuides]

Great teaching style, so easy to understand!

[@Abhishekpatil-nk4qs]

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

[@eff_gee321]

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]

They teach you flutter in your university????

[@salomastation6004]

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

[@josbexerr5166]

Gracias Mister Ninja, muy didactico y muy bien explicado

[@woudjee2]

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]

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

[@mac3k282]

just restart emulator, it will work.

[@syedabdaalzahid2972]

Tysm man

[@s2productions242]

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

[@adforknowledge6582]

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.... :)

[@mohamadnateqi5456]

So good tutorial, Thanks for all the effort

[@Alphaswifty]

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]

same here, leme know if u solved it

[@Alphaswifty]

@@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]

@@Alphaswifty thanks broski

[@bryxjp]

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

[@robertopena3346]

Great job. Thanks from Mexico.

[@Alphaswifty]

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]

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

[@faisalindrianto5868]

@@cro9364 thanks man

[@noelthomasbejoy3089]

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

[@john.doe.2024]

Hello from Turkey! Thenks for tutorials.

[@toddherron4832]

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

[@user-vw5si9oe5v]

This tutorial is just perfect

[@67Azhaar]

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

[@smilingreshmi]

VERY HELPFUL TUTORIAL !! GOD BLESS YOU

[@muhammadrosyidi9028]

i love so much your accent.

[@globalographerr3889]

Amazing teaching.All the best.

[@NetNinja]

Thanks a lot :) hope it was useful

[@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!

[@abhisekgoutam787]

So organising way of teaching 👌

[@maherusman4134]

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

[@NetNinja]

Thanks Maher, glad it was helpful! :)

[@thashreefpkl8478]

💌 from INDIA

[@lokeshmahant1061]

Your tutorial is awesome..... 😍

[@prashantkhatri5383]

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]

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]

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

[@hassanhammad2040]

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]

Press the F1 button.

[@visheshkumarjain8293]

@@tushar2289 Doesn't work yet

[@ryoishiguro7238]

You can hover over it with your mouse

[@prashantkhatri5383]

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

[@hnahash1612]

Press "shift+Ctrl+i" it should work

[@h.iq.97]

when I press ctrl+Q nothing happens

[@victorshin5414]

Press Crtl+Space. It depends on the keyboard bindings.

[@ShahrizanRajak]

thanks bro, on to the next videos

[@ourvlogstosuccess7432]

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

[@212_sandhyak2]

Great explanation

[@oussamafortas]

Font Family didn't work for me ~!

[@hareethasrini41]

Check the alignment

[@Muzica1155]

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

[@mohamedmaher6398]

very nice tutorial keep going for us

[@kaleemullah6342]

Thank you sir ❤❤❤

[@sounsavdan7086]

Good job man!! thanks

[@monikasinghal3876]

Good explained

[@itzdevaraj]

Awesome tutorial

[@harshalthachapully9453]

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

[@live4pool1]

Harshal Thachapully Control + J

[@andyal868]

Control + J on Mac for colors

[@2chotti]

fabulous

[@JagSan.]

Awesome! Thanks!

[@omarahmad7634]

thank u man ,that is amazing

[@alaa.hassan]

changing font family not working for me

[@crispusmicheal3784]

Thanks a lot! mr ninja

[@NetNinja]

No problem! :)

[@aunghtayoo337]

helpful!! thank you.

[@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)

[@michaelfu8841]

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

[@StephenBeale]

At 3:08 Anyone else getting errors trying to add an accent on the color in floatingActionButton point here? I have to remove the accent or else it errors.

[@clueless_experimenter]

huge help mate

[@Tiamate01]

Hi, your video is really good, but I am using a Mac and don't know how to see the properties of the code with control + q (neither being able to see the color thing)... please, if anyone knows how to solve this problem...

[@tushar2289]

Press the F1 button.

[@maximestonz6928]

I have problems with the font change, I've redone 6 times the whole maneuver and I can't change it in my app. What could be the problem? (No error code)

[@alianwar1]

Same here do not know why

[@patrickwilliams7441]

Have you indented correctly?

[@alianwar1]

@@patrickwilliams7441 yeah

[@Deepak-mn9lf]

terminate the program (click on the red square (top right)) and again run the program. Sometimes it cannot overwrite the old installation file. It will work.

[@kryptontrolls8286]

@@Deepak-mn9lf Thanks mate. I was doing this indenting stuff for like 30 mins lmao..Terminating the program really helped..Thanks again

[@MrRynRules]

Thank You!

[@massimofedrigo5426]

If new font does not appear in the simulator, restart it. (This could happen on iOS simulator)

[@jorgefrpfrancisco1675]

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?

[@DanaKurdi]

Thank You .

[@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

[@sarahmellouki1514]

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 ?)

[@-kurdush]

what do you mean by zoom it back.....i mean what's the command or shortcut

[@zaheemschemnad5377]

Thankyou!

[@eatitall9994]

8:21 how to move the line? i did it shift+alt and what else press button?

[@battleragecoc9411]

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

[@eatitall9994]

Battle Rage COC wow thank you so much buddy!!!!! Happy New Years!

[@battleragecoc9411]

@@eatitall9994 Happy new year n Happy coding buddy

[@toddherron4832]

developer.android.com/studio/intro/keyboard-shortcuts

[@muhamadsobari7386]

Thank You

[@funandhobby782]

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

[@aliansab4712]

I am having an issue when defining colors shade. is there any update?

[@Elcom199.]

Ctrl + K + C - Comenta todo el código seleccionado. Ctrl + K + U - Descomenta todo el código seleccionado.

[@ferreira6682]

To comment and uncomment you have to type Ctrl + /

[@12noooooon]

what should I press on MacOs to see the colors palette insted of control + q on PC' - THIS IN NOT WORK ON MAC

[@shadab1996]

F1

[@12noooooon]

@@shadab1996 f1 only?

[@shadab1996]

On Android Studio, click on File>Settings>Keymap and search for "Quick Documentation", the shortcut will be mentioned there and you will have the option to change it as well. @@12noooooon

[@derencewalk]

Control + j on a Mac

[@toddherron4832]

developer.android.com/studio/intro/keyboard-shortcuts

[@maherusman4134]

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

[@fahmidanial]

i don't get any "pubspec has been edited" what should i do?

[@santanuroy2546]

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

[@dennisbaumann2708]

I dont get it, @8:12 you say press control + forward slash? So i have to shift too? It wont get uncommented :/

[@dennisbaumann2708]

no one can help me? :

[@iremd3117]

@@dennisbaumann2708 you should use your numpad. ctrl+numpad/

[@toddherron4832]

developer.android.com/studio/intro/keyboard-shortcuts

[@gops6509]

no error is reported BUT the font doesnt change to 'indie flower'. i have checked the inundations and path, i dont undurstand what went wrong

[@alisheykhlar6930]

perfect