How to Wrap Text On Overflow In Flutter ?

How to Wrap Text On Overflow In Flutter ?

While designing and developing a mobile application sometimes the user may get a long text in response. So, in this article, we will go through how to wrap Text on overflow in Flutter?

How to Wrap Text On Overflow In Flutter?

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

Consider a code snippet like the below:

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

We will get output like the below:

Using ellipsis

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

We will get output like the below:

Using Fade

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

As a result, we will get output like the below:

Using Clip

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

We will get output like the below:

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

Expanded(
  child: AboveText(),
)

You can also use this code snippet to show text with an ellipsis:

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

You can also do it like:

Expanded(
   child: Text(
   'Text',
   overflow: TextOverflow.ellipsis,
   maxLines: 1
   )
)

After that wrap your Row Widget or Column Widget in the Expanded Widget

Text( ‘your long text here’, overflow: TextOverflow.fade, maxLines: 1, softWrap: false, style: Theme.of(context).textTheme.body1, )

You can also wrap your widget with a Flexible Widget. Later you can set the property of Text using the overflow property of Text Widget. You have to set TextOverflow.clip for example:-

Flexible
(child: new Text("This is Dummy Long Text",
 style: TextStyle(
 fontFamily: "Roboto",
 color: Colors.black,
 fontSize: 10.0,
 fontWeight: FontWeight.bold),
 overflow: TextOverflow.clip,),)

Conclusion:

So, in this article, We have learned about how to Wrap Text on overflow in Flutter?

Keep Learning !!! Keep Fluttering !!!

Still, need Support for Flutter App Development? You know where to find us.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.