How to Wrap Text on Overflow With Clip, Ellipsis and Fade in Flutter App

While making a dynamic app, you may get any kind of text with any length. Sometimes, the overflow text may disturb the layout of your app. In this guide, we are going to show you the way to wrap the overflown text with clip, ellipsis, and fade effect. 

Wrap Overflow Text With Clip:

Text("longtext", //put your own long text here.
    maxLines: 3,
    overflow:TextOverflow.clip,
)

Output:

Wrap Overflow Text With Ellipsis

Text("longtext", //put your own long text here.
    maxLines: 3,
    overflow:TextOverflow.ellipsis,
)

Output:

Wrap Overflow Text with Fade:

Text("longtext", //put your own long text here.
    maxLines: 3,
    overflow:TextOverflow.fade,
)

Output:

Full Dart Code:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: "Test App",
        home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget{
  String longtext = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio." + 
                "Praesent libero. Sed cursus ante dapibus diam. Sed nisi." + 
                "Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.";
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
      appBar: AppBar( 
         title: Text("Wrap Overflown Text"),
         backgroundColor: Colors.redAccent,
      ),
      body: Container( 
        child: Card( 
          child: Padding(
            padding: EdgeInsets.all(20),
            child: Text(longtext, //put your own long text here.
                  maxLines: 3,
                  overflow:TextOverflow.clip,
                  style: TextStyle(fontSize: 20),
            ),
          )
        )
      )
    );
  }
}

In this way, you can wrap overflown text in Flutter App.