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
As an experienced native android developer, this is exactly what I'm looking for. This makes my journey in flutter dev effortless. Thanks man!
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!
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!!!!
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
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
so far the best flutter teacher on youtube outshines so many others, great work man
@NetNinja
3 жыл бұрын
Thanks! 😃
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 !
Excellent tutorial.....Started to loving Flutter only because of your tutorials.....Thank you for your efforts.
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.
Thank you! love your tutorials - simple, well explained, and to-the-point!
@NetNinja
Жыл бұрын
You're very welcome :) thanks for the kind words ZB!
Thank you soo much sir!! Your Lectures are helping me to understand how things works in flutter.
i love the way you explain, it's crystal clear for me
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
And that's because this is a button and buttons are there to be pressed - Shaun Pelling (The Net Ninja)
@kameshparashar
3 жыл бұрын
So press the subscribe button!!
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
10 ай бұрын
That's great to hear :) thanks
Incredible set of tutorials - so well explained and logically laid out!
@NetNinja
2 ай бұрын
Thanks, that means a lot :)
Great teaching style, so easy to understand!
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.... :)
Nice work and great effort
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
I can't tell you how much I appreciate this...
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
3 жыл бұрын
restarting what like in the run console kinda thing
@ioana-ut8rz
3 жыл бұрын
I don#t really understand how exactly should be the indentations
@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
2 жыл бұрын
this helped man!
@alimurtazaharoon1072
9 ай бұрын
Restarting the emulator worked for me. Thanks man
Gracias Mister Ninja, muy didactico y muy bien explicado
So good tutorial, Thanks for all the effort
Very easy way of teaching, Thank you so much...
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
2 жыл бұрын
Thanks!
75k views and 1k likes, man you deserve more, Awesome video!
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
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
4 жыл бұрын
@@battleragecoc9411 I was wondering the same thing, thank u so much.
@ghassanalkaraan
4 жыл бұрын
@@battleragecoc9411 Thanks
@nikjavor
4 жыл бұрын
My life too
@minizealex3339
4 жыл бұрын
@@battleragecoc9411 thanks maaaaan :D I was wondering 3
This tutorial is just perfect
Hello from Turkey! Thenks for tutorials.
It was awesome like no one could make it before 👍👍👌
VERY HELPFUL TUTORIAL !! GOD BLESS YOU
Great job. Thanks from Mexico.
Awesome! Thanks!
Creating layouts programmatically is quite a change from the visual method of creating layouts for native apps in Android Studio.
Your tutorial is awesome..... 😍
Good job man!! thanks
thank u man ,that is amazing
So organising way of teaching 👌
You're right up there with Traversy and AcadeMind in quality of tutoring my friend, be proud :).
@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
4 жыл бұрын
@@ademineshat I feel the same way!
@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
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.
Awesome !!!
Awesome tutorial
helpful!! thank you.
Great explanation
Best Flutter Tutorial so far...
@NetNinja
Жыл бұрын
Thanks Harsh!
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?
Super helpful video....thanks for this detailed video..really helped a lot...thanks
@NetNinja
Жыл бұрын
Thanks Maher, glad it was helpful! :)
thanks bro, on to the next videos
i love so much your accent.
very nice tutorial keep going for us
huge help mate
Thank You!
Awsome 🖤
Good explained
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.
Thank you sir ❤❤❤
fabulous
Thank You .
Amazing teaching.All the best.
@NetNinja
Жыл бұрын
Thanks a lot :) hope it was useful
Cool man
Thanks a lot! mr ninja
@NetNinja
Жыл бұрын
No problem! :)
Nice video
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?
Thankyou!
Thank You
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
4 жыл бұрын
shift + tab to unindent the code and press tab to indent by one :)
@dtechtricks213
3 жыл бұрын
@@EthicalboarHD Thank you mr....
Great
help please : Error: unable to locate asset entry in pubspec.yaml: "fonts/ComicNeue-Regular.tff"
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!
perfect
Btw I have one question that Is there any extension which you have installed to preview the colors while coding?
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
3 жыл бұрын
Hey mate, thanks alot for this comment, i had same issue and your solution worked !! :)
@mac3k282
3 жыл бұрын
just restart emulator, it will work.
@syedabdaalzahid2972
3 жыл бұрын
Tysm man
@s2productions242
3 жыл бұрын
Its been an hour seeing why the fuck wasnt that shit working thanks mate
good video i subscribed 👍😉
@NetNinja
Жыл бұрын
Awesome thank you!
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
4 жыл бұрын
Press the F1 button.
@visheshkumarjain8293
4 жыл бұрын
@@tushar2289 Doesn't work yet
@ryoishiguro7238
4 жыл бұрын
You can hover over it with your mouse
@prashantkhatri5383
4 жыл бұрын
It doesn't work here in windows either... Any suggestions please?
@hnahash1612
3 жыл бұрын
Press "shift+Ctrl+i" it should work
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
2 жыл бұрын
They teach you flutter in your university????
thnkuuu so much
What plugin do you use to highlight the tree objects in code?
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
3 жыл бұрын
"Ctrl + Shift + i " should do you the trick
@faisalindrianto5868
3 жыл бұрын
@@cro9364 thanks man
@noelthomasbejoy3089
3 жыл бұрын
@Phuc Nguyen Hung click the mouse on Colors and then do ctrl+q
💌 from INDIA
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
4 жыл бұрын
Just do this in your file explorer
@russoahmed1700
2 жыл бұрын
@@Eslam-Sameh yup..thanks!..
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
What is the shortcut alternative for ctrl+q for changing the strength of the colour on a mac?
@live4pool1
4 жыл бұрын
Harshal Thachapully Control + J
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
4 жыл бұрын
same here, leme know if u solved it
@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
4 жыл бұрын
@@Alphaswifty thanks broski
for the fonts how did you move it back on windows
If somebody is having a problem applying a font, make sure that you don't have a hyphen '-' within your font name.
Here is a link to all the ANDROID STUDIO KEYBOARD SHORTCUTS (Mac & PC): developer.android.com/studio/intro/keyboard-shortcuts
Hi,when I highlits fonts what should I click for changing it color to orang?control and windows...!!??
What's the shortcut for color strength in Mac? ctr+q doesnt work for me.
Control + J on Mac for colors
At 8:29, What shortcut keys are used to indent the code block? thanks
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 ?)
By seeing this video can I learn to make apps I don't know any programming language
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)
hey man how to align at once you did on font code. I didnot understand please can give me shortcut key.
how the floatingaction button comes bottom right corner by default ? thanks
font cannot be added where my location of projects and the font folder is differ can you solve my issue
cant change the font its Showing error like Hot Reload Error DevFS synchronization failed.
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
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
4 жыл бұрын
check your indentation this might help, Press tab to make it move right and shift + Tab to move it left
On Windows: Shift + Alt + Up/Down. On Mac: Shift + Option + Up/Down. On Ubuntu: Ctrl + Shift + Alt + Up/Down.
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
4 жыл бұрын
Same problem here
@JoolsParker
4 жыл бұрын
MobileGlory I found the Mac solution - it’s F1
@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
4 жыл бұрын
Ahh i found it, you have to click fn + F1 to open it on Macbook Air 2017
@visheshkumarjain8293
4 жыл бұрын
Doesn't work even in VS code