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 ?

score 49 · Accepted Answer · answered Jun 23 '17 at 16:02

49

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

answered Jun 23 '17 at 16:02

Collin Jackson

110,240
31
221
152

How could I wrap the whole body inside a Scrollview ? – karan vs Jun 29 '17 at 09:28
You should probably ask that as a separate question; it depends how much content you have. If it's a lot, consider a CustomScrollView, if it's not much, SingleChildScrollView and change ListView to Column. – Collin Jackson Jun 29 '17 at 14:26
using either CustomScrollView or SingleChildScrollView gives a black background with large text for child widgets. – karan vs Jun 30 '17 at 07:37
the solution I am looking for is that the two ListView (contains ExpansionTile ) to takes up only required space when not expanded but when expanded it should stretch to its max height and the problem I am experiencing here is that the two ListView inside the expanded is taking up whole space equally divided and when expanded , they expand within this area. – karan vs Jun 30 '17 at 07:44
1

The solution that worked in using CustomScrollView, https://gist.github.com/karanvs/44599464f72988b138f5bc783f423b07 – karan vs Jul 07 '17 at 07:24

score 20 · Answer 2 · answered Aug 15 '19 at 08:49

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.

Use Expanded for both the list

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

Give one Expanded and other SizedBox

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

Use SizedBox for both of them.

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

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

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

If you ListView is short enough to be able to fit in Column, use
```
ListView(shrinkWrap: true)
```

score 2 · Answer 3 · answered Jan 01 '19 at 19:27

2

Wrapping ListView in a fixed size Container worked for me.

answered Jan 01 '19 at 19:27

Yousef Gamal

1,026
2
17
32

score 1 · Answer 4 · answered Jan 10 '22 at 21:00

check the link instead listview use sliverlist for better performance

Tuturial and full Example

 return CustomScrollView(
            slivers: [
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) => Container(
                      height: 100,
                      color: Colors.red,
                      child: Text("List 1 item${index}")),
                  childCount: 5,
                ),
              ),
              SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) => Container(
                      height: 100,
                      color: Colors.blue,
                      child: Text("List 2 item${index}")),
                  childCount: 5,
                ),
              ),
            ],
          );

How to put two ListView in a column?

4 Answers4

Linked