Flutter - Wrap text on overflow, like insert ellipsis or fade Flutter - Wrap text on overflow, like insert ellipsis or fade dart dart

Flutter - Wrap text on overflow, like insert ellipsis or fade


You should wrap your Container in a Flexible to let your Row know that it's ok for the Container to be narrower than its intrinsic width. Expanded will also work.

screenshot

Flexible(  child: new Container(    padding: new EdgeInsets.only(right: 13.0),    child: new Text(      'Text largeeeeeeeeeeeeeeeeeeeeeee',      overflow: TextOverflow.ellipsis,      style: new TextStyle(        fontSize: 13.0,        fontFamily: 'Roboto',        color: new Color(0xFF212121),        fontWeight: FontWeight.bold,      ),    ),  ),),


Using Ellipsis

Text(  "This is a long text",  overflow: TextOverflow.ellipsis,),

enter image description here


Using Fade

Text(  "This is a long text",  overflow: TextOverflow.fade,  maxLines: 1,  softWrap: false,),

enter image description here


Using Clip

Text(  "This is a long text",  overflow: TextOverflow.clip,  maxLines: 1,  softWrap: false,),

enter image description here


Note:

If you are using Text inside a Row, you can put above Text inside Expanded like:

Expanded(  child: AboveText(),)


You can use this code snipped to show text with ellipsis

Text(    "Introduction to Very very very long text",    maxLines: 1,    overflow: TextOverflow.ellipsis,    softWrap: false,    style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),),