TextOverflow not working in Text Widget Flutter - flutter

Question

i am trying to clip the description of the foodItem i have in a flutter app i tried adding 'overflow: TextOverflow.clip' to my Text() Widget, but that didn't really work... i'll share the specific Widget and then the full file..
Text('This is a very long description.....................',
overflow: TextOverflow.clip,
softWrap: true,
style: TextStyle(
fontSize: 9.0,
color: Colors.black38,
),
),
the full file..
import 'package:eva_icons_flutter/eva_icons_flutter.dart';
import 'package:flutter/material.dart';
import '../model/food.dart';
import '../style/theme.dart' as Style;
class FoodList extends StatelessWidget {
final foodItems = <Food>[
Food(
title: "Jimmy's Steak",
price: "34.00",
img: 'assets/icons/foods/food5.jpg',
rating: "4.2"
),
Food(
title: "Butter Steak",
price: "45.00",
img: 'assets/icons/foods/food6.jpg',
rating: "4.2"
),
Food(
title: "Sushi",
price: "10.00",
img: 'assets/icons/foods/food7.jpg',
rating: "4.7"
)
];
#override
Widget build(BuildContext context) {
return ListView(
scrollDirection: Axis.horizontal,
children: foodItems.map<Widget>((Food food) {
return GestureDetector(
onTap: () {
},
child: Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0, bottom: 20.0),
child: Container(
width: 170,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.grey[300], width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
height: 180.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft:Radius.circular(10), topRight:Radius.circular(10)),
image: DecorationImage(
image: AssetImage(food.img),
fit: BoxFit.cover
)
),
),
SizedBox(
height: 10.0,
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Text(
food.title,
style: TextStyle(
color: Colors.black,
fontSize: 12.0),
),
),
SizedBox(
height: 5.0,
),
Padding(
padding: const EdgeInsets.only(left:10.0, right: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text('This is a very long description.....................',
overflow: TextOverflow.clip,
softWrap: true,
style: TextStyle(
fontSize: 9.0,
color: Colors.black38,
),
),
SizedBox(
width: 5.0,
),
/* Icon(EvaIcons.star, color: Style.Colors.mainColor, size: 8.0,),
Icon(EvaIcons.star, color: Style.Colors.mainColor, size: 8.0,),
Icon(EvaIcons.star, color: Style.Colors.mainColor, size: 8.0,),
Icon(EvaIcons.star, color: Style.Colors.mainColor, size: 8.0,),
Icon(EvaIcons.star, color: Colors.black38, size: 8.0,), */
SizedBox(
width: 5.0,
),
/* Text("(200)", style: TextStyle(
fontSize: 9.0,
color: Colors.black38
),),
*/ ],
),
Text( "\$" + food.price, style: TextStyle(
fontSize: 10.0,
color: Colors.black,
fontWeight: FontWeight.bold
),)
],
),
)
],
),
),
)
);
}).toList());
}
}
I tried using the ClipRect Widget as well, by wrapping my Text Widget into it but that still didn't work.. I am Kindo Of stuck here, any help would be much appreciated..

Answer 1

You can set a limit of String for text like below.
String text =
"This is a very long description.........his is a very long description.........his is a very long description.........his is a very long description.....................";
Text(
text.length > 30 ? '${text.substring(0, 30)}......' : text,
style: TextStyle(
fontSize: 9.0,
color: Colors.black38,
),
)
You could also check the below code.
Center(
child: Container(
padding: EdgeInsets.all(4.0),
color: Colors.lime,
width: 200.0,
child: Row(
children: <Widget>[
Flexible(
child: RichText(
overflow: TextOverflow.ellipsis,
strutStyle: StrutStyle(fontSize: 12.0),
text: TextSpan(
style: TextStyle(color: Colors.black),
text: 'A very long text :)'),
),
),
Container(
width: 100.0,
height: 100.0,
color: Colors.orangeAccent,
)
],
),
)),