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.clipTextOverflow.fadeTextOverflow.ellipsisTextOverflow.visible
Let's explain each of them:
Clip overflow: The
TextOverflow.clipoption simply clips the text when it overflows the container, making the excess content invisible. This may result in an incomplete message being displayed.Fade overflow: The
TextOverflow.fadeoption 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.Ellipsis overflow: The
TextOverflow.ellipsisoption 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.Visible overflow: The
TextOverflow.visibleoption 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