How to Wrap Text On Overflow In Flutter ?

· 4 min read
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:

How to Wrap Text On Overflow In Flutter
How to Wrap Text On Overflow In Flutter

Using ellipsis

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

We will get output like the below:

Ellipse In Flutter
Ellipse In Flutter

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 Fade
Using Fade

Using Clip

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

We will get output like the below:

Using Clip
Using Clip

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 GuideFlutter ProjectsCode 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.

Leave a Reply