How to use Text Ellipsis / Overflow in Flutter
In the example below I used:
- TextOverflow.clip
- TextOverflow.fade
- TextOverflow.ellipsis
- TextOverflow.visible
You can read more about the Text widget in this post:
Flutter Basics – What is and how to use Text widget in Flutter
Center(
child:
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.all(20.0),
color: Colors.grey.shade200,
width: 300,
child: const Text(
'flutterassets.com',
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(
'flutterassets.com',
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(
'flutterassets.com',
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(
'flutterassets.com',
maxLines: 1,
overflow: TextOverflow.visible,
softWrap: false,
style: TextStyle(
fontSize: 40,
color: Colors.green,
fontFamily: "Genos",
fontWeight: FontWeight.w900,
),
),
),
],
),
),
