How to add a ListView to a Column in Flutter

Question

I m trying to construct a simple login page for my Flutter app   I ve successfully built the TextFields and log in Sign in buttons   I want to add a horizontal ListView   When I run the code my elements disappear  if I do it without the ListView  it s fine again  How can I do this correctly  return new MaterialApp          home  new Scaffold            appBar  new AppBar              title  new Text  quot Login   Signup quot                           body  new Container              child  new Center                child  new Column                mainAxisAlignment  MainAxisAlignment center                  children   lt Widget gt                     new TextField                      decoration  new InputDecoration                        hintText   quot E M A I L    A D D R E S S quot                                                                new Padding padding  new EdgeInsets all 15 00                      new TextField obscureText  true                      decoration  new InputDecoration                        hintText   quot P A S S W O R D quot                                                                  new Padding padding  new EdgeInsets all 15 00                      new TextField decoration  new InputDecoration                      hintText   quot U S E R N A M E quot                                           new RaisedButton onPressed  null                    child   new Text  quot SIGNUP quot                        new Padding padding  new EdgeInsets all 15 00                      new RaisedButton onPressed  null                    child  new Text  quot LOGIN quot                        new Padding padding  new EdgeInsets all 15 00                      new ListView scrollDirection  Axis horizontal                    children   lt Widget gt                       new RaisedButton onPressed  null                      child  new Text  quot Facebook quot                          new Padding padding  new EdgeInsets all 5 00                        new RaisedButton onPressed  null                      child  new Text  quot Google quot                                                                                           margin  new EdgeInsets all 15 00

User · Answer

Use Expanded to fit the listview in the column Column    children   lt Widget gt        Text  Data         Expanded        child  ListView

User · Answer

return new MaterialApp      home  new Scaffold        appBar  new AppBar          title  new Text  quot Login   Signup quot                   body  new Container          child  new Center            child  ListView              mainAxisAlignment  MainAxisAlignment center            scrollDirection  Axis vertical              children   lt Widget gt                 new TextField                  decoration  new InputDecoration                    hintText   quot E M A I L    A D D R E S S quot                                                    new Padding padding  new EdgeInsets all 15 00                  new TextField obscureText  true                  decoration  new InputDecoration                    hintText   quot P A S S W O R D quot                                                      new Padding padding  new EdgeInsets all 15 00                  new TextField decoration  new InputDecoration                  hintText   quot U S E R N A M E quot                                   new RaisedButton onPressed  null                child   new Text  quot SIGNUP quot                    new Padding padding  new EdgeInsets all 15 00                  new RaisedButton onPressed  null                child  new Text  quot LOGIN quot                    new Padding padding  new EdgeInsets all 15 00                  new ListView scrollDirection  Axis horizontal                children   lt Widget gt                   new RaisedButton onPressed  null                  child  new Text  quot Facebook quot                      new Padding padding  new EdgeInsets all 5 00                    new RaisedButton onPressed  null                  child  new Text  quot Google quot                                                                       margin  new EdgeInsets all 15 00

User · Answer

Reason for the error   Column expands to the maximum size in main axis direction  vertical axis   and so does the ListView     Solutions  So  you need to constrain the height of the ListView  There are many ways of doing it  you can choose that best suits your need       If you want to allow ListView to take up all remaining space inside Column use Expanded    Column    children   lt Widget gt       Expanded        child  ListView                          If you want to limit your ListView to certain height  you can use SizedBox    Column    children   lt Widget gt       SizedBox        height  200     constrain height       child  ListView                       If your ListView is small  you may try shrinkWrap property on it    Column    children   lt Widget gt       ListView        shrinkWrap  true     use it

User · Answer

As have been mentioned by others above Wrap listview with Expanded is the solution   But when you deal with nested Columns you will also need to limit your ListView to a certain height  faced this problem a lot    If anyone have another solution please  mention in comment or add answer   Example    SingleChildScrollView     child  Column       children   lt Widget gt          Image image       lt  lt  any widgets added        SizedBox           Column           children   lt Widget gt              Text  header        lt  lt  any widgets added             Expanded child               ListView builder                  here your code                scrollDirection  Axis horizontal          itemCount  items length          itemBuilder   BuildContext context  int index                return Container                                                        Divider      lt  lt  any widgets added

User · Answer

You can check console output  It prints error      The following assertion was thrown during performResize      Horizontal viewport was given unbounded height    Viewports expand in the cross axis to fill their container and constrain their children to match   their extent in the cross axis  In this case  a horizontal viewport was given an unlimited amount of   vertical space in which to expand    You need to add height constraint to your horizontal list  E g  wrap in Container with height   Container    height  44 0    child  ListView      scrollDirection  Axis horizontal      children   lt Widget gt         RaisedButton          onPressed  null          child  Text  Facebook                   Padding padding  EdgeInsets all 5 00          RaisedButton          onPressed  null          child  Text  Google

User · Answer

Also  you can try use CustomScrollView CustomScrollView        controller   scrollController        slivers   lt Widget gt           SliverList            delegate  SliverChildBuilderDelegate               BuildContext context  int index                  final OrderModel order    orders index                  return Container                  margin  const EdgeInsets symmetric                    vertical  8                                     child   buildOrderCard order  size  context                                               childCount   orders length                                  SliverToBoxAdapter            child   buildPreloader context                               Tip   buildPreloader return CircularProgressIndicator or Text In my case i want to show under ListView some widgets  Use Column does t work me  because widgets around ListView inside Column showing always  quot up quot  on the screen  like  quot position absolute quot  Sorry for my bad english

User · Answer

Try using Slivers  Container      child  CustomScrollView        slivers   lt Widget gt           SliverList            delegate  SliverChildListDelegate                              HeaderWidget  quot Header 1 quot                  HeaderWidget  quot Header 2 quot                  HeaderWidget  quot Header 3 quot                  HeaderWidget  quot Header 4 quot                                                   SliverList            delegate  SliverChildListDelegate                              BodyWidget Colors blue                 BodyWidget Colors red                 BodyWidget Colors green                 BodyWidget Colors orange                 BodyWidget Colors blue                 BodyWidget Colors red                                                  SliverGrid            gridDelegate  SliverGridDelegateWithFixedCrossAxisCount crossAxisCount  2             delegate  SliverChildListDelegate                              BodyWidget Colors blue                 BodyWidget Colors green                 BodyWidget Colors yellow                 BodyWidget Colors orange                 BodyWidget Colors blue                 BodyWidget Colors red

User · Answer

Here is a very simple method  There are a different ways to do it  like you can get it by Expanded  Sizedbox or Container and it should be used according to needs   Use Expanded   A widget that expands a child of a Row  Column  or Flex so that the child fills the available space  Expanded      child  ListView scrollDirection  Axis horizontal          children   lt Widget gt             OutlineButton onPressed  null                child  Text  quot Facebook quot               Padding padding  EdgeInsets all 5 00              OutlineButton onPressed  null                child  Text  quot Google quot               Padding padding  EdgeInsets all 5 00              OutlineButton onPressed  null                child  Text  quot Twitter quot                        Using an Expanded widget makes a child of a Row  Column  or Flex expand to fill the available space along the main axis  e g   horizontally for a Row or vertically for a Column    Use SizedBox   A box with a specified size  SizedBox      height  100      child  ListView scrollDirection  Axis horizontal          children   lt Widget gt             OutlineButton                color  Colors white                onPressed  null                child  Text  quot Amazon quot                          Padding padding  EdgeInsets all 5 00              OutlineButton onPressed  null                child  Text  quot Instagram quot               Padding padding  EdgeInsets all 5 00              OutlineButton onPressed  null                child  Text  quot SoundCloud quot                       If given a child  this widget forces its child to have a specific width and or height  assuming values are permitted by this widget s parent    Use Container   A convenience widget that combines common painting  positioning  and sizing widgets   Container      height  80 0      child  ListView scrollDirection  Axis horizontal          children   lt Widget gt             OutlineButton onPressed  null                child  Text  quot Shopify quot               Padding padding  EdgeInsets all 5 00              OutlineButton onPressed  null                child  Text  quot Yahoo quot               Padding padding  EdgeInsets all 5 00              OutlineButton onPressed  null                child  Text  quot LinkedIn quot                        The output to all three would be something like this

User · Answer

I have SingleChildScrollView as a parent  and one Column Widget and then List View Widget as last child   Adding these properties in List View Worked for me     physics  NeverScrollableScrollPhysics      shrinkWrap  true    scrollDirection  Axis vertical

User · Answer

I ve got this problem too  My solution is use Expanded widget to expand remain space   new Column    children   lt Widget gt       new Expanded        child  horizontalList

User · Answer

Column      children   lt Widget gt         Text  Leading text widget          ListView          shrinkWrap  true          physics  NeverScrollableScrollPhysics            children   lt Widget gt             ListTile              leading  Icon Icons map               title  Text  Map                           ListTile              leading  Icon Icons photo album               title  Text  Album                           ListTile              leading  Icon Icons phone               title  Text  Phone                                           Text  More widget                 just use shrinkWrap  true   physics  NeverScrollableScrollPhysics     properties in listView

User · Answer

Actually  when you read docs the ListView should be inside Expanded Widget so it can work     Widget build BuildContext context    return Scaffold      body  Column    children   lt Widget gt       Align        child  PayableWidget               Expanded        child   myListView context

User · Answer

You can use Flex and Flexible widgets  for example   Flex  direction  Axis vertical  children   lt Widget gt           other widgets         Flexible          flex  1          child  ListView builder          itemCount               itemBuilder   context  index

User · Answer

Expanded Widget increases it   s size as much as it can with the space available Since ListView essentially has an infinite height it will cause an error     Column    children   lt Widget gt       Flexible        child  ListView                      Here we should use Flexible widget as it will only take the space it required as Expanded take full screen even if there are not enough widgets to render on full screen

[flutter] How to add a ListView to a Column in Flutter?

Examples related to flutter

Examples related to listview

Examples related to dart

Examples related to flutter-layout

Examples related to flutter-widget