Flutter Why Wrap doesn't work when surrounding rows?

Question

Im trying to wrap some content in flutter without success. I found i can't Wrap Rows like i do with Chips or Text widgets. Anybody knows why?

These are three sets of Rows , each one with an Icon and a Text, that sits side by side. But in smaller screens it overflows, because there is not enough space (width).

I'd like that the last set of rows (one icon and a label) jumps to next line when the space in current line is over.

Thank you

I have tried to Wrap the Rows with Container, but didn't work.

    Row(
    children: <Widget>[
        Wrap(
        children: <Widget>[
            Row(
            children: <Widget>[
                Text('long text 1'),
                Text('an icon here'),
            ],
            ),
            Row(
            children: <Widget>[
                Text('Anoter Label'),
                Text('Anoter icon'),
            ],
            ),
        // I want this row to jump to next line when there is not space in 
        // current line 
        Row(
            children: <Widget>[
                Text('More Text'),
                Text('Moire icon'),
            ],
            ),
        ],
        )
    ],
    ),

Flutter layout ok large screen

Overflow on smaller screens

When i'm on smaller screens, the image with caption resizes and fits well. But the labels and icons above the image overflow. So id like that the last set of icon/ label the one with $ simbol e price, jumps to a new row. I can wrap when using only text widgets and it works, but then i loose the alignment i have on rows like mainAxisAlignment: MainAxisAlignment.spaceAround

Answer 1

The width of the Row is determined by the mainAxisSize property. If the mainAxisSize property is MainAxisSize.max, then the width of the Row is the max width of the incoming constraints. If the mainAxisSize property is MainAxisSize.min, then the width of the Row is the sum of widths of the children subject to the incoming constraints.

To resolve your problem just set the mainAxisSize property to MainAxisSize.min on your Row Widget

Answer 2

Updated: this is somehow a solution

Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Expanded(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.alarm),
              Text('60 Minutes'),
            ],
          ),
        ),
        Expanded(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.shop),
              Text('Lorem ipsumssssssssssssssssssssssssssssssss'),
            ],
          ),
        ),
        Expanded(
          child: Wrap(
            children: <Widget>[
              Icon(Icons.attach_money),
              Text('Very expensive'),
            ],
          ),
        )
      ],
    );

...

You can do this

Row(
          children: <Widget>[
            Expanded(
              child: Wrap(
                children: <Widget>[
                  Text('long text 1'),
                  Text('an icon here'),
                  Text('Anoter Label'),
                  Text('Anoter icon'),
                  // I want this row to jump to next line when there is not space in
                  // current line
                  Text('More Text'),
                  Text('Moire icon'),
                ],
              ),
            )
          ],
        ),

or this

 Row(
          children: <Widget>[
            Expanded(
              child: Wrap(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Text('long text 1'),
                      Text('an icon here'),
                    ],
                  ),
                  Row(
                    children: <Widget>[
                      Text('Anoter Label'),
                      Text('Anoter icon'),
                    ],
                  ),
                  // I want this row to jump to next line when there is not space in
                  // current line
                  Row(
                    children: <Widget>[
                      Text('More Text'),
                      Text('Moire icon'),
                    ],
                  ),
                ],
              ),
            )
          ],
        ),