Flutter Layouts Walkthrough: Row, Column, Stack, Expanded, Padding

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ต.ค. 2024

ความคิดเห็น • 148

  • @CodeWithAndrea
    @CodeWithAndrea  4 ปีที่แล้ว +12

    This demo is now live at this link using Flutter web:
    flutter-layouts-demo.web.app/#/

  • @zoltanarvai9924
    @zoltanarvai9924 5 ปีที่แล้ว +30

    Brother this was probably the best 20 minute investment I’ve put into learning anything related to flutter. So much information with all the scenarios I can think of! Brilliant! Thanks

  • @terryrees7218
    @terryrees7218 5 ปีที่แล้ว +4

    Excellent Flutter layouts tutorial. Expanded is a widget that I've been struggling with. I keep using it inappropriately and getting errors. Not anymore, I get it now. This is the best explanation that I have come across yet - thank you!

  • @filiphracek
    @filiphracek 6 ปีที่แล้ว +77

    This is just brilliant, thank you for doing this! Even just the first part alone is something that has been sorely missing. If you want to get more views, I suggest you split this into focused parts with faster pacing, and share them as separate videos. For example, a short video on main-/cross-AxisAlignment is something that would be widely shared, I think.

    • @CodeWithAndrea
      @CodeWithAndrea  6 ปีที่แล้ว +10

      Thanks for the advice!

    • @rayli7842
      @rayli7842 5 ปีที่แล้ว +5

      Agreed! This video + demo library has been so helpful for playing around with basic Flutter layouts. The whole Main/Cross axis is quite confusing and the naming is terrible. This video helps that make sense.

    • @mohammadrasoulfard-habibi3066
      @mohammadrasoulfard-habibi3066 5 ปีที่แล้ว

      @@CodeWithAndrea Do you know how to get the documentation on a PDF so its printable many thanks

    • @rydmike
      @rydmike 5 ปีที่แล้ว +1

      @@rayli7842 Haha, I could not agree more on the main/cross terrible and confusing naming. I still get them mixed up now and then. I wonder what was wrong with just horizontal and vertical.

  • @solutionprovider27
    @solutionprovider27 5 ปีที่แล้ว

    After reading flutter docs anyone can be so much confused about layout and after so much google i found this video to be my best companion to fully understand . After this i directly jumped into the designer provided screens and started development screens . Thank you again for such a wonderful video.

  • @oliverbytes
    @oliverbytes 5 ปีที่แล้ว +8

    This tutorial is by far the best for laying out UIs in Flutter! All in one and very easy to understand! I am so happy I found this! Thank you very much Andrea Bizzotto! More power to you!!!

  • @laybunzz
    @laybunzz 6 ปีที่แล้ว +42

    Arguably the best video anywhere on the internet

    • @CodeWithAndrea
      @CodeWithAndrea  6 ปีที่แล้ว +8

      Craig Labenz wow thanks! Best comment on the Internet ;)

    • @hassanosama357
      @hassanosama357 4 ปีที่แล้ว

      Damn true

  • @zuherabud744
    @zuherabud744 4 ปีที่แล้ว

    just to appreciate this hard word may we all subscribe to this wonderful man for sparing his time and giving us quality work otherwise we wont encourage him to give us more

  • @ChandanKumar-hj5eq
    @ChandanKumar-hj5eq 6 ปีที่แล้ว

    Can't imagine any explanation will be better than this. Relating stack to Z-axis blew my mind. Thnx from India.

  • @Whyayk
    @Whyayk 6 ปีที่แล้ว +2

    this community is so amazing i love it. the people believe in sharing. you know what because people like your our world is such a good place. i love you man thanks for sharing

    • @CodeWithAndrea
      @CodeWithAndrea  5 ปีที่แล้ว

      Thank you for your very kind comment :)

  • @bigturnpoint
    @bigturnpoint 6 ปีที่แล้ว

    Hi, I'm new in Flutter although not a developer. I'm a designer in Korea. Thanks for your lesson and pdf. I hope your contents spread much more extensively

    • @CodeWithAndrea
      @CodeWithAndrea  6 ปีที่แล้ว

      It's great to hear you're finding my videos helpful! Best of luck learning Flutter!

  • @brewedscript1014
    @brewedscript1014 4 ปีที่แล้ว

    wow this is the best layout lecture i have ever taken

  • @PrasadThilakarathne
    @PrasadThilakarathne 5 ปีที่แล้ว

    Absolutely fantastic. This helps me a lot as a Flutter beginner to understand the layouts. Thank you very much.

  • @thedudeabides8637
    @thedudeabides8637 4 ปีที่แล้ว

    Hi Andrea, thanks so much for your super helpful tutorials and for making this awesome app and sharing the code. I cloned your repo and got dependencies but I was still getting a bunch of errors when I try to run. After some research its sorted now. If anyone else runs into this issue: In project view to go android -> app -> then open the build.gradle file. and change both the compileSDKVersion and the targetSdkVersion from 27 to 28. I wasn't able to run this app until I did that. Thanks again Andrea, this is amazingly helpful for people wrapping their heads around how all this works.

  • @icylight
    @icylight 5 ปีที่แล้ว

    This has got to be one of the best videos explaining layouts for Flutter. Awesome!

  • @10trends57
    @10trends57 4 ปีที่แล้ว +1

    *I just want to say, This is the best video on flutter, I've ever seen*

  • @piiaall
    @piiaall 4 ปีที่แล้ว

    This is the best way to teach such a complex thing. Keep doing such amazing works!!

  • @cynido
    @cynido 5 ปีที่แล้ว

    bruh you dont how helpful your videos are for beginners like me,thank you so much

  • @md.shamswadudabbir12
    @md.shamswadudabbir12 4 ปีที่แล้ว

    Thank you. I had a very hard time with all these combination. Moreover I was unable to picture them properly. With this I can now develop any design that my UX designer provides. Again Thank you. :D

  • @denisfajar6596
    @denisfajar6596 4 ปีที่แล้ว

    Best flutter video for beginner

  • @creativelymedia6050
    @creativelymedia6050 6 ปีที่แล้ว

    This is a must watch for any flutter beginner. Great video!

  • @chrishannahscutt9646
    @chrishannahscutt9646 6 ปีที่แล้ว

    Thank you for teaching in such a clear and easy to understand way!

  • @wakko3wb
    @wakko3wb 5 ปีที่แล้ว +1

    Thank you very much for these videos, it is really nice to see the detail and hard work you put to explain flutter to us.

  • @PabloGeokar
    @PabloGeokar 5 ปีที่แล้ว

    I watched your videos several times, very good your approach.

  • @RobertWildling
    @RobertWildling 5 ปีที่แล้ว

    This is fantastic! I thought I am well-informed about the layout system - but man: you make it really clear!!! Thanks you a lot!!!

  • @letsgodevs
    @letsgodevs 4 ปีที่แล้ว

    yooooo man ... thank you very much .. this is the best layout tutorial I have ever watch....god bless you

  • @EricStumper
    @EricStumper 6 ปีที่แล้ว

    Amazing tutorial, thank you very much! This will save me a lot of time today rebuilding my screens structure in a clean way.

  • @kushalprajapati3918
    @kushalprajapati3918 2 ปีที่แล้ว

    Good job bro you save my lot of time to understand this topic of flutter
    Thanks

  • @lachroniquedufutur5191
    @lachroniquedufutur5191 3 ปีที่แล้ว

    Thanks mate, best video ever ! I understand in 2 min secondes what took me months :)

  • @pulgosawr
    @pulgosawr 5 ปีที่แล้ว

    Thanks for this one! Been looking for a good source of layouts because I've been starting learning this one. Thank you very much! :D

  • @mobiappdev7504
    @mobiappdev7504 5 ปีที่แล้ว

    Excellent way to learn. Thanks a lot. Good examples to learn faster.

  • @mickybrian2010
    @mickybrian2010 5 ปีที่แล้ว +1

    This is really educative for beginners to Flutter. Thanks for the good job. Subscribed

  • @aledigitale3377
    @aledigitale3377 6 ปีที่แล้ว

    WONDERFUL WORK !!! Thank you so much Andrea !!!! Please, keep continue with these amazing tutorials...

  • @iYaffleTechVideos
    @iYaffleTechVideos 6 ปีที่แล้ว

    Wow.. clarity of this video made me to subscribe your channel. Great explanations which couldn't be found elsewhere.

  • @adeshinahammedh.3705
    @adeshinahammedh.3705 6 ปีที่แล้ว +1

    Thank you so much for this excellent piece, Andrea :)

  • @hvisli6853
    @hvisli6853 6 ปีที่แล้ว

    Great work! Waiting for more videos about widgets.

  • @m4tt72
    @m4tt72 5 ปีที่แล้ว +4

    This is amazing! Thank you so much for this.

  • @overstandnigeria
    @overstandnigeria 6 ปีที่แล้ว

    Finally a true layout tutorial. Great job

  • @brunobule9762
    @brunobule9762 5 ปีที่แล้ว

    How is possible this video have DISLIKE? Amazing video, thanks broh.

  • @alanjgorton
    @alanjgorton 6 ปีที่แล้ว

    Brilliant. Great content, clearly explained. Many thanks for posting!

  • @pangipang1144
    @pangipang1144 3 ปีที่แล้ว +1

    With the latest flutter release, I came across the following problems with the source code:
    Missing concrete implementations of 'getter SliverPersistentHeaderDelegate.showOnScreenConfiguration' and 'getter SliverPersistentHeaderDelegate.vsync'.
    Try implementing the missing methods, or make the class abstract.dartnon_abstract_class_inherits_abstract_member

  •  5 ปีที่แล้ว

    Nobody could explain it better. Heats off.

  • @jerryarekhandia1003
    @jerryarekhandia1003 6 ปีที่แล้ว

    Just what I was looking for. You rock man. 🙏

  • @shlomobelleli2556
    @shlomobelleli2556 4 ปีที่แล้ว

    Hi, Thank you
    I think that you should consider when using a black background in your editor, to change your mouse pointer to the yellow circle
    , this way anyone can see your progress on the code
    Thank you again.

  • @zucasdev6668
    @zucasdev6668 6 ปีที่แล้ว +1

    great explanation, tks from brazil.

  • @abdulazizalghafli5240
    @abdulazizalghafli5240 6 ปีที่แล้ว

    Great and easy to understand. Thank you.

  • @fabsync
    @fabsync 5 ปีที่แล้ว

    thanks for this wonderful video! I enjoyed the content and code :) It will be nice to have a second part with "real design samples."

  • @easazade
    @easazade 4 ปีที่แล้ว

    thank you so much for the time you put on this video

  • @robyroad_
    @robyroad_ 6 ปีที่แล้ว

    Thank you so much, very clear explanation!

  • @jimmorrison2657
    @jimmorrison2657 6 ปีที่แล้ว +2

    Very good video mate. Thanks!

  • @erdincgc2
    @erdincgc2 5 ปีที่แล้ว

    Thanks for this great video... very clean and easy to understand. :)

  • @aruny25
    @aruny25 4 ปีที่แล้ว

    You are the man! Nailing it again

  • @leonvanrijswijk8409
    @leonvanrijswijk8409 4 ปีที่แล้ว

    This is really great. Thanks a lot!

  • @LorandPalfalvi
    @LorandPalfalvi 6 ปีที่แล้ว

    I bow before you! Thank you for this amazing content!!

  • @vladikk
    @vladikk 5 ปีที่แล้ว

    Amazing. Thank you so much for this video!

  • @firedevelop
    @firedevelop 5 ปีที่แล้ว +1

    Hi Andrea! amazing Job!
    Please more videos :)

    • @CodeWithAndrea
      @CodeWithAndrea  5 ปีที่แล้ว

      Stay tuned, I'll have new stuff coming this month ;)

    • @firedevelop
      @firedevelop 5 ปีที่แล้ว

      @@CodeWithAndrea :))

  • @kormemis
    @kormemis 5 ปีที่แล้ว

    perfect explanation

  • @nicennice
    @nicennice 5 ปีที่แล้ว

    Good Explainantion. Thanks for posting.

  • @yashdabi248
    @yashdabi248 4 ปีที่แล้ว

    Great explanation

  • @guilhermemuniz1072
    @guilhermemuniz1072 5 ปีที่แล้ว

    Thanks!! Perfect explication, more please

  • @LikeLuluLikeLulia
    @LikeLuluLikeLulia 4 ปีที่แล้ว

    Hi, Andrea, I really like your video, but when I download the source code and open it in Android Studio, it can't run on both Android and ios simulator,
    on Android, it shows:
    BUILD FAILED in 7s
    Exception: Gradle task assembleDebug failed with exit code 1
    on ios, it shows :Could not build the application for the simulator.
    Error launching application on iPhone 11 Pro Max.
    I tried to google to find solution, but still not clear, do you know how to fix? thank you!

  • @dev.ahmedramadan
    @dev.ahmedramadan 5 ปีที่แล้ว

    amazing Job!
    Please more videos

  • @Lello07737
    @Lello07737 5 ปีที่แล้ว

    Thank you. Great video.

  • @kanybekmomukeev4116
    @kanybekmomukeev4116 6 ปีที่แล้ว

    Great, pls continue!

  • @maiseid9551
    @maiseid9551 4 ปีที่แล้ว

    Thank you :D great explanation , can you please give us a recommended way to handle responsive layout for mobile and web

  • @SoulReaperDan1
    @SoulReaperDan1 6 ปีที่แล้ว

    Brilliant video, thankyou !

  • @GottsStr
    @GottsStr 5 ปีที่แล้ว

    Bro, thank you so much. God bless you.

  • @nurcholis80081
    @nurcholis80081 5 ปีที่แล้ว

    thanks master..u are the best in the world.

  • @arthasmx
    @arthasmx 4 ปีที่แล้ว

    vergas!
    thanks a lot for this!

  • @blackant12
    @blackant12 5 ปีที่แล้ว

    Thank you..This was a very informative video

  • @andreas2672
    @andreas2672 6 ปีที่แล้ว

    awesome work! thank you so much!

  • @djordjemancic5205
    @djordjemancic5205 4 ปีที่แล้ว

    Which of these layouts is responsive? I built my app using almost only columns and rows, and everything looks huge on smaller screen. Which layout would solve this?

  • @Vaygeth
    @Vaygeth 6 ปีที่แล้ว

    Good explanation, thank you

  • @igorkuna290
    @igorkuna290 5 ปีที่แล้ว

    WOW
    wonderful job, man, wonderful!

  • @KetanVadhavana
    @KetanVadhavana 6 ปีที่แล้ว

    Great explanation 👍

  • @PakSoerja
    @PakSoerja 5 ปีที่แล้ว

    I just subscribed to you! Thank you for this tutorial.

  • @reginaldojaccosantidade4364
    @reginaldojaccosantidade4364 2 ปีที่แล้ว

    Awesome video bro. Ty

  • @Сова32
    @Сова32 5 ปีที่แล้ว

    thanks, you helped me a lot

  • @lucas3820
    @lucas3820 4 ปีที่แล้ว

    Please could you enable editing / adding subtitles on youtube, it would be a pleasure to add subtitles to this video.

  • @lucianohn
    @lucianohn 5 ปีที่แล้ว

    awesome... very useful tks

  • @GlennLewis
    @GlennLewis 6 ปีที่แล้ว

    Great job! AFAICT, `Container(height: 50.0)` works the same as a `SizedBox(height: 50.0)`, correct? Also, do you have any thoughts about stackoverflow.com/questions/51309986/flutter-how-to-create-a-reverse-listview-that-initially-fills-empty-space-at-th ?

  • @aepsrhunter
    @aepsrhunter 5 ปีที่แล้ว

    Thank you so much.

  • @nipunasudha
    @nipunasudha 5 ปีที่แล้ว +1

    Are you *Scandinavian*? Such a great video man!

  • @nonameprenomnonamenom9052
    @nonameprenomnonamenom9052 5 ปีที่แล้ว

    Very very usefull !! Thank you friend!

  • @sreid70
    @sreid70 6 ปีที่แล้ว +1

    Great video. Thanks

  • @hassanosama357
    @hassanosama357 4 ปีที่แล้ว

    Thanks Man

  • @TheDestuchChannel
    @TheDestuchChannel 6 ปีที่แล้ว

    Awesome. Ty a lot!

  • @georgesmarkus
    @georgesmarkus 3 ปีที่แล้ว +1

    Thanks 👍

  • @AjayPatel-ip2dv
    @AjayPatel-ip2dv 5 ปีที่แล้ว

    Superb bro

  • @amraboeleneen2221
    @amraboeleneen2221 6 ปีที่แล้ว

    i needed that , thanks

  • @lautaroriveiro
    @lautaroriveiro 5 ปีที่แล้ว

    Gracias, muy claro.

  • @EBEALEX
    @EBEALEX 5 ปีที่แล้ว

    Thank you very much guy

  • @haz303
    @haz303 5 ปีที่แล้ว

    Thanks you very much

  • @jamesbuddyrogers
    @jamesbuddyrogers 5 ปีที่แล้ว

    Where can I get this early access discount code?

    • @CodeWithAndrea
      @CodeWithAndrea  5 ปีที่แล้ว

      It's in the link in the video description. You can use this: www.udemy.com/flutter-firebase-build-a-complete-app-for-ios-android/?couponCode=DART15&password=codingwithflutter

  • @tufzombie1637
    @tufzombie1637 4 ปีที่แล้ว

    thank you so muchchch.. very helpfull

  • @TimRijckaert
    @TimRijckaert 6 ปีที่แล้ว

    superb explainer :)

  • @DanielLucasSS92
    @DanielLucasSS92 6 ปีที่แล้ว

    great video, ty

  • @hamadykais9318
    @hamadykais9318 4 ปีที่แล้ว

    very nice

  • @dreyfiferreira7753
    @dreyfiferreira7753 4 ปีที่แล้ว

    Amazing!

  • @ahmetkrmzoglu1762
    @ahmetkrmzoglu1762 5 ปีที่แล้ว

    thank you :)