How to fade text when text is overflowed? - flutter

Question

I'm having a problem with handling texts when they overflow. I've tried overflow: TextOverflow.xxxx ,Expanded and Flexible but it's still doesn't work. Can anyone help me with this situation?
class _FeaturedCardState extends State<FeaturedCard>{
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
showToast(widget.name, context);
},
child: Padding(
padding: EdgeInsets.only(top: 5.0),
child: Container(
height: MediaQuery.of(context).size.height / 9,
width: MediaQuery.of(context).size.width,
child: Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
elevation: 3.0,
child: Row(
children: <Widget>[
Padding(
padding: EdgeInsets.all(5.0),
child: CircleAvatar(
radius: 20,
backgroundImage: AssetImage(widget.img),
backgroundColor: Colors.transparent,
),
),
SizedBox(width: 10),
Padding(
padding: EdgeInsets.fromLTRB(0.0, 3.0, 3.0, 3.0),
child: Wrap(
direction: Axis.vertical,
children: <Widget>[
SizedBox(height: 2),
Text(
widget.name,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 15,
color: Colors.blueGrey,
),
),
SizedBox(height: 3),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.attach_money,
size: 11,
),
Text(
widget.salary,
style: TextStyle(
fontSize: 10,
fontFamily: 'Montserrat',
color: Colors.blue[300]
),
)
],
),
SizedBox(height: 3),
Text( // This is the text that overflows
widget.desc,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
),
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
)
],
),
),
),
),
);
}
I've searched a lot of atricles and it still doesn't help. If anyone could come up with a solution for this that'll be really great. Any help would be appreciated, thank you.

Answer 1

You can try this,
class _FeaturedCardState extends State<FeaturedCard> {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(5.0),
child: Material(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 3.0,
child: InkWell(
borderRadius: BorderRadius.circular(5.0),
onTap: (){
showToast(widget.name, context);
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 20,
backgroundImage: AssetImage(widget.img),
backgroundColor: Colors.transparent,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
widget.name,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 15,
color: Colors.blueGrey,
),
),
const SizedBox(height: 3),
Text(
"\u0024${widget.salary}", // Char code for $ symbol "\u0024"
style: TextStyle(
fontSize: 10,
fontFamily: 'Montserrat',
color: Colors.blue[300],
),
),
const SizedBox(height: 3),
Text(
// This is the text that overflows
widget.desc,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12,
),
maxLines: 1,
softWrap: false,
overflow: TextOverflow.fade,
),
],
),
)
],
),
),
),
),
);
}
}

Answer 2

Add your Text in Container and set static width for Container
for example:
Container(
width: MediaQuery.of(context).size.width*0.7,
child: Text( "xxxxx",),
),