Search code examples
flutterdart

Overflowing text does not wrap

I am trying to display a very long text but it doesn't wrap to next line. I have searched for the solution on the internet and found that Flexible element could resolve it, but when I try to put it anywhere, all the elements just disappear. I couldn't fix it so I am here to ask your help.

enter image description here enter image description here

List<Widget> children = payload['data'].map<Widget>((element) {
    return Column(
      children: [
        Row(children: [
          Text(
              element['display_name'] +
                  ' - ' +
                  (element['dist'].toDouble() / 1000).toStringAsFixed(2) +
                  'km',
              style: TextStyle(fontWeight: FontWeight.w800, fontSize: 16))
        ]),
        Row(children: [
          Text('test')
        ]),
        Row(children: [
          Text(
              'loooooooong text, very long indeed loooooooong text, very long indeed loooooooong text, very long indeed loooooooong text, very long indeed loooooooong text, very long indeed loooooooong text, very long indeed ')
        ]),
        Divider(height: 12, thickness: 2)
      ],
    );
  }).toList();

EDIT:

@Ravindra S. Patil's answer solved the issue, now everything wraps nice and clean.

enter image description here

Solution

  • Try to add your Text inside Flex or Expanded like below:

    Expanded(
   child: Text(
          'loooooooong text, very long indeed loooooooong text, very long indeed loooooooong text, very long indeed loooooooong text, very long indeed loooooooong text, very long indeed loooooooong text, very long indeed ',
 ),
),