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.

Answer 1

  Column(
    children: <Widget>[
      Text('Leading text widget'),
      ListView(
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        children: <Widget>[
          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

Answer 2

Use Expanded to fit the listview in the column

Column(
  children: <Widget>[
     Text('Data'),
     Expanded(
      child: ListView()
    )
  ],
)

Answer 3

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: <Widget>[
    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.

Answer 4

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(...),
       )
     ],
   )
   

---

2. If you want to limit your ListView to certain height, you can 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, // use it
       )
     ],
   )
   

Answer 5

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: <Widget>[
      RaisedButton(
        onPressed: null,
        child: Text("Facebook"),
      ),
      Padding(padding: EdgeInsets.all(5.00)),
      RaisedButton(
        onPressed: null,
        child: Text("Google"),
      )
    ],
  ),
)

Answer 6

I've got this problem too. My solution is use Expanded widget to expand remain space.

new Column(
  children: <Widget>[
    new Expanded(
      child: horizontalList,
    )
  ],
);