Combine text + icon into a widget that will word wrap

Question

I'm trying to create a help page for my app and I'd like to simply write

"Press {ICON} to refresh scores (or enable auto-refresh in the settings drawer)"

Where {ICON} is Icons.refresh

and have the whole thing word wrap if it does not fit on the screen. If it were all text I would simple wrap it in a Flexible widget or something similar and it would be fine. At the moment I have it in a row

At the moment I have it in a row, which causes a RenderFlex overflow (see image).

Row(children: [Text("Press "), Icon(Icons.refresh), Text(" to refresh scores (or enable auto-refresh in the settings drawer)")])

Any ideas how I can include an icon in a chain of text and still have it word wrap when required?

Answer 1

You Can use Wrap Widget instead of Row

Wrap(children: [
            Text("Press "),
            Icon(Icons.refresh),
            Text(
            " to refresh scores or enable auto-refresh"),
            Text(' in the settings drawer.........'),
          ]),