The mainAxisSize property of the Row inside the ListViewBuilder or ListView does not work

Question

The mainAxisSize property of the Row inside the ListView.builder or ListView does not work.

return ListView.builder(
  itemCount: 5,
  shrinkWrap: true,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.grey,
      margin: const EdgeInsets.all(2),
      child: Row(
        mainAxisSize: MainAxisSize.min, // not working
        children: [
          Text(index.toString()),
        ],
      ),
    );
  },
);

I expected the MainAxisSize.min property to shorten the Row, but it did not.

Answer 1

ListView always make the children to cover the parent width. So as you requirement you can remove the Container over Row and wrap the same Container with Text as following..

ListView.builder(
  itemCount: 5,
  shrinkWrap: true,
  itemBuilder: (context, index) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
            color: Colors.grey,
            margin: const EdgeInsets.all(2),child: Text(index.toString())),
      ],
    );
  },
)