Flutter – TextOverFlow

The Text may overflow from the widgets like containers, cards, etc. The Text Widget has a property overflow to handle the overflow text in android, IOS, WEB, desktop applications. Overflow property has multiple parameters like clip, ellipsis, fade, visible, etc. Each has different functions to handle the text. So in this article, we will cover all the TextOverFlow parameters.

TextOverFlow Parameters

Ellipsis: Use an Ellipsis (. . .) to indicate that text is overflow.

Code: Text(
         'Wanted Text',
          overflow: TextOverflow.ellipsis,
         ),

Fade: Overflowed Text show as Transparent.

Code: Text(
          'Wanted Text',
           overflow: TextOverflow.ellipsis,
          ),

Visible: Render Text outside the container.

Code: Text(
         'Wanted Text',
          overflow: TextOverflow.visible,
         ),

Clip: Clip the text overflowing text to fix its container.

Code:  Text(
         'Wanted Text',
          overflow: TextOverflow.ellipsis,
         ),

Following Implementation Below:

Create a project and Import the material package.

Dart

import 'package:flutter/material.dart';

Now in void main( ) function call the runApp( ) method and call the class TextHome( ).

Dart

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

Now create a new class named as TextHome( ) this will be going to be a stateless class because our application does not change its state at run time. And return the MaterialApp( ).

Dart

class TextHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp();
 }

In the Property body of the scaffold create a column widget. Create a container widget with child property Text( ). In overflow property give ellipsis.

Dart

Widget build(BuildContext context) {
    return MaterialApp(
    home: Scaffold(
        appBar: AppBar(
          title: Text('textOverFlow Example')
          ),
        body: Column(
          children :[
             Container(
              padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
              child :Text(
                 "This is example of textoverflow ellipsis, In the end there are the dots",
               style: TextStyle(fontSize: 22),
               overflow: TextOverflow.ellipsis,
               textAlign: TextAlign.center,
              )),
          ])
          )
        );
  }

You can do it for all others just by changing TextOverflow parameters. The Final TextHome class will be like this for all overflow parameters.

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(const TextHome());
}

class TextHome extends StatelessWidget {
  const TextHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("TextOverflow"),
        ),
        body: Column(
          children: [
            Text("Ellipsis Example"),
            Container(
              padding: const EdgeInsets.all(10),
              child: const Text(
                "This is the example of TextOverflow ellipsis, In the end there are the dots",
                overflow: TextOverflow.ellipsis,
              ),
            ),
            Divider(),
            Text("fade Example"),
            Container(
              width: 500,
              height: 50,
              padding: const EdgeInsets.all(10),
              child: const Text(
                "This is the example of TextOverflow fade, In the end text is faded",
                overflow: TextOverflow.fade,
              ),
            ),
            Divider(),
            Text("clip Example"),
            Container(
              width: 500,
              height: 55,
              padding: const EdgeInsets.all(10),
              child: const Text(
                "This is the example of TextOverflow clip, This will clip the text",
                overflow: TextOverflow.clip,
              ),
            ),
            Divider(),
            Text("visible Example"),
            Container(
              width: 500,
              height: 50,
              padding: const EdgeInsets.all(10),
              child: const Text(
                "This is the example of TextOverflow visible, Text is visible",
                overflow: TextOverflow.visible,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Explanation: 

• Main is the principle method that runs on a program loaded.
• When loaded, Class TextHome is Run.
• Class TextHome is a stateless Widget as we only need to show overflowed text.
• As Flutter is based on widgets, we have to create one.
• A MaterialApp allows us to set the title and theme.
• MaterialApp Taking as a Home Scaffold.
• Scaffold allows us to set AppBar and the body of the page.
• As an AppBar is take a title.
• As a body, it takes a column.
• Column Taking a container widget.
• The container takes a child Text that we gonna apply the Overflow.
• Text first take the value that we are going to show and next applies overflowing.

Output: