Is there a way to stretch items in the cross axis of Flutter Wrap widget?

Question

I'm using the Wrap widget to lay out a list of items dynamically. However, I've encountered an issue when it comes to stretching the items. It appears that the Wrap widget doesn't provide a straightforward way to stretch items along the cross axis, similar to how you can use crossAxisAlignment with the Row or Column widgets.

Are there any workarounds or alternative approaches I can use to achieve the desired stretching effect?

Thank you!

Answer 1

Have you considered GridView?

For your use case, GridView.extent, in particular, should be the one you are looking for. It allows you to creates a dynamic Grid layout of widget items in the form of tiles stretching to maximum cross-axis extent. This feature results in responsive layout.

Here's the example usage of GridView.extent

GridView.extent(
    physics: const BouncingScrollPhysics(),
    mainAxisSpacing: 8.0,
    crossAxisSpacing: 16.0,
    maxCrossAxisExtent: 240.0,
    primary: false,
    padding: const EdgeInsets.symmetric(8.0),
    children: widgetItems,
 ),

In the example above, for vertical grid with grid width of 600, the maxCrossAxisExtend value of 240, will result in grid of 3 columns with 200 width each, filling the entire 600 cross axis width.

Hope it helps!