Flutter Layout Basics

Подписаться 32 тыс.

Просмотров 120 тыс.

50% 1

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/do...

Опубликовано:

30 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 190

@nitin7218 4 года назад

I shouldn't have seen those extra seconds, now I had to subscribe.

@belkebirnadjib9521 3 года назад

it is what it is ... we got trapped

@MsSplashIt 5 лет назад

Great tutorial. You explain it really good and visually. Plus you got a good voice 😂. Keep it up.

@FunwithFlutter 5 лет назад

Thanks for leaving a comment! Appreciate it!

@RJ-sw7zv 4 года назад

Sounds South African.

@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 3 года назад

Really glad it was helpful!

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

@fitzgerardmouliom443 6 месяцев назад

Hello great video 👏 , please which visual code extension are you using for flutter 🙇??

@tunzzi 2 года назад

your funny indirect way asking to subscribe, has led me to subscribe :)

@FunwithFlutter 2 года назад

Nice haha

@tanoryjakaperdana1419 3 года назад

Sir, are you the flash? 😂

@FunwithFlutter 3 года назад

lol

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

@CraigRatliff 4 года назад

This was excellently done. Thank you for sharing.

@FunwithFlutter 4 года назад

Thanks for the comment!

@FunwithFlutter 4 года назад

Want to learn about animation: I've release a course. Take a look and get a discount for taking the time to read the comments :) fun-with-flutter.teachable.com/p/mastering-animation-in-flutter/?product_id=1679475&coupon_code=FUN Use the promo code: FUN for a discount.

@vs_sa 3 года назад

very nice! Thanks.

@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 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 2 года назад

@@andrewpoole2245 another whole year later.. thank you! :)

@erishsounderlatorre286 2 года назад

i dont need that extra seconds to subscribe :), great explanation thanks!

@FunwithFlutter 2 года назад

Thanks for the sub!

@UnpossiblePOG 3 года назад

The biggest problem App developer face is how to design properly. This is what I am looking for. Subscribed

@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 5 лет назад

dartcode.org/releases/v3-2/

@kamrulahsan06 5 лет назад

@@FunwithFlutter Thank you and great tutorial btw

@CodeinVeins 3 года назад

Good one

@darul-asar381 3 года назад

Cool 👍

@ayrtons1572 5 лет назад

most straight forward/ formative flutter tutorials!

@FunwithFlutter 5 лет назад

Glad you like them!

@vexjack 2 года назад

new to flutter... and this is exactly what I'm looking for. THANK YOU!

@FunwithFlutter 2 года назад

Glad it helped

@irjayjay 2 месяца назад

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

@florianm5556 4 года назад

What's the plugin you use for "|" indentation ?

@FunwithFlutter 4 года назад

Sorry for the late reply. Here is more detail - dartcode.org/releases/v3-1/#preview-flutter-ui-guides

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

@shivamtyagi7106 3 года назад

can this man be any more gud!!! Awesome.

@FunwithFlutter 3 года назад

I wish!

@slaterlloyd4443 2 года назад

This has to be one of the best early Flutter tutorials I've ever seen. Thank you!

@FunwithFlutter 2 года назад

You’re welcome ☺️

@tadaspetra 3 года назад

Thank you YT algorithm for recommending me this 2 years later. This video is fantastic!

@FunwithFlutter 3 года назад

😂 glad Tadas. I need to update it if you have any tips

@shlokjain4618 4 года назад

Grear video! Loved the way you explain stuff! Would love if you could make one about StateManagement!

@dhevendhiranm4138 3 года назад

Excellent

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

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

@its_zehri 2 года назад

One hour lesson in just Four minutes.. appriciate❤❤

@thefrenchguard6999 2 года назад

Just downloaded Dart and Flutter. How do you get a live output? I havent programmed in like 15 years.

@quandominh1084 Год назад

Tks for a helpful video! Can I ask how can I get a line alignment like you please? Tks

@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 3 года назад

Thanks man. Ek is ja!

@darshanmukadam Месяц назад

How do we get that tree lines on the left side of each parent widget?

@chefergus Год назад

background music + lack of eng subs + accent = a bit difficult to understand

@gilsonconceicao5201 Год назад

What is the name of this extension wich you open a menu and add /wrap widget or snippets?

@xX12VincEXx 2 года назад

Thanks a lot! This was what I need and even better. quick and dirty

@masomahboob 2 года назад

What's the name of the extension that creates L shaped lines?

@Ken-td8gc 11 месяцев назад

Very helpful video for a beginner

@augischadiegils.5109 2 года назад

♥️♥️♥️

@Phillpoke2 2 года назад

what is the extension that indicates the tabulation with --?

@tir3dnow792 5 лет назад

This was an amazing tutorial. Thank you so much.

@FunwithFlutter 5 лет назад

Super glad to hear that! I 'll definitely be making more of these "? minutes" videos.

@tir3dnow792 5 лет назад

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

@developerzull Год назад

Thank you so much! You are a good teacher. 😊

@muhammadmusharaf4705 4 года назад

Thank You, You really value the time.

@noobyxviii 3 года назад

These videos are fun to watch

@ahteramkhattak2243 2 года назад

Nice job mate

@FunwithFlutter 2 года назад

Thanks 👍

@agoldfish9239 4 года назад

What song did you use for the outro?

@mrprogrammer9859 3 года назад

dam man i went through 100 videos and u the only one give me everything

@FunwithFlutter 3 года назад

Sick

@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 4 года назад

Hey! Scroll down. Someone already asked this. 4 or 5 comments below :)

@jhonysou 4 года назад

@@FunwithFlutter Yeah xD

@nichoyeah 3 года назад

Stop putting background music in tutorials, plz. But don't stop making tutorials tho

@FunwithFlutter 3 года назад

I like the music 😏. But this is an old vid. I’m trying to get better at using music in vids to be less distracting

@AshrafAlharbi 4 года назад

The best basic flutter tutorial i ever seen

@yograjghadge2422 2 года назад

Very fast. Not able to understand. If someone fresher then it's ro difficult

@FunwithFlutter 2 года назад

Very good point. Thanks for the feedback

@hansdayo 11 месяцев назад

your 4 min video explain better than 1-hour long presentation from my classmates

@midnight4348 4 года назад

you are basically fireship io but for flutter.. I love your style.u just erned a subscriber

@FunwithFlutter 3 года назад

That's a great complement. Thanks!

@apnachannel1350 Год назад

very helpful

@faizulla5838 2 года назад

why music??????

@jorgeguberte7585 4 года назад

good content except for the music. no need for music. some sound effects maybe, but not music.

@remo077 2 года назад

That was very crisp and clear.. Subscribed.

@hardipgajera2316 Год назад

Perfect!

@lasindunuwanga5292 3 года назад

Great

@astayandablinkisastink9980 2 года назад

I love how short and concise this is

@FunwithFlutter 2 года назад

Thanks

@RenaudDenis 2 года назад

💕

@FunwithFlutter 2 года назад

💙

@kamithpiumal4887 3 года назад

Good

@abasilis Год назад

Very good for beginners, thanks!

@khevvkavinzky3934 3 года назад

can you pls put the code at the comment section ? please

@FunwithFlutter 3 года назад

Ahh sorry I don't have this code anymore

@Rainbowsaur 4 года назад

Cheers for the visuals provided, quick and just what I needed to get my head around it.

@FunwithFlutter 4 года назад

Great!

@positivetech2049 4 года назад

Have we have drag widgets in flutter

@FunwithFlutter 4 года назад

Yes we do. "Draggable" widget

@UmairAhmadh 3 года назад

Wow Man... Wordless. Thanks

@FunwithFlutter 3 года назад

My pleasure!

@LanNguyen-fz5jc 7 месяцев назад

❤❤❤❤❤

@ndrslmpk2634 2 года назад

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!

@prabinlamsal5125 Год назад

I seriously appreciate this video very much. Please make a more detailed and complete video of this type. People would really love that.

@gmtborges 3 года назад

Great explanation! Direct to the point. Subscribed

@dalanxd Год назад

Amazing!!! Thank you so much for the overview, it was exactly what I was looking for

@t4fast 4 года назад

got headache from the music

@2KTF2 2 года назад

I've instead disliked.

@FunwithFlutter 2 года назад

😥

@vivianshou9892 3 года назад

you must be super smart 👍

@FunwithFlutter 3 года назад

Just practice 😊

@laujimmy8635 4 года назад

What about the Safe Area?

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

@robertzxzx 2 года назад

Gooood job

@JoboyJordan 4 года назад

What extension do you use to show the tree outline of the components? Can't find it when googling. :|

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

@y1798 3 года назад

This was really helpful! Thank you so much

@leparain8 3 года назад

Mate you are a life saver thank you

@faffy1741 4 года назад

My emulator is very slow and crushes all the time,help I need to setup a fast one in vs code studio

@brunodluka3337 4 года назад

Consider using a physical device. If you're on ubunto or macos, it now has support for desktop

@abdelrahmanmustafaelmarakb1080 3 года назад

you make me want to code with your simplicity and music

@FunwithFlutter 3 года назад

That's a big complement. thank you

@rajdave9862 5 лет назад

Om namah shivay From where u are learning this all amazing widget and concepts of flutter

@FunwithFlutter 5 лет назад

Practice, experimenting, videos, documentation. Anywhere I can :)

@sonamchoki5853 4 года назад

Thank you so much.

@harryxd 3 года назад

@FunwithFlutter 3 года назад

😊

@kalderDean 4 года назад

what plugin do you use for wrapping widgets?

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