Unbounded height / width | Decoding Flutter

แชร์
ฝัง
  • เผยแพร่เมื่อ 2 ต.ค. 2024
  • You put a ListView in a column and you get the error “Viewport was given unbounded height”. What do you do now? Learn why you might be getting this error and what you can do to fix it.
    Leave us suggestions for code to unravel in the comments below!
    How to debug layout issues with the Flutter Inspector → goo.gle/3x3OesY
    Explain 'Unbounded height/width' errors → goo.gle/3jjIwPp
    Watch more Decoding Flutter episodes → goo.gle/Decodin...
    Don’t miss an episode, subscribe to Flutter → goo.gle/FlutterYT
    Get started with Flutter → goo.gle/Flutter
    Learn more about the Dart Language → goo.gle/2YF9OCi
    #DecodingFlutter #Flutter #Developer

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

  • @HumorDemais
    @HumorDemais 3 ปีที่แล้ว +81

    What the flutter!!! LOL

  • @ganeshbhat5761
    @ganeshbhat5761 3 ปีที่แล้ว +84

    1:48 😂
    What the Flutter!!!🔥🔥😂 Great video

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

      That's a developers' phrase

  • @erkamdev
    @erkamdev 3 ปีที่แล้ว +230

    What the... Flutter 😂😂 nice

  • @anuragpola
    @anuragpola 3 ปีที่แล้ว +143

    Well, that's an awesome explanation 🌪️ and the animations were so much fun to watch😄

  • @vikaskumar5434
    @vikaskumar5434 3 ปีที่แล้ว +68

    Best video 😂😂😂 the talking layouts were awesome 😂😂

    • @mikewest557
      @mikewest557 8 หลายเดือนก่อน +1

      was about to say this

  • @mrniamster
    @mrniamster 3 ปีที่แล้ว +41

    We need more of these cute animations 😂

  • @khurramrizvi153
    @khurramrizvi153 3 ปีที่แล้ว +11

    2:00 Evil Listview: I want everything 😂

  • @kurtestacion6113
    @kurtestacion6113 3 ปีที่แล้ว +75

    I love that slow "wanhandred piksels"

  • @saadzahem
    @saadzahem 3 ปีที่แล้ว +49

    Listview not just takes everything, sometimes it's everything.

  • @sathishweb
    @sathishweb 3 ปีที่แล้ว +8

    Wonderful explanation. This is a confusing area for newbies. Sometimes, I keep chanting "Constraints go down, Sizes go up, Parent sets position" while doing layouts :-)

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

      Haha, that is of course the best way to write Flutter: while chanting. :)

  • @Aspiiire
    @Aspiiire 3 ปีที่แล้ว +39

    Wow that's another level explanation tutorial

  • @TheManuz
    @TheManuz 3 ปีที่แล้ว +2

    Very nice explanation!
    I've found the "single pass" part really interesting, because it explains the reason behind it, before telling the fix.

  • @AkashSingh-cr7ly
    @AkashSingh-cr7ly 3 ปีที่แล้ว +1

    now the flutter tutorial gets better and better, nice animation.

  • @kenng2029
    @kenng2029 3 ปีที่แล้ว +19

    Please keep making more of these! It helps to make the sometimes cryptic flutter errors much more understandable 😁 Thank you!

  • @mrunfunny
    @mrunfunny 3 ปีที่แล้ว +17

    This was just amazing. Love the creativity that goes behind making these videos.

  • @mahmood466
    @mahmood466 2 ปีที่แล้ว +1

    Man these videos are freaking awesome 🔥
    When the Listview with one blinking eye says: I want everything!! As much as possible! That was hilarious 😂

  • @frostsmaker8966
    @frostsmaker8966 3 ปีที่แล้ว +8

    2:11, I like the animations, I think even a child or teenager will love Flutter now. :D

  • @TrongTran-zv6ci
    @TrongTran-zv6ci 3 ปีที่แล้ว +11

    1 dislike is from TechLead 😏

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

      Ha ha

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

    This is so helpful and easy to follow! Thank you a lot for creating these!😁

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

    After spending almost 3 hours solving this problem... I just found what I did here... I think now I have to be here more often

  • @amadojesusmartin9532
    @amadojesusmartin9532 3 ปีที่แล้ว +8

    With this video even a dog learns :D

  • @nazramirezm
    @nazramirezm 3 ปีที่แล้ว +2

    Neat!!! I had the exact same problem last weekend!
    This video is great! right on time! Thanks!

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

    Okay this explaination is actually pretty great. Good job

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

    Best. Explanation. Ever.
    Loved the video

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

    Flutter team is literally the best. Thanks for these amazing videos.

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

    Please more tutorials like this I loved de animations.

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

    This is the best Flutter video I have ever seen! "I want everything" :´D

  • @Niranjankumar-bp3kn
    @Niranjankumar-bp3kn 6 หลายเดือนก่อน

    The way of Explanation is good 😂😂

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

    I'm happy when look Filipe!

  • @erdemeker425
    @erdemeker425 4 หลายเดือนก่อน

    Instead of giving an error message, you can show the content as half or as small as it fits. This would be easier to understand, it would show that the content doesn't fit so you wouldn't have to make a video to explain this superfluous error message. In other frameworks, visual errors can be detected visually. browser does not give such an error. It's as if the weight of our suitcase exceeded the limit when boarding the plane and this became a problem.

  • @chichebem
    @chichebem 3 ปีที่แล้ว +4

    Love the animations and the voice over :)

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

    wow it's easy to get understanding. Thanks~

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

    I tried wrapping the list into expanding but that still gave me the error. Help?
    P.s: I am making a layout and inside the column, i want my remaining space to be taken by the listview, i don't want to hard code a height value to it. But I'm having errors.

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

    ListView kid was awesome!

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

    Thanks, very nice explanation

  • @dennisbarzanoff9025
    @dennisbarzanoff9025 3 ปีที่แล้ว +4

    I love how widgets are negotiating

  • @dhruvshetty
    @dhruvshetty 3 ปีที่แล้ว +4

    This is the best explanation video I have seen in my life. Absolutely love this!

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

    I would pay for animated series with the Column, Box and List View characters! $_$

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

    What is the best solution when we have to put a horizontal listview.builder inside a column without hardly setting height?

  • @ritiksaxenaofficial
    @ritiksaxenaofficial 3 ปีที่แล้ว +9

    You guys explain concept clearly in few minutes. Brilliant ways of explanation.❤️

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

    Or maybe set shrinkwrap to true in the listview
    I don’t know if it is the best solution but generally i resolve that problem like this

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

    Please make more cartoons with ListView starring. It's hilarious!

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

    Ahahahahha 😂😂😂
    What about making a cartoon series about widget's life and their adventures? :)

  • @harry356
    @harry356 ปีที่แล้ว

    Fun animations, good explanation.

  • @nidalbakir4720
    @nidalbakir4720 3 ปีที่แล้ว +4

    Such a great video 💜
    Thank you all.

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

    This video is such high quality

  • @adelromancy5649
    @adelromancy5649 2 ปีที่แล้ว +1

    why i get this error if i use horizontal listview and children have its own height?

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

    This is BRILLIANT!!!
    Please feel doing the animations! And the voices!! 😂😂

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

    The Viewport was given unbounded height error should contain a link to this video. This is pretty good documentation.

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

    Amazing explanation.. I was stuck on this error lol

    • @flutterdev
      @flutterdev  2 ปีที่แล้ว +1

      Happy to hear the tutorial was helpful! Check out more Decoding Flutter episodes here: goo.gle/DecodingFlutter

  • @GuiCayres
    @GuiCayres 2 ปีที่แล้ว +1

    OMG, its the best explanation about this.

  • @mohamedhamde6611
    @mohamedhamde6611 3 ปีที่แล้ว +2

    I want 100 video like that

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

    Awesome video. Very clever.

  • @owen_nx
    @owen_nx 3 ปีที่แล้ว +8

    I actually laughed a few times

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

    I want to be Flutter student for infinite if you teach me like this 😁
    Thanks for making us smile 😁

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

    Another great upload.

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

    Woow .. amazing animations bro😆

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

    wonderful work

  • @6868.
    @6868. 3 ปีที่แล้ว

    That's what I needed 💪

  • @George-or3uv
    @George-or3uv 3 ปีที่แล้ว +1

    I absolutely loved the twitching eye in the animation
    !

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

    Super useful, thanks a lot 👍👍

  • @harry356
    @harry356 ปีที่แล้ว

    How do I size a card in a wrap to the size of the contents of the card? Currently the cards take up all the width.
    I am a half year into flutter programming but these constraints are still a trial and error process for me. I wonder how many widgets in my widget tree could be replaced by a few well thought out ones.

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

    Very nice explanation!

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

    Great video

  • @MohammadMalan
    @MohammadMalan 2 ปีที่แล้ว +1

    Wow ..... that was simple

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

    😂😂😂😂😂😂😂😂 Nice video filiph and flutter team : )

  • @carldressler3262
    @carldressler3262 3 ปีที่แล้ว +2

    The explanation with the boxes was awesome!

  • @newbee936
    @newbee936 ปีที่แล้ว

    I find these an issue if we use Expanded and we have wrapped the column in SIngleChildScrollView then this error still occurs. How can I solve this ? Please respond

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

    awesome explanation

  • @flutter__developer7889
    @flutter__developer7889 3 ปีที่แล้ว +2

    Nice.tanks filiph❤

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

    very helpful 😊

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

    can I have the titles of those books next to the bed and table lamp please.

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

      Certainly! Two of them are in Czech ("1918-1968 Czech short stories", and a Sci-fi anthology called "Železo přichází z hvězd"). Then there's "Making Things Work", a book on complex systems. And lastly, Michael Bierut's "How To". I can recommend all of these!

  • @mamadoudiouf7638
    @mamadoudiouf7638 ปีที่แล้ว

    amazing, thanks!

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

    Not Working

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

    Using SingleChildListView() for parent , do everything you want , just for List view , set => shrinkwrap=true, physics= NeverscrollablePhysics(), should be work

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

    I'm going to hear those widget voices everytime I see the error now. That was hilarious. 🤣

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

      Mission accomplished.

  • @yalcinozer4434
    @yalcinozer4434 2 ปีที่แล้ว +1

    I liked the animations and voice acting lol.

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

      Glad to hear you liked it!
      You can check out even more episodes of Decoding Flutter here:
      goo.gle/DecodingFlutter
      Happy Fluttering 😎

  • @heckvideos
    @heckvideos 3 ปีที่แล้ว +2

    I'm loving flutter 💙

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

    Thanks!

  • @ashwinshrestha9110
    @ashwinshrestha9110 2 ปีที่แล้ว +1

    good

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

    i know all about this but I watched the video, the talking layouts were awesome :) hehe cool :)

  • @SwarajSingh-xs6dy
    @SwarajSingh-xs6dy ปีที่แล้ว +1

    Great video, the animations used are just wow!

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

    I love this guy! :D

  • @Hawk______
    @Hawk______ ปีที่แล้ว

    why the listview doesn't behave like expanded in the first place
    is this raises some other plethora of problems

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

    This guy needs his own HomeStarRunner-style channel.

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

    Thanks man

  • @mhmtkrnlk
    @mhmtkrnlk ปีที่แล้ว

    And you still get rekted if you want a horizontal scrollable widget with its child height. U have to give explicit height which is sucks and against declarative programming.

  • @VictorNolochemical
    @VictorNolochemical ปีที่แล้ว

    What the flutter is right, THANK YOU! And thanks TH-cam :D

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

    Everytime I watch Filip's videos on flutter's channel it breaks my heart that Filip is no longer an official part of flutter :(

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

    That evil smile on listview after it says "I want everything...as much as possible" 😆😆

  • @Nobudy_1
    @Nobudy_1 ปีที่แล้ว

    What about pageview inside a column inside a singlechildscrollview and i want the pageview to expand the height

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

    So there is NO flex in flutter. Thank you for short and quick (not) answer.

  • @RushikManiar
    @RushikManiar ปีที่แล้ว

    Can anyone help. If I need my list view to occupy minimum height if less elements and maximum height till expandable if more elements in listview

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

    I love everyone on the flutter team soo much! I wish I could have dinner with them some time! And Todd from Firebase!

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

    I found away around it. Created my own custom list builder. With row and a loop of children.

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

    That's why I don't bother and just use a custom scroll view.

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

    Filip I saw what you did at 0:16

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

      Little know fact: those three words were the working title for what later became "Decoding Flutter". ;)

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

    I kinda wish I could see my flawed layout visually, or have a more helpful error message

  • @忘语-x1o
    @忘语-x1o 2 ปีที่แล้ว

    解除迷惑了,非常nice的视频。

  • @semangatfanny4838
    @semangatfanny4838 5 หลายเดือนก่อน

    List view mentok di column karena ngg ada tinggi pasti, jadi wrapping by expandes (as much as possible) atau flexible(ngikutin ukuran widget child(?)). Atauuu klo mau tinggi tertentu make sizedbox