Can't get text to wrap

Question

I have a structure like this in one place in my app:

Expanded(child: InkWell(
    onTap: () => doSomething(),
    child: Container(
        child: Row(children: [
            Padding( child: Icon(Icons.warning, size: 22), padding: EdgeInsets.fromLTRB(0, 0, 8, 0), ),
            Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                Text('this is the very long text that doesnt fit on the screen and should be wrapped instead of overflowing'),
                Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.max,
                    children: _buildChildren(context)
                )
            ])
        ]),
        decoration: BoxDecoration(border: Border.all(color: appTheme.style.errorColor), borderRadius: BorderRadius.all(Radius.circular(8))),
        padding: EdgeInsets.fromLTRB(8, 4, 8, 4),
        margin: EdgeInsets.fromLTRB(4, 2, 4, 2),
    ))
)

I've tried a lot of variations of wrapping the Textwith various kinds of combinations of Flexible, Expanded, Container, FittedBox, Row, etc. etc. But none work - some make the text disappear and some don't do anything, while others give me a layout error... Short of using a fixed-width Container I haven't found a way around this - is it even possible without resorting to fixed widths?

Have you checked this out? https://stackoverflow.com/questions/54634093/flutter-wrap-text-instead-of-overflow?rq=1 — Treewallie, Aug 01 '19 at 13:29
@Treewallie I did, and the accepted answer didn't work for me. However, [another answer](https://stackoverflow.com/a/54634438/930640) pointed me in the right direction! Turns out I needed to wrap the `Column` in a `Flexible` - not the `Text`! — Magnus, Aug 01 '19 at 14:02

score 0 · Accepted Answer · answered Sep 07 '19 at 09:37

I'll just go ahead and answer my own question, as this just happened to me again and I had to go back here to remember how to solve it.

While it seems more intuitive to wrap the Text in a Flexible, the actual solution is to wrap the Column in a Flexible instead:

Expanded(child: InkWell(
    onTap: () => doSomething(),
    child: Container(
        child: Row(children: [
            Padding( child: Icon(Icons.warning, size: 22), padding: EdgeInsets.fromLTRB(0, 0, 8, 0), ),
            Flexible(  // <--- THIS IS THE MISSING PIECE
                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
                    Text('this is the very long text that doesnt fit on the screen and should be wrapped instead of overflowing'),
                    Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        mainAxisSize: MainAxisSize.max,
                        children: _buildChildren(context)
                    )
                ]) 
            )
        ]),
        decoration: BoxDecoration(border: Border.all(color: appTheme.style.errorColor), borderRadius: BorderRadius.all(Radius.circular(8))),
        padding: EdgeInsets.fromLTRB(8, 4, 8, 4),
        margin: EdgeInsets.fromLTRB(4, 2, 4, 2),
    ))
)

Can't get text to wrap

1 Answers1