Flutter ListView crashes inside column

Question

I need some help figuring out how I can render the ListView.

I have been following along a Flutter tutorial and I have had to stop because I can't get around this issue.

From what I can understand the ListView tries to take up an infinite amount of space which obviously crashes the app.

I have also come to understand the you can't have a ListView as a direct child of a Column/Row (I explain what I have tried to do about that below) https://flutter.io/docs/development/ui/layout/box-constraints#flex

Here's the code:

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        margin: EdgeInsets.all(10),
        child: ProductControl(_addProduct),
      ),
      ListView.builder(
        itemCount: _products.length,
        itemBuilder: (BuildContext context, int index) => Card(
              child: Column(
                children: <Widget>[
                  Image.asset('assets/food.jpg'),
                  Text(_products[index])
                ],
              ),
            ),
      )
    ],
  );
}

This is what is being said in the beginning of the stacktrace:

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

And this is taken from the bottom of the stacktrace:

flutter: The following RenderObject was being processed when the 
exception was fired:
flutter:   RenderViewport#cab62 NEEDS-LAYOUT NEEDS-PAINT
flutter:   creator: Viewport ← _ScrollableScope ← IgnorePointer- 
[GlobalKey#b71f9] ← Semantics ← Listener ←
flutter:   _GestureSemantics ← RawGestureDetector- 
[LabeledGlobalKey<RawGestureDetectorState>#d0420] ←
flutter:   _ScrollSemantics-[GlobalKey#02b55] ← Scrollable ← 
PrimaryScrollController ← ListView ← Column ← ⋯
flutter:   parentData: <none> (can use size)
flutter:   constraints: BoxConstraints(0.0<=w<=375.0, 0.0<=h<=Infinity)
flutter:   size: MISSING
flutter:   axisDirection: down
flutter:   crossAxisDirection: right
flutter:   offset: ScrollPositionWithSingleContext#892dc(offset: 0.0, 
range: null..null, viewport: null,
flutter:   ScrollableState, AlwaysScrollableScrollPhysics -> 
BouncingScrollPhysics, IdleScrollActivity#9455f,
flutter:   ScrollDirection.idle)
flutter:   anchor: 0.0
flutter: This RenderObject had the following descendants (showing up to 
depth 5):
flutter:   RenderSliverPadding#c8ab3 NEEDS-LAYOUT NEEDS-PAINT
flutter:     RenderSliverList#66f1b NEEDS-LAYOUT NEEDS-PAINT

I have tried to wrap the ListView.builder in an Expanded widget but that doesn't work for me. (Which is what is being done in the tutorial)

I tried to wrap the Column in an IntrinsicHeight Widget with no success.

The only way I manage to get around this issue is by wrapping the ListView.builder in a Container widget with a set height property. But having to use a Container with a set height does not seem right to me.

I can try to post the full code to recreate this if needed.

Answer 1

try using 'Expanded' instead of Container or other layouts:

Column(
        children: <Widget>[
          Expanded(
            //color: Colors.white,
            child:
            ListView.builder(
                itemCount: list.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    contentPadding: EdgeInsets.all(10.0),
                    title: new Text('title'),
                    subtitle: new Text('sub title'),
                    onTap: () => clicked(list[index]['url']),
                    onLongPress: () => downloadAndStoreFile(list[index]['url'],
                        list[index]['name'], list[index]['title']),
                  );
                }),
          )
        ],
),

Answer 2

Add this to ListView.Builder =

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      Container(
        margin: EdgeInsets.all(10),
        child: ProductControl(_addProduct),
      ),
      ListView.builder(
      physics: NeverScrollableScrollPhysics(), ///
      shrinkWrap: true, ///
      scrollDirection: Axis.vertical, ///
        itemCount: _products.length,
        itemBuilder: (BuildContext context, int index) => Card(
              child: Column(
                children: <Widget>[
                  Image.asset('assets/food.jpg'),
                  Text(_products[index])
                ],
              ),
            ),
      )
    ],
  );
}