Why does my text doesn't wrap propperly in flutter web mobile?

Question

I'm having a problem with the text wrapping, I have a Listview and three RadioListTiles to represent three options, the text in the title has different lengths, so I cant assign a height to them and my idea was to let them expand as long as they need, in desktop it works fine but in mobile it doesn't, taking space from the next option.

But the problem lays in using the mobile version, the same widget with the same code runs differently and results in this

I have made a stripped down version of the code... But it's just a Listview with 1 divider, 1 RadioListTile and 1 Divider to make overflow visible.

By the way this is not caught by the widget inspector, and its not throwing any errors.

      height: 550,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          SizedBox(
            height: 50, //dejar 1.0.h
          ),
          SizedBox(
            height: 400,
            width: 200,
            child: ListView(
              children: [
                Divider(
                  color: Colors.black,
                  thickness: 2,
                ),
                Padding(
                  padding: const EdgeInsets.all(2.0),
                  child: RadioListTile(
                    title: Text(
                      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
                      style: TextStyle(fontSize: 12, color: Color(0xFF234270)),
                    ),
                    value: 0,
                    groupValue: 0,
                    onChanged: null,
                  ),
                ),
                Divider(
                  color: Colors.black,
                  thickness: 2,
                ),  
                SizedBox(
                  height: 50,
                )
              ],
            ),
          ),
        ],
      ),
    );

Aravinthan Subramanian · Answer 1 · 2021-06-25T17:13:50.150

0

If I understood the problem correctly; try this -->

title: Text("Lorem ipsum dolor sit amet...",
       style: TextStyle(
                 fontSize: 12,
                 color: Color(0xFF234270)),
                 overflow: TextOverflow.() <---pick the option you want

I hope you may aware about the textoverflow if not, check out the documentation (https://api.flutter.dev/flutter/rendering/TextOverflow-class.html)

If this is not what you are looking for, then check out this (Flutter- wrapping text)

Reply back if this answer is helpful and this is what you are looking for to find the solution or share that how did you solved the issue in anyother way.

EDITED

So, in this case you can try with flexible or try to add max number of lines to show.

Or else go ahead with different screen sizes like mobile screen and bigger screen by using mediaquery.

Otherwise check for the margin, padding space of the container. Which means you are using the entire mobile screen width to render the text or not. So, you can occupy the remaining empty space to stretch the text according to width of the screen.

edited Jun 25 '21 at 17:13

answered Jun 24 '21 at 16:44

Aravinthan Subramanian

88
2
2
11

mmm, that isn't what I'm looking for. The text should be all render, my problem is that the container doesn't stretch enough to fit the text inside it. I've found that if I use an expanded inside a column there's no such problem, but, I cant made that Column scrollable... And its a possibility that the three options don't fit inside the screen... I'd like to point out that on the desktop settings this works fine... But even if I change the device from my desktop's chrome I get this weird behaviour – Pen Drive Jun 25 '21 at 15:13
I'm also noting right now that the text doesn't responds to alignment inside scrollable widgets... – Pen Drive Jun 25 '21 at 15:21
Try to wrap the three points within listview.builder(). So this may help you to achieve scroll feature. – Aravinthan Subramanian Jun 27 '21 at 02:57
It seems to be solved changing my branch to dev. So maybe is a flutter problem. I will test it out and look how it ends up working – Pen Drive Jun 27 '21 at 15:40

Why does my text doesn't wrap propperly in flutter web mobile?

1 Answers1