FlutterWorld
Published in

FlutterWorld

Flutter Text Wrapping/Ellipsis

Flutter Text Widget has a lot of attributes but here we will focus only on overflow param.

1. clip

Clip the overflowing text to fix its container.

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.clip,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),

Output:

TextOverflow.clip

2.fade

Fade the overflowing text to transparent.

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.fade,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),

Output:

TextOverflow.fade

3.ellipsis

Use an ellipsis to indicate that the text has overflowed.

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.ellipsis,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),

Output:

TextOverflow.ellipsis

4.visible

Render overflowing text outside of its container.

SizedBox(
width: 120.0,
child: Text(
"Enter Long Text",
maxLines: 1,
overflow: TextOverflow.visible,
softWrap: false,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20.0),
),
),

Output:

TextOverflow.visible

--

--

--

The fastest growing community which makes development easier

Recommended from Medium

Does Windows 11 build your Android app faster?

What is Android Enterprise?

Customizing an App Bar in Flutter

The state of Jetification in early 2019 (plus a bonus Gradle plugin)

Databinding A Beginner’s view point

Build opencv4.0.1 & opencv_contrib for Android on macOS

Serializable or Parcelable? Why and Which one?

State management in Flutter

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jitesh Mohite

Jitesh Mohite

I am technology enthusiastic, want to learn things quickly and dive deep inside it. I always believe in developing logical things which makes impact on end user

More from Medium

Add Firebase to Flutter on Windows

Flutter Widgets Explain :

Flutter Web Template — Flutter Web Drawer Widget Example