TextOverflow not working in Text Widget 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,
          )
        ],
      ),
    )),