Flutter TextOverflow Style Explained with Example

TextOverflow Style in flutter is used to handle overflow text in flutter. Here overflow means when text reaches a centered length and cross the defined area including width and height and cross over a line of text. There are basically 4 types of properties flutters provides us to control text overflow. We will be learning about all of them with example.

Properties of TextOverflow:

1. TextOverflow.clip : Clip the overflowed text to fit its parent container.
2. TextOverflow.ellipsis : Usages three dot ellipsis to show that text has been overflowed.
3. TextOverflow.fade : Fade overflow text to transparent text.
4. TextOverflow.visible : Render overflow text outside its parent container boundaries.

Flutter TextOverflow Style Explained with Example:

1. Defining 4 text widgets each with a TextOverflow property.

Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 25),
          child: const Text(
            "Sample Text Example of Ellipsis text in flutter",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.ellipsis,
          )),
      Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 25),
          child: const Text(
            "Sample Text Example of Clip text in flutter",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.clip,
            maxLines: 1,
            softWrap: false,
          )),
      Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 25),
          child: const Text(
            "Sample Text Example of Fade text in flutter",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.fade,
            maxLines: 1,
            softWrap: false,
          )),
      Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 25),
          child: const Text(
            "Sample Text Example of Visible text in flutter",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.visible,
            maxLines: 1,
            softWrap: false,
          ))

2. Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Column(children: [
      Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 25),
          child: const Text(
            "Sample Text Example of Ellipsis text in flutter",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.ellipsis,
          )),
      Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 25),
          child: const Text(
            "Sample Text Example of Clip text in flutter",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.clip,
            maxLines: 1,
            softWrap: false,
          )),
      Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 25),
          child: const Text(
            "Sample Text Example of Fade text in flutter",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.fade,
            maxLines: 1,
            softWrap: false,
          )),
      Container(
          padding: const EdgeInsets.fromLTRB(25, 25, 25, 25),
          child: const Text(
            "Sample Text Example of Visible text in flutter",
            style: TextStyle(fontSize: 22),
            overflow: TextOverflow.visible,
            maxLines: 1,
            softWrap: false,
          ))
    ])));
  }
}

App screenshot: