Flutter Layout Basics

  Рет қаралды 117,183

Fun with Flutter

Fun with Flutter

5 жыл бұрын

A quick video showcasing basic Flutter layouts and widgets. Simple Flutter layouts for beginners.
If you want to see what is possible with Flutter check out the FunWith website, made entirely in Flutter - funwith.app/
Flutter layout basics codelab:
flutter.dev/docs/codelabs/lay...

Пікірлер: 189
@nitin7218
@nitin7218 4 жыл бұрын
I shouldn't have seen those extra seconds, now I had to subscribe.
@belkebirnadjib9521
@belkebirnadjib9521 3 жыл бұрын
it is what it is ... we got trapped
@OriginLegend
@OriginLegend 3 жыл бұрын
This is seriously the best overview for anyone who has some familiarity with UI development and just needs to know what is available without hours of tutorials. Thank you so much for this!
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
Really glad it was helpful!
@harry356
@harry356 2 жыл бұрын
I could easily watch 30 minutes of this. Immediately clear, good use of the colored containers to show how these widgets work. I am a new subscriber!
@MsSplashIt
@MsSplashIt 5 жыл бұрын
Great tutorial. You explain it really good and visually. Plus you got a good voice 😂. Keep it up.
@FunwithFlutter
@FunwithFlutter 5 жыл бұрын
Thanks for leaving a comment! Appreciate it!
@RJ-sw7zv
@RJ-sw7zv 3 жыл бұрын
Sounds South African.
@tadaspetra
@tadaspetra 2 жыл бұрын
Thank you YT algorithm for recommending me this 2 years later. This video is fantastic!
@FunwithFlutter
@FunwithFlutter 2 жыл бұрын
😂 glad Tadas. I need to update it if you have any tips
@slaterlloyd4443
@slaterlloyd4443 2 жыл бұрын
This has to be one of the best early Flutter tutorials I've ever seen. Thank you!
@FunwithFlutter
@FunwithFlutter 2 жыл бұрын
You’re welcome ☺️
@prabinlamsal5125
@prabinlamsal5125 Жыл бұрын
I seriously appreciate this video very much. Please make a more detailed and complete video of this type. People would really love that.
@Fybuh
@Fybuh 4 жыл бұрын
OMG BRO!!!!! This is really Super Duper Califagalistically Helpful. I learnt more than i did watching 5 tutorial videos in just this one 4minutes video!!!
@ndrslmpk2634
@ndrslmpk2634 Жыл бұрын
This is awesome and what I was long time looking for to get a ground understanding of how to layout mobile apps with flutter! Looking forward to see more of such videos!
@AshrafAlharbi
@AshrafAlharbi 4 жыл бұрын
The best basic flutter tutorial i ever seen
@its_zehri
@its_zehri 2 жыл бұрын
One hour lesson in just Four minutes.. appriciate❤❤
@ayrtons1572
@ayrtons1572 4 жыл бұрын
most straight forward/ formative flutter tutorials!
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Glad you like them!
@Rainbowsaur
@Rainbowsaur 4 жыл бұрын
Cheers for the visuals provided, quick and just what I needed to get my head around it.
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Great!
@CraigRatliff
@CraigRatliff 4 жыл бұрын
This was excellently done. Thank you for sharing.
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Thanks for the comment!
@UnpossiblePOG
@UnpossiblePOG 3 жыл бұрын
The biggest problem App developer face is how to design properly. This is what I am looking for. Subscribed
@astayandablinkisastink9980
@astayandablinkisastink9980 2 жыл бұрын
I love how short and concise this is
@FunwithFlutter
@FunwithFlutter 2 жыл бұрын
Thanks
@vexjack
@vexjack 2 жыл бұрын
new to flutter... and this is exactly what I'm looking for. THANK YOU!
@FunwithFlutter
@FunwithFlutter 2 жыл бұрын
Glad it helped
@muhammadmusharaf4705
@muhammadmusharaf4705 4 жыл бұрын
Thank You, You really value the time.
@mrprogrammer9859
@mrprogrammer9859 3 жыл бұрын
dam man i went through 100 videos and u the only one give me everything
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
Sick
@dalanxd
@dalanxd Жыл бұрын
Amazing!!! Thank you so much for the overview, it was exactly what I was looking for
@xX12VincEXx
@xX12VincEXx Жыл бұрын
Thanks a lot! This was what I need and even better. quick and dirty
@remo077
@remo077 2 жыл бұрын
That was very crisp and clear.. Subscribed.
@developerzull
@developerzull Жыл бұрын
Thank you so much! You are a good teacher. 😊
@gmtborges
@gmtborges 2 жыл бұрын
Great explanation! Direct to the point. Subscribed
@brokenumbrellagames
@brokenumbrellagames 5 жыл бұрын
Just discovered your channel. Keep up the good work buddy. Loving the vids so far!
@FunwithFlutter
@FunwithFlutter 5 жыл бұрын
Thanks man! Appreciate it!
@hansdayo
@hansdayo 9 ай бұрын
your 4 min video explain better than 1-hour long presentation from my classmates
@y1798
@y1798 3 жыл бұрын
This was really helpful! Thank you so much
@tunzzi
@tunzzi 2 жыл бұрын
your funny indirect way asking to subscribe, has led me to subscribe :)
@FunwithFlutter
@FunwithFlutter 2 жыл бұрын
Nice haha
@MustaphaALILI
@MustaphaALILI 5 жыл бұрын
Thank you for this great tutorial
@abasilis
@abasilis Жыл бұрын
Very good for beginners, thanks!
@noobyxviii
@noobyxviii 2 жыл бұрын
These videos are fun to watch
@tir3dnow792
@tir3dnow792 4 жыл бұрын
This was an amazing tutorial. Thank you so much.
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Super glad to hear that! I 'll definitely be making more of these "? minutes" videos.
@tir3dnow792
@tir3dnow792 4 жыл бұрын
@@FunwithFlutter These are excellent for someone like me who loves speedy tutorials. I've subscribed and will definitely be waiting for more videos. I wish you the best of luck.
@shlokjain4618
@shlokjain4618 4 жыл бұрын
Grear video! Loved the way you explain stuff! Would love if you could make one about StateManagement!
@leparain8
@leparain8 3 жыл бұрын
Mate you are a life saver thank you
@YuriG03042
@YuriG03042 3 жыл бұрын
Amazing video, well edited and well explained. Deserved sub given.
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
Welcome!
@Ken-td8gc
@Ken-td8gc 9 ай бұрын
Very helpful video for a beginner
@ilkercankaya3779
@ilkercankaya3779 3 жыл бұрын
this video is so enjoyable, nice job!
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
Thank you so much!
@vs_sa
@vs_sa 2 жыл бұрын
very nice! Thanks.
@henrypilotatwork9696
@henrypilotatwork9696 4 жыл бұрын
very good explanation and illustration!
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Thanks, appreciate it
@erishsounderlatorre286
@erishsounderlatorre286 2 жыл бұрын
i dont need that extra seconds to subscribe :), great explanation thanks!
@FunwithFlutter
@FunwithFlutter 2 жыл бұрын
Thanks for the sub!
@codingright
@codingright 4 жыл бұрын
Great Video. Thank you!
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
You are welcome!
@oguzhanerylmaz5989
@oguzhanerylmaz5989 Жыл бұрын
Short, basic and clear! Thanks for this perfect tutorial.
@FunwithFlutter
@FunwithFlutter Жыл бұрын
You're welcome!
@dhevendhiranm4138
@dhevendhiranm4138 2 жыл бұрын
Excellent
@sonamchoki5853
@sonamchoki5853 4 жыл бұрын
Thank you so much.
@anandpatel5347
@anandpatel5347 4 жыл бұрын
Perfect 👌 easy to understand
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Thanks!
@1995taunus
@1995taunus 4 жыл бұрын
Thank you!
@hardipgajera2316
@hardipgajera2316 Жыл бұрын
Perfect!
@ahteramkhattak2243
@ahteramkhattak2243 2 жыл бұрын
Nice job mate
@FunwithFlutter
@FunwithFlutter 2 жыл бұрын
Thanks 👍
@MrZawe
@MrZawe 4 жыл бұрын
more like this so easy to understand
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Will do for the future. Thinking of doing an animation one. Any other ideas will be appreciated.
@apnachannel1350
@apnachannel1350 Жыл бұрын
very helpful
@ariseinvesting8759
@ariseinvesting8759 3 жыл бұрын
Man cant thank you enough. 🙏🏽
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
You’re very welcome
@mohidden
@mohidden 4 жыл бұрын
a lot thanks for you bro
@CodeinVeins
@CodeinVeins 3 жыл бұрын
Good one
@darul-asar381
@darul-asar381 3 жыл бұрын
Cool 👍
@bpalaciosa
@bpalaciosa 4 жыл бұрын
Great tutorial
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Thanks :)
@midnight4348
@midnight4348 3 жыл бұрын
you are basically fireship io but for flutter.. I love your style.u just erned a subscriber
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
That's a great complement. Thanks!
@robertzxzx
@robertzxzx 2 жыл бұрын
Gooood job
@SunilKumarSenguttuvan
@SunilKumarSenguttuvan 4 жыл бұрын
Excellent !!
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Thank you! Cheers!
@SoftwareAndTechnology
@SoftwareAndTechnology 4 жыл бұрын
Good tutorial
@MafasDx
@MafasDx 4 жыл бұрын
That's Fantastic..!!
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Thank you! Cheers!
@sommie4935
@sommie4935 4 жыл бұрын
Subbed, great video, cheers!
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Thanks!
@abdelrahmanmustafaelmarakb1080
@abdelrahmanmustafaelmarakb1080 3 жыл бұрын
you make me want to code with your simplicity and music
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
That's a big complement. thank you
@fitzgerardmouliom443
@fitzgerardmouliom443 4 ай бұрын
Hello great video 👏 , please which visual code extension are you using for flutter 🙇??
@Phillpoke2
@Phillpoke2 2 жыл бұрын
what is the extension that indicates the tabulation with --?
@princepatel4864
@princepatel4864 4 жыл бұрын
Nice video
@quandominh1084
@quandominh1084 Жыл бұрын
Tks for a helpful video! Can I ask how can I get a line alignment like you please? Tks
@abhay81228
@abhay81228 3 жыл бұрын
Bro how do you get VSC to keep your indentation nested !! Mine starts all the way from beginning. Even though I've used format keyword.
@shivamtyagi7106
@shivamtyagi7106 3 жыл бұрын
can this man be any more gud!!! Awesome.
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
I wish!
@ramyokasha3092
@ramyokasha3092 4 жыл бұрын
thanks
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
You're welcome
@gilsonconceicao5201
@gilsonconceicao5201 Жыл бұрын
What is the name of this extension wich you open a menu and add /wrap widget or snippets?
@agoldfish9239
@agoldfish9239 4 жыл бұрын
What song did you use for the outro?
@masomahboob
@masomahboob 2 жыл бұрын
What's the name of the extension that creates L shaped lines?
@augischadiegils.5109
@augischadiegils.5109 2 жыл бұрын
♥️♥️♥️
@thefrenchguard6999
@thefrenchguard6999 2 жыл бұрын
Just downloaded Dart and Flutter. How do you get a live output? I havent programmed in like 15 years.
@jhonysou
@jhonysou 4 жыл бұрын
Hey ! What plugins are you using in VSCODE to show lines like tree and when you push right click open a menu ?
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Hey! Scroll down. Someone already asked this. 4 or 5 comments below :)
@jhonysou
@jhonysou 4 жыл бұрын
@@FunwithFlutter Yeah xD
@lasindunuwanga5292
@lasindunuwanga5292 3 жыл бұрын
Great
@florianm5556
@florianm5556 4 жыл бұрын
What's the plugin you use for "|" indentation ?
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Sorry for the late reply. Here is more detail - dartcode.org/releases/v3-1/#preview-flutter-ui-guides
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
I'm not sure if this is still in preview or not, I'm no longer using it. On a smaller screen it is a bit overwhelming.
@aniketsen5595
@aniketsen5595 3 жыл бұрын
🔥🔥🔥🔥🔥
@ekosantoso6755
@ekosantoso6755 4 жыл бұрын
I want to ask? how to provide a connecting line between the body and expanded? What is the name of the plugin? on visual code
@andrewpoole2245
@andrewpoole2245 3 жыл бұрын
This is a whole year later and you may have figured it out by now but for those who are still curious: In VS Code go to settings and search for Dart: Preview and locate Dart: Preview Flutter Ui Guides and check the box to enable the lines. You need to restart VS Code for it to be implemented.
@juten8
@juten8 Жыл бұрын
@@andrewpoole2245 another whole year later.. thank you! :)
@leandronorcio9642
@leandronorcio9642 4 жыл бұрын
Hello what a nice video of yours, as always. May I ask how to turn on those L-shaped lines in VSCode? Thanks bro.
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
My most asked question :) scroll down friend and you'll find what you are looking for
@Ryaninja
@Ryaninja 4 жыл бұрын
I don't have a wrap with column option showing in Android Studio or VSCode. I've asked reddit and stack exchange but had no answers. Anyone got any idea? I've had so many problems like this with flutter I'm just about ready to switch to a language with guides that can actually be followed.
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Can you see any of the other options, for example "Wrap with widget", "Wrap with Center". The shortcut on VS Code is ( ctrl .) that is ctrl and . Which should bring up the selection menu. Sometimes VS Code takes a while though.
@irjayjay
@irjayjay 19 сағат бұрын
I subscribed, but you're not publishing new videos. Your tutorials are great. Exactly the info anyone could need in a neat little package.
@thanusan
@thanusan 4 жыл бұрын
This is an excellent tutorial - thanks! Also you didn't take the opportunity to be clickbaity and title it "Flutter Layout Basics in 4 Minutes"
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Lol can't really take credit for that, my other videos in this series are title as "x Minutes". But having said that I should maybe remove that. Glad you like it though
@kamithpiumal4887
@kamithpiumal4887 2 жыл бұрын
Good
@Lucas7Martins
@Lucas7Martins 5 жыл бұрын
How do you turn on those lines that correspond to children? Like at 1:24 the ones going from container to center?
@FunwithFlutter
@FunwithFlutter 5 жыл бұрын
dartcode.org/releases/v3-2/
@kamrulahsan06
@kamrulahsan06 5 жыл бұрын
@@FunwithFlutter Thank you and great tutorial btw
@JoboyJordan
@JoboyJordan 4 жыл бұрын
What extension do you use to show the tree outline of the components? Can't find it when googling. :|
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Lol my most asked question on this video. Scroll down and you will find your answer. Note that that was a couple months ago. Back then it was still being tested and sometimes it bugged out. Think it's a lot more stable now. I stopped using it.
@LanNguyen-fz5jc
@LanNguyen-fz5jc 4 ай бұрын
❤❤❤❤❤
@kalderDean
@kalderDean 4 жыл бұрын
what plugin do you use for wrapping widgets?
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
It's available with the normal flutter/dart extensions on Visual Studio/ Android. VS Code you hit ctrl-. (control and dot) while the cursor is over the widget you want to wrap. There is also a light bulb that pops up (next to the widget) that you can click.
@RenaudDenis
@RenaudDenis 2 жыл бұрын
💕
@FunwithFlutter
@FunwithFlutter 2 жыл бұрын
💙
@harryxd
@harryxd 3 жыл бұрын
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
😊
@tanoryjakaperdana1419
@tanoryjakaperdana1419 3 жыл бұрын
Sir, are you the flash? 😂
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
lol
@UmairAhmadh
@UmairAhmadh 3 жыл бұрын
Wow Man... Wordless. Thanks
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
My pleasure!
@positivetech2049
@positivetech2049 3 жыл бұрын
Have we have drag widgets in flutter
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
Yes we do. "Draggable" widget
@mouradouddah5934
@mouradouddah5934 5 жыл бұрын
Goood
@belespritmkhatshwa3145
@belespritmkhatshwa3145 3 жыл бұрын
Clean and Clear. But more importantly - There's definitely more packed in there than I expected. Thumbs up. Also, you're from SA boet - the accent is too "Howzit" to ignore (Immediate like and Subscribe!)
@FunwithFlutter
@FunwithFlutter 3 жыл бұрын
Thanks man. Ek is ja!
@rajdave9862
@rajdave9862 5 жыл бұрын
Om namah shivay From where u are learning this all amazing widget and concepts of flutter
@FunwithFlutter
@FunwithFlutter 5 жыл бұрын
Practice, experimenting, videos, documentation. Anywhere I can :)
@endagegnehudansamo2620
@endagegnehudansamo2620 4 жыл бұрын
likeeeee
@laujimmy8635
@laujimmy8635 4 жыл бұрын
What about the Safe Area?
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
Good question. There are a ton of widgets that are not covered in this video, and more are always added. This video is only to demonstrate some simple layout widgets.
@jasontruter7239
@jasontruter7239 4 жыл бұрын
South African devs ftw!
@FunwithFlutter
@FunwithFlutter 4 жыл бұрын
We got Flutter covered!
@kotivideos7140
@kotivideos7140 5 жыл бұрын
cool pls do another videos for other widgets
Flare and Flutter Quick Start
3:12
Fun with Flutter
Рет қаралды 33 М.
Top 30 Flutter Tips and Tricks
6:50
Flutter Mapp
Рет қаралды 541 М.
A clash of kindness and indifference #shorts
00:17
Fabiosa Best Lifehacks
Рет қаралды 70 МЛН
Scary Teacher 3D Nick Troll Squid Game in Brush Teeth White or Black Challenge #shorts
00:47
3M❤️ #thankyou #shorts
00:16
ウエスP -Mr Uekusa- Wes-P
Рет қаралды 15 МЛН
Вечный ДВИГАТЕЛЬ!⚙️ #shorts
00:27
Гараж 54
Рет қаралды 14 МЛН
Flutter Basics by a REAL Project
25:42
Flutter Guys
Рет қаралды 421 М.
Unbounded height / width | Decoding Flutter
4:54
Flutter
Рет қаралды 135 М.
Flutter Layout Design Tutorial || Top 5 Widgets
21:04
CodeX
Рет қаралды 79 М.
LISTVIEW & BUILDER • Flutter Widget of the Day #04
9:06
Mitch Koko
Рет қаралды 130 М.
Beginning Flutter - Intermediate - Using Common Widgets
4:44
JediPixels
Рет қаралды 74 М.
Flutter Layouts for the CSS Developer
10:24
Fireship
Рет қаралды 70 М.
Implementing complex UI with Flutter - Marcin Szałek | Flutter Europe
44:26
Top 10 Widgets every Flutter Developer should know!
17:17
RetroPortal Studio
Рет қаралды 281 М.
Simulating the Evolution of Rock, Paper, Scissors
15:00
Primer
Рет қаралды 716 М.
Complex Animations in Flutter using Rive | Flare
15:44
FilledStacks
Рет қаралды 224 М.
A clash of kindness and indifference #shorts
00:17
Fabiosa Best Lifehacks
Рет қаралды 70 МЛН