CODEWITHSUNDEEP
fluttertextoverflowmultilinelongtext
Al-Hashimy
Al-Hashimy

Reputation: 469

flutter text widget overflow and multiline

some times when I'm coding with flutter, in the Text widget when I use long text, some times I get overflow message, and some times the message work right and be in many lines, why that's happen with me? please explain to me how to avoid this problem.

Upvotes: 0

Views: 2330

Answers (1)

Hayden Zhou
Hayden Zhou

Reputation: 389

there are some key property in Text Widgt:

  softWrap // if overflow then can wrap new line
  overflow // if overflow the overed text style
  maxLines // max lines

and if the parent container of Text Widgt has a width less or eq than device width then text overflowed will wrap to multiple lines, or Text will throw overflow error if text is too long

give a width to parent container

for example:

 // overflow error
 Container(
 child: Column(
     children: <Widget>[
       Text("hellohellohellohellohellohellohellohellohe" +
          "llohellohellohellohellohellohellohellohellohe" +
         "llohellohellohellohellohellohello"),
       Text("dd")
     ],
   ),
)

give parent container fix width

// overflow will change to multiple lines, notice padding and margin's effect

 Container(
 width: 100,
 child: Column(
     children: <Widget>[
       Text("hellohellohellohellohellohellohellohellohe" +
          "llohellohellohellohellohellohellohellohellohe" +
         "llohellohellohellohellohellohello"),
       Text("dd")
     ],
   ),
)

or let Text fill parant container using Expended or Flexible

Expanded(
 child: Column(
     children: <Widget>[
       Text("hellohellohellohellohellohellohellohellohe" +
          "llohellohellohellohellohellohellohellohellohe" +
         "llohellohellohellohellohellohello"),
       Text("dd")
     ],
   ),
)



// or 

Flexible(
 child: Column(
     children: <Widget>[
       Text("hellohellohellohellohellohellohellohellohe" +
          "llohellohellohellohellohellohellohellohellohe" +
         "llohellohellohellohellohellohello"),
       Text("dd")
     ],
   ),
)

Upvotes: 3

Related Questions