How do I text wrap with flutter text widget?

Question

I have a RenderFlex overflowed by 72 pixels on the right issue

Caused by the first Text() widget, when users have really long texts. I even tried to use Textoverflow, but that didn't do anything either.

So I tried to wrap it with a Flexible as suggested here Flutter- wrapping text however it's not working. Any idea what I'm doing wrong?

Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                widget.p.description,
                style: TextStyle(
                  fontWeight: FontWeight.w800,
                ),
                overflow: TextOverflow.ellipsis,
              ),
              SizedBox(height: 4.0),
              Row(
                children: [
                  Text(
                    timeago.format(widget.p.timestamp.toDate()),
                    style: TextStyle(),
                  ),
                  SizedBox(width: 3.0),
                  StreamBuilder(
                    stream: lRef
                        .where('pId', isEqualTo: widget.p.pId)
                        .snapshots(),
                    builder:
                        (context, AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (snapshot.hasData) {
                        QuerySnapshot snap = snapshot.data;
                        List<DocumentSnapshot> docs = snap.docs;
                        return buildCount(context, docs?.length ?? 0);
                      } else {
                        return buildCount1(context, 0);
                      }
                    },
                  ),
                ],
              ),
            ],
          ),

Prodromos Sarakinou · Accepted Answer · 2022-03-12T23:23:23.883

you have to wrap your text into a SizedBox and then you can also set multiple lines by editing the maxLines property of the Text widget:

Example:

SizedBox(
    //You can define in as your screen's size width,
    //or you can choose a double 
    //ex:
    //width: 100,
    width: MediaQuery.of(context).size.width, //this is the total width of your screen
    child: Text(
      widget.p.description,
      style: TextStyle(
        fontWeight: FontWeight.w800,
      ),
      overflow: TextOverflow.ellipsis,
    ),
  );

Also you can define how many lines the text should be as you can see below:

SizedBox(
    //You can define in as your screen's size width,
    //or you can choose a double 
    //ex:
    //width: 100,
    width: MediaQuery.of(context).size.width, //this is the total width of your screen
    child: Text(
      widget.p.description,
      maxLines: 5,
      style: TextStyle(
        fontWeight: FontWeight.w800,
      ),
      overflow: TextOverflow.ellipsis,
    ),
  );

Oh perfect, this works. Thanks! – Spider Mar 13 '22 at 01:29 — Spider, Mar 13 '22 at 01:29

score 2 · Answer 2 · answered Jul 07 '22 at 07:40

You can also use ConstrainedBox to set max lenght of text, so it will by multiline if it needed:

ConstrainedBox(
  constraints: BoxConstraints(maxWidth: 300),
  child: Text('Any loooooooong text.............................',)
),

Look this official documentation if you interest: ConstrainedBox class

How do I text wrap with flutter text widget?

2 Answers2