如何使用颤振文本小部件进行文本换行？

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);
                      }
                    },
                  ),
                ],
              ),
            ],
          ),

Answer 1

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, ), );

Answer 2

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