Flutter Layout Basics

Поділитися
Вставка
  • Опубліковано 25 лип 2019
  • 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...

КОМЕНТАРІ • 188

  • @OriginLegend
    @OriginLegend 3 роки тому +22

    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!

  • @nitin7218
    @nitin7218 4 роки тому +40

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

  • @harry356
    @harry356 2 роки тому +11

    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!

  • @tadaspetra
    @tadaspetra 2 роки тому +1

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

    • @FunwithFlutter
      @FunwithFlutter  2 роки тому +1

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

  • @slaterlloyd4443
    @slaterlloyd4443 2 роки тому +3

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

  • @MsSplashIt
    @MsSplashIt 4 роки тому +38

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

    • @FunwithFlutter
      @FunwithFlutter  4 роки тому +2

      Thanks for leaving a comment! Appreciate it!

    • @RJ-sw7zv
      @RJ-sw7zv 3 роки тому

      Sounds South African.

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

  • @UnpossiblePOG
    @UnpossiblePOG 3 роки тому +1

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

  • @hansdayo
    @hansdayo 8 місяців тому

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

  • @astayandablinkisastink9980
    @astayandablinkisastink9980 2 роки тому +1

    I love how short and concise this is

  • @its_zehri
    @its_zehri 2 роки тому +1

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

  • @hexacodah
    @hexacodah 4 роки тому +1

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

  • @ayrtons1572
    @ayrtons1572 4 роки тому +4

    most straight forward/ formative flutter tutorials!

  • @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 роки тому +1

    The best basic flutter tutorial i ever seen

  • @Rainbowsaur
    @Rainbowsaur 4 роки тому +1

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

  • @FunwithFlutter
    @FunwithFlutter  4 роки тому +1

    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.

  • @tunzzi
    @tunzzi 2 роки тому +2

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

  • @xX12VincEXx
    @xX12VincEXx Рік тому

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

  • @dalanxd
    @dalanxd Рік тому

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

  • @vexjack
    @vexjack 2 роки тому +2

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

  • @CraigRatliff
    @CraigRatliff 4 роки тому +5

    This was excellently done. Thank you for sharing.

  • @remo077
    @remo077 2 роки тому

    That was very crisp and clear.. Subscribed.

  • @developerzull
    @developerzull 11 місяців тому

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

  • @gmtborges
    @gmtborges 2 роки тому

    Great explanation! Direct to the point. Subscribed

  • @mrprogrammer9859
    @mrprogrammer9859 3 роки тому +1

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

  • @muhammadmusharaf4705
    @muhammadmusharaf4705 4 роки тому +2

    Thank You,
    You really value the time.

  • @y1798
    @y1798 3 роки тому

    This was really helpful! Thank you so much

  • @brokenumbrellagames
    @brokenumbrellagames 4 роки тому

    Just discovered your channel. Keep up the good work buddy. Loving the vids so far!

  • @tir3dnow792
    @tir3dnow792 4 роки тому +3

    This was an amazing tutorial. Thank you so much.

    • @FunwithFlutter
      @FunwithFlutter  4 роки тому +1

      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.

  • @erishsounderlatorre286
    @erishsounderlatorre286 2 роки тому +1

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

  • @abasilis
    @abasilis Рік тому

    Very good for beginners, thanks!

  • @MustaphaALILI
    @MustaphaALILI 4 роки тому

    Thank you for this great tutorial

  • @Ken-td8gc
    @Ken-td8gc 7 місяців тому

    Very helpful video for a beginner

  • @leparain8
    @leparain8 3 роки тому

    Mate you are a life saver thank you

  • @YuriG03042
    @YuriG03042 3 роки тому

    Amazing video, well edited and well explained. Deserved sub given.

  • @noobyxviii
    @noobyxviii 2 роки тому

    These videos are fun to watch

  • @ilkercankaya3779
    @ilkercankaya3779 3 роки тому

    this video is so enjoyable, nice job!

  • @shlokjain4618
    @shlokjain4618 3 роки тому +1

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

  • @vs_sa
    @vs_sa 2 роки тому +1

    very nice! Thanks.

  • @oguzhanerylmaz5989
    @oguzhanerylmaz5989 Рік тому +2

    Short, basic and clear! Thanks for this perfect tutorial.

  • @henrypilotatwork9696
    @henrypilotatwork9696 4 роки тому

    very good explanation and illustration!

  • @codingright
    @codingright 4 роки тому

    Great Video. Thank you!

  • @dhevendhiranm4138
    @dhevendhiranm4138 2 роки тому +1

    Excellent

  • @anandpatel5347
    @anandpatel5347 4 роки тому

    Perfect 👌 easy to understand

  • @apnachannel1350
    @apnachannel1350 Рік тому

    very helpful

  • @sonamchoki5853
    @sonamchoki5853 4 роки тому

    Thank you so much.

  • @hardipgajera2316
    @hardipgajera2316 Рік тому

    Perfect!

  • @ahteramkhattak2243
    @ahteramkhattak2243 2 роки тому +1

    Nice job mate

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

  • @1995taunus
    @1995taunus 3 роки тому

    Thank you!

  • @sommie4935
    @sommie4935 4 роки тому

    Subbed, great video, cheers!

  • @CodeinVeins
    @CodeinVeins 3 роки тому +1

    Good one

  • @ariseinvesting8759
    @ariseinvesting8759 2 роки тому

    Man cant thank you enough. 🙏🏽

  • @midnight4348
    @midnight4348 3 роки тому

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

  • @mohidden
    @mohidden 4 роки тому

    a lot thanks for you bro

  • @bpalaciosa
    @bpalaciosa 4 роки тому

    Great tutorial

  • @fitzgerardmouliom443
    @fitzgerardmouliom443 3 місяці тому

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

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

  • @abdelrahmanmustafaelmarakb1080
    @abdelrahmanmustafaelmarakb1080 3 роки тому

    you make me want to code with your simplicity and music

  • @SoftwareAndTechnology
    @SoftwareAndTechnology 4 роки тому

    Good tutorial

  • @robertzxzx
    @robertzxzx 2 роки тому

    Gooood job

  • @MafasDx
    @MafasDx 3 роки тому

    That's Fantastic..!!

  • @darul-asar381
    @darul-asar381 3 роки тому +1

    Cool 👍

  • @thanusan
    @thanusan 4 роки тому +2

    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 роки тому +1

      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

  • @SunilKumarSenguttuvan
    @SunilKumarSenguttuvan 4 роки тому

    Excellent !!

  • @shivamtyagi7106
    @shivamtyagi7106 3 роки тому +1

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

  • @Phillpoke2
    @Phillpoke2 2 роки тому

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

  • @quandominh1084
    @quandominh1084 Рік тому

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

  • @gilsonconceicao5201
    @gilsonconceicao5201 Рік тому

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

  • @thefrenchguard6999
    @thefrenchguard6999 2 роки тому

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

  • @princepatel4864
    @princepatel4864 4 роки тому

    Nice video

  • @masomahboob
    @masomahboob Рік тому

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

  • @agoldfish9239
    @agoldfish9239 3 роки тому

    What song did you use for the outro?

  • @ramyokasha3092
    @ramyokasha3092 4 роки тому

    thanks

  • @lasindunuwanga5292
    @lasindunuwanga5292 3 роки тому

    Great

  • @augischadiegils.5109
    @augischadiegils.5109 2 роки тому +1

    ♥️♥️♥️

  • @ekosantoso6755
    @ekosantoso6755 4 роки тому +3

    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 роки тому +1

      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! :)

  • @jhonysou
    @jhonysou 4 роки тому +1

    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 роки тому +1

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

    • @jhonysou
      @jhonysou 4 роки тому +1

      @@FunwithFlutter Yeah xD

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

  • @florianm5556
    @florianm5556 4 роки тому +4

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

    • @FunwithFlutter
      @FunwithFlutter  4 роки тому +3

      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.

  • @Ryaninja
    @Ryaninja 4 роки тому +1

    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 роки тому +1

      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.

  • @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 роки тому +1

      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.

  • @kamithpiumal4887
    @kamithpiumal4887 2 роки тому

    Good

  • @Lucas7Martins
    @Lucas7Martins 4 роки тому +2

    How do you turn on those lines that correspond to children?
    Like at 1:24 the ones going from container to center?

    • @FunwithFlutter
      @FunwithFlutter  4 роки тому +3

      dartcode.org/releases/v3-2/

    • @kamrulahsan06
      @kamrulahsan06 4 роки тому

      @@FunwithFlutter Thank you and great tutorial btw

  • @aniketsen5595
    @aniketsen5595 3 роки тому

    🔥🔥🔥🔥🔥

  • @UmairAhmadh
    @UmairAhmadh 3 роки тому

    Wow Man... Wordless. Thanks

  • @kalderDean
    @kalderDean 4 роки тому

    what plugin do you use for wrapping widgets?

    • @FunwithFlutter
      @FunwithFlutter  4 роки тому +3

      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.

  • @LanNguyen-fz5jc
    @LanNguyen-fz5jc 3 місяці тому

    ❤❤❤❤❤

  • @tanoryjakaperdana1419
    @tanoryjakaperdana1419 3 роки тому +2

    Sir, are you the flash? 😂

  • @harryxd
    @harryxd 3 роки тому

  • @RenaudDenis
    @RenaudDenis 2 роки тому +1

    💕

  • @kotivideos7140
    @kotivideos7140 4 роки тому +2

    cool pls do another videos for other widgets

  • @belespritmkhatshwa3145
    @belespritmkhatshwa3145 3 роки тому +1

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

  • @positivetech2049
    @positivetech2049 3 роки тому

    Have we have drag widgets in flutter

  • @rajdave9862
    @rajdave9862 4 роки тому

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

    • @FunwithFlutter
      @FunwithFlutter  4 роки тому

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

  • @endagegnehudansamo2620
    @endagegnehudansamo2620 4 роки тому

    likeeeee

  • @faffy1741
    @faffy1741 3 роки тому

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

    • @brunodluka3337
      @brunodluka3337 3 роки тому

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

  • @mouradouddah5934
    @mouradouddah5934 4 роки тому

    Goood

  • @fatihdogmus1238
    @fatihdogmus1238 4 роки тому

    i need to chalk effect. how you making ?