How to add Listview inside a column in flutter?-CodePudding

I want to add a ListView inside a column. This is how I wrote the code.

Widget build(BuildContext context) {
return Container(
  child: SingleChildScrollView(
    physics: ScrollPhysics(),
    child: Column(
      children: [
        Text("Submitted date:"),
        Text("Due date:"),
            ListView.builder(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemCount: _productDetails.length,
                itemBuilder: (context, i) {
                  final product = _productDetails[i];
                  return ProductCard(product);
                }),
          ],
        ),
      ],
    ),
   ),
  );
 }
}

But it shows me this errors in the console.

'package:flutter/src/rendering/viewport.dart': Failed assertion: line 1860 pos 16: 'constraints.hasBoundedWidth': is not true.

and

RenderBox was not laid out: RenderShrinkWrappingViewport#5da43 relayoutBoundary=up22 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1930 pos 12: 'hasSize'

how can I fix this issues?

CodePudding user response：

In every ListView and GridView set physics: NeverScrollableScrollPhysics(). This disables the scroll on them and new you can only scroll on the SingleChildScrollView

As suggested aboves, you can do that by setting shrinkWrap: true, physics: NeverScrollableScrollPhysics(), but building a shrinkwrapped listview is more expensive than building a normal listview, I think it will be a good idea to use a map() on the list.

Column(
 children: <Widget>[
  ...itemList.map((item) {
   return Text(item);
  }).toList(),
 ],
),

and for the bound width error , Simply wrap your -Column in Expanded Widget: that way your Column will try to occupy available space in the parent Row.

CodePudding user response：

You should give the ListView.builder a height and a width. So just wrap it with SizedBox and give it a height and a width.

...
SizedBox(
  height: 100,
  width: double.infinity,
  child: ListView.builder(
    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    itemCount: _productDetails.length,
    itemBuilder: (context, i) {
      final product = _productDetails[i];
      return ProductCard(product);
    }),
  ),
),
...

CodePudding user response：


Container(
  height: 100,
  width: double.infinity,
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: _productDetails.length,
    itemBuilder: (context, i) {
      final product = _productDetails[i];
      return ProductCard(product);
    }),
  ),
),