Text wrap in row widgets

Question

I have nested rows using this code:

    Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Row(
        children: <Widget>[
          Icon(Icons.fiber_manual_record),
          Text(
            'the text in the first row',
          ),
        ],
      ),
      Row(
        children: <Widget>[
          Icon(Icons.fiber_manual_record),
          Text(
            'the text in the second row',
          ),
        ],
      ),
    ],
  )

When there is space, I want the rows to be side by side (current behavior):

Currently, when it overflows, the text gets cut off like this:

Is there a way to force the second row onto a new line when there's no space, so it looks like this?

Answer 1

Try this! It worked for me.

new Flexible(child: new Text('Auto wrap'))

Answer 2

Something on these lines will work:

Wrap(
      direction: Axis.horizontal,
      children: <Widget>[
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'the text ',
            ),
          ],
        ),
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'more the text in the first row',
            ),
          ],
        ),
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'the text in the second row',
            ),
          ],
        ),
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'more text in the second row',
            ),
          ],
        ),
        Wrap(
          children: <Widget>[
            Icon(Icons.fiber_manual_record),
            Text(
              'the text in the third row',
            ),
          ],
        ),
      ],
    )

Answer 3

            Row(
          children: [
            Checkbox(
              onChanged: (bool value) {},
              value: true,
            ),
            Flexible(
              child: RichText(
                strutStyle: StrutStyle(height: 1.4),
                softWrap: true,
                text: TextSpan(style: TextStyle(fontSize: 12, color: ColorUtil.hexToColor("#999999")), children: <InlineSpan>[
                  TextSpan(text: "ฉันได้อ่านและยอมรับ "),
                  TextSpan(text: "ฉันได้อ่านและยอมรับ "),
                  TextSpan(
                      text: "สัญญาการให้บริการ & ข้อตกลงความเป็นส่วนตัว",
                      style: TextStyle(color: ColorUtil.hexToColor("#666666")),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          Navigator.pushNamed(context, "/profile/terms_policy");
                        }),
                ]),
              ),
            )
          ],
        ),

this work for me. Wrap with Flexible

Answer 4

If you wrapped Text widget with Padding adding Flexible around Padding do the trick.

          Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(
                  Icons.check,
                  color: Colors.green,
                ),
                SizedBox(
                  width: 16,
                ),
                Flexible(
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(0, 8, 0, 0),
                    child: Text(
                      'Some text',
                      style: TextStyle(
                          fontSize: 18, color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),