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 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( //        <-- Use Expanded 
         child: ListView(...),
       )
     ],
   )
   

---

2. If you want to limit your ListView to a certain height, use SizedBox.

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

---

3. If your ListView is small, you may try shrinkWrap property on it.

   Column(
     children: <Widget>[
       ListView(
         shrinkWrap: true, // Set this
       )
     ],
   )
   

---

4. If you want to make ListView to as small as it can be, use Flexible with ListView.shrinkWrap:

   Column(
     children: <Widget>[
       Flexible( //        <-- Use Flexible 
         child: ListView(
           shrinkWrap: true, // and set this
         ),
       )
     ],
   )
   

Expanded Widget increases its size as much as it can with the space available Since ListView essentially has an infinite height it will cause an error.

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

Here we should use the 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.

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 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 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"),
      )
    ],
  ),
)