Flutter ListView exception with unbounded height

Question

I'm developing a new Flutter app on Android Studio. One page of my app gets the information from a Future. With the future's result I'm creating a ListView.builder():

Here's the code:

Widget encabezados(BuildContext context, AsyncSnapshot snapshot)
  {
    ListView(
      children: <Widget>[
        new Card(
          elevation: 3,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(width: 0.0,),
              Category(
                backgroundColor: Colors.deepOrange,
                val: clientesacobrar.toString(),
                title: "Clientes a cobrar",
              ),
              SizedBox(width: 10.0,),
              Category(
                backgroundColor: Colors.blue,
                title: "Clientes cobrados",
                val: clientescobrados.toString(),
              ),
              SizedBox(width: 10.0,),
              Category(
                val: formatter.format(montoacobrar),
                //val: records.length.toString(),
                backgroundColor: Colors.green,
                title: "Monto a cobrar",
              )
            ],
          ),
        ),
        new ListView(
          shrinkWrap: true,
          scrollDirection: Axis.vertical,

          //elevation: 3,
            children: <Widget>[
              ListView.builder(

                  scrollDirection: Axis.vertical,
                  shrinkWrap: true,
                  //ShrinkWrappingViewport: true,
                  itemCount: records.length,
                  itemBuilder: (BuildContext context, int index) {
                    return records.isNotEmpty
                        ? Card(
                        child: Padding (
                          padding: const EdgeInsets.all(16.00),
                          child: Text(records[index].nombre),
                        )
                    )
                        : CircularProgressIndicator();
                  }
              )
            ],
        )
      ],
    );


  }

As you can see in the listviews widgets I'm using shrinkWrap set to true, because if I don't set this I get:

I/flutter (22634): The following assertion was thrown during performResize():
I/flutter (22634): Vertical viewport was given unbounded height.
I/flutter (22634): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter (22634): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter (22634): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter (22634): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter (22634): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter (22634): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter (22634): the height of the viewport to the sum of the heights of its children.

But if I set the shrinkwrap property I'm not able to scroll the page on my app

I have tried putting the ListView.builder() into: container widget , column widget, ListView widget but in the ListView.builder() I'm always asked to set the shrinkwrap property.

Answer 1

You need to constrain your parent widget so it knows where the bounds are.

For that scenario, wrapping in a Container alone, won’t have any effect unless you explicit constrain it (eg. by setting constrains or just giving it a explicit height).

Container(
    height: 200.0, // or whatever
    child: ListView(
  ....
  )
)

As an alternative, you can also set your inner ListView physics to NeverScrollableScrollPhysics() which will prevent any scroll from happening in the inner one and only the top scroll view will control scroll.

If all of that doesn't help, you may need to use a CustomScrollView which lets you nest multiple scroll views, basically a Sliver.

Answer 2

Try to add physics: NeverScrollableScrollPhysics() to inner ListView.

Answer 3

I had the same issue and found out that the main thing is using the physics: NeverScrollableScrollPhysics property inside of your ListView.Builder() like so:

body: Column(
    children: [
      _buildHeader(),
      Container(
        // height: 40,
        child: ListView.builder(
          physics: NeverScrollableScrollPhysics(), // <= This was the key for me
          shrinkWrap: true,
          itemCount: 1,
          itemBuilder: (_, i) {
            return _horizontalListView();
          },
        ),
      ),
    ],
  ),

I tested and It works with Column, Container, Expanded widgets as a parent widget.