How to use Text Widget Overflow in Flutter

In Flutter, the Text widget is a fundamental component to display text within an app. However, the overflow issue arises when the text content exceeds the available space within the widget. We can wrap the Text widget with the Flexible or Expended widget, and effectively use the overflow property of Text widget to overcome this issue.

Error

If the overflow is improperly handled, it can lead to some common problems, including text being cut off, not visible, or extending beyond the boundaries of its container, which can make the app look unappealing and negatively impact readability. We can see the following error in the terminal.

The following assertion was thrown during layout:
A RenderFlex overflowed by 172 pixels on the right.

This error will arise in the terminal when the available content cannot be rendered on the screen, as shown below.

We can solve this error by wrapping the Text widget with Flexible or Expended. Both widgets allow the child widget to occupy available space within its parent widget. 

Row(
  children: const [
    Flexible(
      child: Text(
        'educative.io/create/answers',
        maxLines: 1,
        softWrap: false,
        style: TextStyle(
          fontSize: 50,
          color: Colors.blue,
          fontFamily: "Genos",
          fontWeight: FontWeight.w800,
        ),
      ),
    ),
  ],
),

Text widget overflow property

After solving the rendering problem, the text is still cut off or not visible. We can utilize the TextOverflow property in the Text widget to manage how the text will be displayed when it overflows the available space. The TextOverflow property offers four options to handle text-overflow:

  • TextOverflow.clip

  • TextOverflow.fade

  • TextOverflow.ellipsis

  • TextOverflow.visible

Let's explain each of them:

  1. Clip overflow: The TextOverflow.clip option simply clips the text when it overflows the container, making the excess content invisible. This may result in an incomplete message being displayed.

  2. Fade overflow: The TextOverflow.fade option gradually fades out the text as it exceeds the container boundaries. This provides a visually appealing effect, but readability might be compromised if the text is too long.

  3. Ellipsis overflow: The TextOverflow.ellipsis option truncates the text with an ellipsis (...) at the end when it overflows the container. This indicates that more content is available, and the user can tap or interact with it to view the full text.

  4. Visible overflow: The TextOverflow.visible option displays the entire text, even if it extends beyond the container boundaries. This can cause overlapping of other widgets, so it's essential to manage the layout properly.

Code example

In the code below, we use a Column to display four Text widgets, each demonstrating a different TextOverflow property: clip, fade, ellipsis, and visible. The SizedBox widgets provide spacing between each example. The output will show the behavior of text overflow for each option when the content exceeds the available space.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Educative Answers'),
        ),
        body: Center(
        child:
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.all(20.0),
              color: Colors.grey.shade200,
              width: 300,
              child: const Text(
                'Educative.io/answers',
                maxLines: 1,
                overflow: TextOverflow.clip,
                softWrap: false,
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.green,
                  fontFamily: "Genos",
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20.0),
              color: Colors.grey.shade200,
              width: 300,
              child: const Text(
                'Educative.io/answers',
                maxLines: 1,
                overflow: TextOverflow.fade,
                softWrap: false,
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.green,
                  fontFamily: "Genos",
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20.0),
              color: Colors.grey.shade200,
              width: 300,
              child: const Text(
                'Educative.io/answers',
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
                softWrap: false,
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.green,
                  fontFamily: "Genos",
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.all(20.0),
              color: Colors.grey.shade200,
              width: 300,
              child: const Text(
                'Educative.io/answers',
                maxLines: 1,
                overflow: TextOverflow.visible,
                softWrap: false,
                style: TextStyle(
                  fontSize: 40,
                  color: Colors.green,
                  fontFamily: "Genos",
                  fontWeight: FontWeight.w900,
                ),
              ),
            ),
          ],
        ),
      ),
      ),
    );
  }
}

Output

After running the above code, we can see the following output.

Conclusion

In Flutter, the Text widget is essential for displaying text, but overflow issues can arise. The TextOverflow property provides four options to handle overflow: clip (truncated), fade (gradually fades), ellipsis (truncated with an ellipsis), and visible (extends beyond the container). Properly managing overflow ensures a visually appealing and user-friendly UI.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved