How to add a ListView to a Column in Flutter?
I've got this problem too. My solution is use Expanded
widget to expand remain space.
Column( children: <Widget>[ Expanded( child: horizontalList, ) ],);
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 insideColumn
useExpanded
.Column( children: <Widget>[ Expanded( child: ListView(...), ) ],)
If you want to limit your
ListView
to certainheight
, you can useSizedBox
.Column( children: <Widget>[ SizedBox( height: 200, // constrain height child: ListView(), ) ],)
If your
ListView
is small, you may tryshrinkWrap
property on it.Column( children: <Widget>[ ListView( shrinkWrap: true, // use it ) ],)
You can check console output. It prints error:
The following assertion was thrown during performResize():The horizontal viewport was given unbounded height.Viewports expand in the cross axis to fill their container and constrain their children to matchtheir extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount ofvertical space in which to expand.
You need to add a height constraint to your horizontal list. E.g. wrap in Container with height:
Container( height: 44.0, child: ListView( scrollDirection: Axis.horizontal, children: <Widget>[ RaisedButton( onPressed: null, child: Text("Facebook"), ), Padding(padding: EdgeInsets.all(5.00)), RaisedButton( onPressed: null, child: Text("Google"), ) ], ),)