Rows as a Wrap's children. How to do it?

Question

I need to wrap the few Rows with Wrap. The reason is to make sure that any row is not overflowing.

Here's my code:

Wrap(
  children: [
    Row(
      children: [
        Icon(
          Icons.cake,
        ),
        const SizedBox(width: 3),
        Text(
          'variable text',
        ),
        Text(
          'variable text',
        ),
      ],
    ),
    Row(
      children: [
        Icon(
          Icons.flight,
        ),
        const SizedBox(width: 3),
        Text(
          'variable text',
        ),
      ],
    ),
    Row(
      children: [
        Icon(
          Icons.transgender,
        ),
        const SizedBox(width: 3),
        Text(
          'variable text',
        ),
      ],
    ),
  ],
),

And it doesn't act like a Wrap, All children are in column, instead of one after another.

As I can imagine the problem is with using the Raw widget inside. I am doing this because I need to have Icon just before the Text, as like prefixIcon. So I place Icon and Text in one Row.

Can you suggest me any way how can Row be a child of the Wrap? Or maybe I can solve my problem in other way?

Thank you in advance.

Answer 1

A horizontal Wrap will constrain its children to be at most as wide as the Wrap itself. By default, a Row with bounded width will take up the entire width allowed. To override this default, you can give the Row mainAxisSize: MainAxisSize.min.

Wrap(
  children: [
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // ...
      ],
    ),
    // More rows...
  ],
),