fluttertextoverflowmultilinelongtext

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.


Solution

  • 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")
         ],
       ),
    )