Flutter: How to scroll a list inside of Wrap widget?

Question

I am using wrap to display some images, the direction of Wrap is set to Axis.horizontal . When it runs out of horizontal space, it is creating new row. As long as there is enough space vertically, everything is getting displayed as it should. But the moment there are a lot of images, it is giving a Bottom Overflow.

I tried wrapping the Wrap widget inside SingleChildScrollView , ListView and Expanded but nothing seems to work. Here is my code:

@override
  Widget build(BuildContext context) {
    return Wrap(
      direction: Axis.horizontal,
      spacing: 8,
      runSpacing: 12,
      children: [
        _buildImageCard('abc'),
        _buildImageCard('def'),
        _buildImageCard('ghi'),
        _buildImageCard('jkl'),
      ],
    );
  }
}

and the _buildImageCard

Widget _buildImageCard(String imagePath) {
    return SizedBox(
      width: 500,
      height: 400,
      child: Card(
        elevation: 5,
      ),
    );
  }

The result is:

Answer 1

try SingleChildScrollView

  SingleChildScrollView(
    scrollDirection: Axis.vertical,
    child: Wrap(
      direction: Axis.horizontal,
      spacing: 8,
      runSpacing: 12,
      children: [
        _buildImageCard('abc'),
        _buildImageCard('def'),
        _buildImageCard('ghi'),
        _buildImageCard('jkl'),
        _buildImageCard('jkl'),
        _buildImageCard('jkl'),
        _buildImageCard('jkl'),
      ],
    ),
  );

Answer 2

I met the same problem and I can solve it. The problem is SingleChildScrollView requires the contstraints in which it will scroll. So you need to specify them:

SizedBox(
  height: 100.0,
  child: SingleChildScrollView(
    child: Wrap(
      children: [
      ],
    ),
  ),
)

Answer 3

@bambinoua is right. You need to have constraints for SingleChildScrollView to work. So for example having infinity constraint for height won't work for vertical SingleChildScrollView . You can check the constraints being passed to it using LayoutBuilder :

LayoutBuilder(
    builder: (context, constraints){
        print('Constraints for SingleChildScrollView : $constraints');
        return SingleChildScrollView(...);
    },
)

If it's something like BoxConstraints(0.0<=w<=720, 0.0<=h<=Infinity) then you need to inspect your widget tree to find the parent causing this. In my case it was a column and I solved it by wrapping the SingleChildScrollView in an Expanded widget:

Column(
    children: [
        ...
        Expanded(
            child: SingleChildScrollView(...)
        )
    ]
)

Answer 4

for horizontal scrolling try this.

 Row(
  children: [
    Expanded(
        child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Wrap(direction: Axis.horizontal,
            children: [
              // childs here
            ],)))
  ],
);