How to put two ListView in a column?

Question

I have two ListView with ExpansionTiles that I would like place one after another inside a column which has some other Widgets first inside it. This is my code,

 @override  Widget build(BuildContext context) { // TODO: implement build return new Scaffold(     appBar: new AppBar(         title: new Text("Project Details"),         backgroundColor: Colors.blue[800]),     body:      new Padding(padding: new EdgeInsets.all(10.0),       child: new Column(children: <Widget>[         new Text(project.name, style: new TextStyle(             fontWeight: FontWeight.bold,             color: Colors.blue[700],             fontSize: 15.0         )),         new RowMaker("District", project.district),         new RowMaker("River", project.river),         new RowMaker("Tac Approved", project.tacApproved),         new RowMaker("Func Sanctioned", project.fundSanctioned),         new Row(children: <Widget>[           new FlatButton(onPressed: null,             color: Colors.blue,             child: new Text("Gallery"),             textColor: Colors.white,),           new FlatButton(onPressed: null,               color: Colors.blue,               child: new Text("Upload Images"),               textColor: Colors.white),           new FlatButton(               onPressed: null,               color: Colors.blue,               child: new Text("Update"),               textColor: Colors.white),         ],),         new ListView(children: getSfListTiles()),         new ListView(children: getWorkStatementTiles())       ]         ,       )       ,     ) ); 

}

Using this, widget body shows blank.If I set ListView directly as body, they show up fine. Am I missing something ?

Answer 1

Try wrapping your ListView in Expanded. It doesn't have an intrinsic height so you need to give it one.

Answer 2

You need to provide constrained height to be able to put ListView inside Column. There are many ways of doing it, I am listing few here.

1. Use Expanded for both the list

   Column(   children: <Widget>[     Expanded(child: _list1()),     Expanded(child: _list2()),   ], ) 

2. Give one Expanded and other SizedBox

   Column(   children: <Widget>[     Expanded(child: _list1()),     SizedBox(height: 200, child: _list2()),   ], ) 

3. Use SizedBox for both of them.

   Column(   children: <Widget>[     SizedBox(height: 200, child: _list1()),     SizedBox(height: 200, child: _list2()),   ], ) 

4. Use Flexible and you can change flex property in it, just like Expanded

   Column(   children: <Widget>[     Flexible(child: _list1()),     Flexible(child: _list2()),   ], ) 

5. If you ListView is short enough to be able to fit in Column, use

   ListView(shrinkWrap: true)