How to add a ListView to a Column in Flutter? How to add a ListView to a Column in Flutter? dart dart

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.


  1. If you want to allow ListView to take up all remaining space inside Column use Expanded.

    Column(  children: <Widget>[    Expanded(      child: ListView(...),    )  ],)

  1. If you want to limit your ListView to certain height, you can use SizedBox.

    Column(  children: <Widget>[    SizedBox(      height: 200, // constrain height      child: ListView(),    )  ],)

  1. If your ListView is small, you may try shrinkWrap 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"),      )    ],  ),)