Flutter Basics by a REAL Project

DO YOU HAVE ANY QUESTION ? JOIN THE COMMUNITY
🤝 Discord
☑️ / discord
📄You will easily learn the basics of Flutter by watching this tutorial. In this short video, we will implement one design together and we will use many basic Flutter widgets in the implementation, which will make you familiar with widgets and learn their use and prepare yourself for more important topics.
📁Source Code
🔗 github.com/mahdinazmi/Flutter...
⚡ SUBSCRIBE HERE⚡
🔗 cutt.ly/2XkZz0X
⏳ TIMESTAMPS :
00:00 Intro
00:19 Create Project
00:40 main Function
01:02 Run Application
01:14 Create Pages Folder
01:19 Create Home Page
01:26 Import Material Package
01:32 Material
01:39 Cupertino
01:47 Stateless Widget vs Stateful Widget
02:15 Create Home Page Class
02:38 const Keyword
03:02 Remove Debug Banner
03:14 build Method
03:25 Scaffold Widget
03:46 Appbar Widget
03:58 Add Font To Project
04:44 Text Widegt
05:04 Text Style
05:17 Change Appbar Background Color
05:24 Remove Appbar Shadow
05:34 SVG Package
05:58 Leading Widget in Appbar
06:05 Container Widget
06:35 Use SVG Package
07:11 Define Color With 0xff
07:26 Reduce SVG Icon Size
07:42 Actions Widget in Appbar
08:06 GestureDetectore Widget
08:16 Extract Method
08:28 Search TextField
09:16 Container Shadow
09:27 Color Opacity
09:36 TextField Border Decoration
09:50 contentPadding in TextField
09:58 prefixIcon Widget
10:28 suffixIcon Widget
10:35 Row Widget
11:22 VerticalDivider Widget
11:54 hinText in TextField
12:30 Body Background Color
12:42 Implementation Categories Section
12:53 Column Widget
13:16 Display Category Text
13:28 SizedBox Widget
13:38 CrossAxisAlignment in Column Widget
13:58 ListView.builder Widget
14:40 Create Model Class
16:08 Use Category Models
17:07 Create Category Items in ListView.builder
19:00 Implementation Recommendation For Diet Section
21:20 LinearGradient in Container Decoration
21:36 Create Space Between Widgets in Column
21:53 Using The Operator ?
22:31 Implementation Popular Section
🌐Social Media
🔗 Linkedin: / mahdinazmi
🔗 GitHub: github.com/mahdinazmi
🔗 Twitter: / flutterguys1
#flutter #fluttertutorial #flutterwidgets #fluttercourse #flutterinhindi #mobileappdevelopment #vscode #reactnative

[@flutterguys]

🌐 JOIN TO TELEGRAM COMMUNITY 🔗 t.me/flutterguysgp You can DOWNLOAD Design file from HERE : 🔗 www.pixeltrue.com/free-ui-kits/fitness-app-ui-kit

[@premiere_leugue_fantasy]

😢😢M

[@truszko91]

I'm a senior web dev diving into flutter for the first time. This 25min video got me up to speed SO FAST. Thank you for skipping all the fluff and unnecessary explanations. This is exactly my type of content. Cheers!!

[@babar-khan]

why not react native ??

[@tranminhtri9963]

@@babar-khanflutter is way faster

[@ivovicente9811]

This is gold, I was delaying starting an app ideia and now I feel It can be done. Also it was the first time I had to slowdown a video to keep up with it 🤣

[@cryptoboy1461]

This is the best intro to Flutter on KZbin. Great work!!

[@flutterguys]

Thank you!

[@100sdf9]

What theme are you using? @@flutterguys

[@flutterguys]

Dracula

[@clarifier88]

Omg, the best tutorial so far with great explanation. I was kinda lost with other tutorials out there but man...your's very smooth and easy to understand! Thank you!

[@flutterguys]

Glad to hear it!

[@shadyhumourtv2503]

Fine tutorial!!! Fine content. I stopped doing flutter for a while, this puts me back right on track.

[@mahfujulislam9107]

same here

[@ItsMe-vo1du]

I'm just starting learning flutter, I was lost by how many tutorials there's, but luckily, I find this, smooth, great teaching, and qyickly to the point, I wish you can make more videos like this ❤️

[@flutterguys]

Glad it helped!

[@palguypalguy]

@@flutterguys this should have part 2 🙏

[@vinit095]

I was lost after 8 minutes. Too much stuff is pushed in small videos.

[@charafhamidi7828]

thank you si mahdi a great tuto @@flutterguys

[@fabiano8888]

@@vinit095This video was really helpful for me. Just lower the speed to 0.75 and pause it as many times do you need. Don't give it up. It's definitely worth it. :)

[@semoneram1604]

as a beginner i should say this is one of the best videos for flutter to catch the things up, great work

[@theinfinox]

Literally made guve me a head start for flutter. I wasn't even interested to start, trying from years actually to get interested. This video literally is life saviour. ❤❤

[@ahmedaltaher]

Absolutely terrific tutorial, thank you a lot for the great effort 🤩

[@kartikeyjangir6003]

This tutorial is amazing, I loved it. It is gold for someone who news development and only want to walk through with flutter. I know React Js in depth and material UI, I can easily understand what he is trying to say.

[@MahenderKumar92700]

very informative and to the point tutorial. Thanks @FlutterGuys

[@TheFlozen]

best topic on Flutter ever for basic learner. Thank you

[@SuperShivammm]

Very professional way of using flutter power. Appreciate your talent and way of teaching in a short and sweet manner. Thanks again

[@flutterguys]

✌❤

[@minnac4045]

The most efficient tutorial I have ever watched! Thank you!

[@perpetualplus]

I so in love with this breakdown, it's understandable, in details. .. 😭😭, I finally understand some flutter basics, I love you 🥺

[@madhutvk]

This is the best explanation i have found in youtube on flutter, It would be great if you made more video of this type by increasing the complexity of projects and teaching new concepts of Flutter.

[@flutterguys]

I will try my best

[@MahabuburMahin]

hey whats your theme @@flutterguys

[@oracleking4252]

This is 25 mins of just raw concentrated power. For the rest of my carreer, I will always remember this crash course. It took me 48 hours to learn it

[@flutterIgnite]

beautiful and concise. The AI voice is almost perfect

[@syedshishir1098]

it was an absolutely good video to learn something about flutter in one shot! I just loved this tuto😍😍

[@cippogrande862]

this video is really good. I have subscribed and gave a like.

[@jayribagchi2182]

These are the videos every frontend engineer must see! Thankyou so much 🌟🌟

[@flutterguys]

Glad you think so!

[@moazelsawaf2000]

Great video, thank you so much ❤

[@remyajacob9793]

Hi, Thanks for the tutorial first. I'm a bit confused about the tutorial described at point 10:56. In the picture shown (Cross Axis Alignment & Main Axis Alignment), in the case of '.start' , some vacant space is provided on the left side of the container before showing the widgets, and same can be seen in the right side of the '.end' image. Is that really needed?

[@IdrisQadir]

I just started coding in flutter , but this video is the best video I found. Thanks a lot!

[@trappu]

Bro, THIS IS a crash course that I've wanted, I don't need to know what is a variable, what is a function, I just need to know how to build things in flutter and from there I catch on. I already have 5 years of programming so this video is awesome.

[@ajmalleonard]

This tutorial was just amazing. Straightly and understandable

[@i_am_dasturshik]

I am Junior Flutter Developer. You wrote very well, I learned a lot for myself, I enjoyed watching your 25 minute lesson.

[@flutterguys]

Glad to hear that!

[@thealtairian3238]

one of the best tutorials out there about flutter

[@nishitpatel5137]

OMG, what a great tutorial. plain and simple.

[@RamdanCode]

Hi there! 🚀 This tutorial is a gem! 🌟 Your step-by-step guidance through Flutter basics is incredibly clear and easy to follow. The real project implementation adds a practical touch that truly enhances the learning experience. 🤩 I appreciate the effort you put into breaking down the usage of various Flutter widgets-it's like a smooth ride into the world of Flutter. Your concise yet comprehensive approach makes it accessible for both beginners and those looking to reinforce their fundamentals. 🙌 The practical implementation alongside the explanation is a game-changer! Big kudos for emphasizing the importance of using English language in the comments. 🌐 Let's keep the communication global! 🌍 Thank you so much for sharing your knowledge and expertise. 🙏 Looking forward to more insightful tutorials from your channel! 🚀✨

[@flutterguys]

Thank you very much for your comment.. You gave us great energy. I hope we can be worthy of your beautiful comment.

[@fabiano8888]

A little too fast for me, so I lowered the video's speed to 0.75. This walk-though project helped me a lot! I've learned so many things watching this video in such short amount of time. Thank you so much!

[@wafaa6742]

as a flutter junior It's a great recap for me Thanks for your effort , keep it up👏

[@adelalahmed1722]

Best introduction to design implementation!

[@flutterguys]

You can download Figma file from here : freedesignresources.net/fitnest-fitness-app-ui-kit/

[@raihanrabbani386]

im glad youtube recommended this video to me

[@hbfl3x50]

fast paced and helpful 🔥❤

[@dominicdeepan]

OMG! That was some intense 25min flutter tutorial that I ever watched!

[@rr2r2r2ra]

Just finished the video. I love your teaching style, I hope you make another one about Riverpod with this style.

[@flutterguys]

Thanks! Will do!

[@QvsTheWorld]

Very good tutorial my only suggestion would be to add navigation to the a details page passing the the selected item in the list as a parameter. This would really round up the basics.

[@maximilianbarabas5438]

U are amazing!🎉❤

[@filipecotrimmelo7714]

I saw you have more videos like this, continue doing videos like this. For who is senior in other things it is a way easier to learn with a real project without unnecessary explanation. I going checkout other videos you did like this. Congratulations about the content.

[@Grinwa]

Awesome just what i needed 🎉

[@keylen_reynold]

This best flutter video i saw so far;

[@JoeGeoh]

Your channel is very underrated, you deserve more recognition and love! Thanks for the content.

[@flutterguys]

Glad you enjoy it!

[@Wolfgang93981]

Good! You do this very well! Make more of this! 👍👍👍👍👍👍

[@syedasadshah-go8ki]

It was hard but i did it, Thank bro !

[@raunakdey7]

Very good tutorial for those who wants an overview of flutter

[@ahmedyousif4782]

Thanks man, this was really helpful

[@SudhirSingh-bb6rj]

I appreciate your effort, please make more such videos

[@hakdogg9850]

Thanks for the tutorial. I have a question: how do you place a separate ontap function in the category section? Thanks in advance.

[@giandenorte]

I like this! Just subscribed mate 🥳

[@flutterguys]

Thanks for the sub!

[@fadelgueye3374]

One of the best efficient intro flutter's tutorial I've ever seen

[@flutterguys]

Glad to hear that!

[@DuQuels93]

The perfect video to start with flutter. You should say that extract to Method is less performantic that extract to Widget

[@humzaiqbal9908]

Thank you very much man, you are absolute legend

[@itsamotherflutter]

Very interested. Thanks for sharing! ❤

[@brunopacheco1625]

This tutorial is the best! Thank you very much for sharing your knowledge :D Greetings from Argentina❤

[@flutterguys]

Glad it was helpful!

[@vivekkumar-pc1xy]

your teaching method is absolutely amazing. Thanks for this amazing tutorial

[@flutterguys]

I'm glad you like it

[@arnabkundu8812]

THE BEST so far

[@blindender9979]

Unbeliavable good, ty❤

[@ahtar1610]

Excellent video!

[@impfect]

Fun tutorial thanks! 👌

[@imosesmwila]

Great video, your teaching style is impressive.

[@flutterguys]

I appreciate that!

[@Maestrotoy]

First i need exactly tutirial like this to start my journy🙏 thankyou sir... New subbed

[@rachitsingh4451]

bro taught me something in 25 min what i was planning to complete in month.

[@jackvessalius7913]

For those who encounter lagging when scrolling vertically/horizontally, it looks like on old phone like Oppo f9 is quite heavy to render those SVG files, great tutorial anyway!

[@1CheeseBurger]

This is beyond beneficial. Thanks a lot!

[@flutterguys]

Glad it was helpful!

[@mel-182]

Where have I been from the last hours! this could save me time!

[@ieatcrayons3322]

Ty man if i had something like this video when i first start My learning curve would be a lot faster😂

[@gur8551]

what extensions did you use to have an automatic wrap and library imports? i haven't found one in vscode

[@DearHenryA]

What computer generating voice program did you use for this video? I was impressed.

[@nix6030]

I just learn flutter last week.. thank you again :D

[@flutterguys]

That's great!

[@dexed2000]

Awesome and practical video. 🎉

[@flutterguys]

Glad you liked it!

[@shalomsims4280]

The "idk why it does that but here's how you fix it" at 7:40 is a perfect explanation of my first experiences using it haha

[@missyplays6117]

thank you so much! im in college i got a job as junior dev recently this helped me so muchhhh 💗💗💗💗💗💗!!

[@flutterguys]

Glad I could help!

[@fairphoneuser9009]

That's most probably the first video ever I've watched at a speed of 0.75... 😁 But it's definitely absolutely great! 🙂

[@JBtronic]

The way you teach is Amazing 😍

[@flutterguys]

Glad you think so!

[@greatIdea_pays]

I love you allot bro. I'm impressed

[@eliuddyn]

This is amazing 🔥🔥

[@sheikhnahid0734]

it tooks 2 weeks for successfully learning every part. Thank you very much bro!

[@flutterguys]

Glad to hear that!

[@sheikhnahid0734]

@@flutterguys welcome

[@juanosorio3172]

Good job with the video, is exactly What I was lookig for, just 1 question what software do you use for mockup. Thank you for your time

[@flutterguys]

I don't use mockup, I use Android Studio screen recorder.

[@connordiddycodes]

He was using Figma

[@GGSolved]

i see the fireship inspiration, very nice

[@jannehaverinen4576]

Nice. Coming here from C++/Python.

[@yusufmuhammad9866]

Awesome, I like your teaching style, can you make another video like this with go router?

[@flutterguys]

Yes I will

[@sumit_soni]

Bro this was superbb👌🏻👌🏻 I haven't seen a tutorial like this 💯💯 Thanks a lot ❤

[@flutterguys]

My pleasure 😊

[@syedmunafahmed04]

Helpful ❤🎉

[@MrBoost138]

i am junior flutter developer, but i understand and i can this all .

[@ibrahimugur8090]

Hello, first of all, thank you for the video. Could you please make a video for the other pages of the application in the video?

[@swargaraj]

Thank You Very Much!

[@flutterguys]

You're welcome!

[@user-es4xw9im7x]

This is the best content for getting started with Flutter,...very helpful. It would be great if you made more video of this type by increasing the complexity of projects and teaching new concepts of Flutter. Loved your video..❣❣

[@flutterguys]

I will try my best

[@palguypalguy]

@@flutterguys we are waiting...

[@chill_music_playlist_419]

i have a question, how can you change value of boxSelected property when you do nothing in ontap function?

[@shadow_was_here]

Great content

[@user-br5yx4qg3k]

07:30 thanks man sometimes i dont know how these widget works also ..iam beginner and i was stresses good to know good developers also get confused sometimes.

[@zongxun7118]

thank you. this was great.

[@flutterguys]

Glad you enjoyed it!

[@gurbanacylow6677]

Fast and easily learn 👍🏻

[@BeeasyOfficial]

thanks brother

[@HamzanSchool]

can you create a video about core concept that we must to know about dart before we start with flutter itself?

[@englishjourneywithyou]

nice

[@simardeepsinghmudhar7065]

Great Tutorial, to the point and no bs

[@gowthamch]

GOAT tutorial