Flutter Basics by a REAL Project
ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- 🌐 JOIN TO TELEGRAM COMMUNITY
🔗 t.me/flutterguysgp
📄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 - วิทยาศาสตร์และเทคโนโลยี
🌐 JOIN TO TELEGRAM COMMUNITY
🔗 t.me/flutterguysgp
You can DOWNLOAD Design file from HERE :
🔗 www.pixeltrue.com/free-ui-kits/fitness-app-ui-kit
😢😢M
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!!
why not react native ??
@@babar-khanflutter is way faster
This is the best intro to Flutter on TH-cam. Great work!!
Thank you!
What theme are you using?
@@flutterguys
Dracula
Absolutely terrific tutorial, thank you a lot for the great effort 🤩
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!
Glad to hear it!
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 🤣
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 ❤️
Glad it helped!
@@flutterguys this should have part 2 🙏
I was lost after 8 minutes. Too much stuff is pushed in small videos.
thank you si mahdi a great tuto @@flutterguys
@@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. :)
very informative and to the point tutorial. Thanks @FlutterGuys
as a beginner i should say this is one of the best videos for flutter to catch the things up, great work
Fine tutorial!!! Fine content. I stopped doing flutter for a while, this puts me back right on track.
same here
Very professional way of using flutter power. Appreciate your talent and way of teaching in a short and sweet manner. Thanks again
✌❤
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. ❤❤
The most efficient tutorial I have ever watched! Thank you!
best topic on Flutter ever for basic learner. Thank you
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.
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.
I will try my best
hey whats your theme
@@flutterguys
Great video, thank you so much ❤
it was an absolutely good video to learn something about flutter in one shot! I just loved this tuto😍😍
Best introduction to design implementation!
I so in love with this breakdown, it's understandable, in details. .. 😭😭, I finally understand some flutter basics, I love you 🥺
this video is really good. I have subscribed and gave a like.
This tutorial was just amazing. Straightly and understandable
First i need exactly tutirial like this to start my journy🙏 thankyou sir... New subbed
OMG, what a great tutorial. plain and simple.
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! 🚀✨
Thank you very much for your comment.. You gave us great energy. I hope we can be worthy of your beautiful comment.
beautiful and concise. The AI voice is almost perfect
one of the best tutorials out there about flutter
fast paced and helpful 🔥❤
These are the videos every frontend engineer must see! Thankyou so much 🌟🌟
Glad you think so!
U are amazing!🎉❤
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
Your channel is very underrated, you deserve more recognition and love! Thanks for the content.
Glad you enjoy it!
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.
Just finished the video. I love your teaching style, I hope you make another one about Riverpod with this style.
Thanks! Will do!
as a flutter junior It's a great recap for me
Thanks for your effort , keep it up👏
Very interested. Thanks for sharing! ❤
Awesome just what i needed 🎉
Where have I been from the last hours! this could save me time!
im glad youtube recommended this video to me
I appreciate your effort, please make more such videos
Very good tutorial for those who wants an overview of flutter
Excellent video!
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!
Fun tutorial thanks! 👌
One of the best efficient intro flutter's tutorial I've ever seen
Glad to hear that!
Thank you very much man, you are absolute legend
Unbeliavable good, ty❤
I just learn flutter last week.. thank you again :D
That's great!
THE BEST so far
OMG! That was some intense 25min flutter tutorial that I ever watched!
Great video, your teaching style is impressive.
I appreciate that!
The way you teach is Amazing 😍
Glad you think so!
I like this! Just subscribed mate 🥳
Thanks for the sub!
The perfect video to start with flutter. You should say that extract to Method is less performantic that extract to Widget
This is beyond beneficial. Thanks a lot!
Glad it was helpful!
Helpful ❤🎉
This tutorial is the best! Thank you very much for sharing your knowledge :D
Greetings from Argentina❤
Glad it was helpful!
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!
This is amazing 🔥🔥
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?
Ty man if i had something like this video when i first start
My learning curve would be a lot faster😂
bro taught me something in 25 min what i was planning to complete in month.
If you pause the video and independently implement all the concepts explained, you will gain a significant amount of knowledge.
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..❣❣
I will try my best
@@flutterguys we are waiting...
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
Please bring more videos like this one 🙂
what a great tutorial. plain and simple. i never thought i will find this best turorial
Awesome, I like your teaching style, can you make another video like this with go router?
Yes I will
That's most probably the first video ever I've watched at a speed of 0.75... 😁
But it's definitely absolutely great! 🙂
I love you allot bro. I'm impressed
Bro this was superbb👌🏻👌🏻
I haven't seen a tutorial like this 💯💯
Thanks a lot ❤
My pleasure 😊
thanks brother
i see the fireship inspiration, very nice
it tooks 2 weeks for successfully learning every part. Thank you very much bro!
Glad to hear that!
@@flutterguys welcome
Nice. Coming here from C++/Python.
nice
Great content, thank you so much!
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.
Thanks Brother. more power to your channel
Thank you too
Awesome and practical video.
🎉
Glad you liked it!
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?
Thank You Very Much!
You're welcome!
thank you so much! im in college i got a job as junior dev recently this helped me so muchhhh 💗💗💗💗💗💗!!
Glad I could help!
GOAT tutorial
Great Tutorial, to the point and no bs
thank you. this was great.
Glad you enjoyed it!
very nicely explained!
Glad it was helpful!
everything was going great than i lost you at 20:40
speed run tutorial, like it so much!
Glad you like it!
amazing......
😘
Great Video🎉🎉
Glad you enjoyed
this video is fire
Thank you, for your video.
I didn't know about the IntrinsicHeight, after watching your video i've solved the issue on my project.
What computer generating voice program did you use for this video? I was impressed.
Thanks for the tutorial. I have a question: how do you place a separate ontap function in the category section? Thanks in advance.
Great one. Thank you!
Can we have in-depth tutorial about BloC pattern with practical example?
Yes, soon
You can download Figma file from here :
freedesignresources.net/fitnest-fitness-app-ui-kit/
Excellent tutorial
It's useful to put the playback speed on ×0.75 when watching this video if English is not your native language 😊
amazing