flutter - Wrap class not wrapping widgets

Question

I am dynamically generating Chip widgets but the Wrap class is not wrapping overflowing widgets to next line.

Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        physics: ClampingScrollPhysics(),
        padding: const EdgeInsets.symmetric(
          horizontal: 12,
        ),
        children: [
          Row(
            children: [
              Wrap(
                spacing: 5,
                children: _getChips(), // gets a list of chips
              ),
            ],
          ),
        ],
      ),
    );

But I get this error in console

The following assertion was thrown during layout:
A RenderFlex overflowed by 94 pixels on the right.

The overflowing RenderFlex has an orientation of Axis.horizontal.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

Am I doing something wrong?

question from:https://stackoverflow.com/questions/65602123/wrap-class-not-wrapping-widgets

Answer 1

Try removing Row widget. Wrap with default direction is an alternative to Row that moves child widgets to the next line if there is no enough space.

Also, I'd recommend using SingleChildScrollView as a container instead of ListView to get scrolling behavior.

return Scaffold(
  body: SingleChildScrollView(
    physics: ClampingScrollPhysics(),
    child: Padding(
      padding: const EdgeInsets.symmetric(
        horizontal: 12,
      ),
      child: Wrap(
        spacing: 5,
        children: _getChips(), // gets a list of chips
      ),
    ),
  ),
);