CODEWITHSUNDEEP
flutter
karan vs
karan vs

Reputation: 3364

How to put two ListView in a column?

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 ?

Upvotes: 33

Views: 26356

Answers (4)

Rahman Rezaee
Rahman Rezaee

Reputation: 2165

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

Upvotes: 2

CopsOnRoad
CopsOnRoad

Reputation: 267554

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)

Upvotes: 22

Yousef Gamal
Yousef Gamal

Reputation: 1066

Wrapping ListView in a fixed size Container worked for me.

Upvotes: 2

Collin Jackson
Collin Jackson

Reputation: 116728

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

Upvotes: 51

Related Questions