How to solve for 'text overflow.ellipse' in flutter?

Question

I am unable to make my text stop extending the screen and overflowing. My code is as follows:

class OrderTileDisplay extends StatelessWidget {
  final MenuOrderData orderItem;
  final editable;
  OrderTileDisplay(this.orderItem, {this.editable = true});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        GestureDetector(
          onTap: (){},
          child: Container(
            color: Colors.transparent,
            margin: EdgeInsets.symmetric(vertical: 4),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Row(
                  children: [
                    Text(
                      orderItem.quantity.toString() + 'x',
                      style: Title16,
                    ),
                    SizedBox(
                      width: 8,
                    ),
                    Text(
                      orderItem.name, // OVERFLOWS WHEN IT IS A LONGER SENTENCE
                      style: Title18bold,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ],
                ),
                Row(
                  children: [
                    editable? Icon(Icons.edit, color: Colors.grey[200], size: 20,) : Container(),
                    SizedBox(width: 8,),
                    Text("￡" + Provider.of<CP>(context).getTotalForItem(orderItem).toStringAsFixed(2),
                      style: Title18bold,),
                  ],
                ),
              ],
            ),
          ),
        ),
Container(... and other stuff)

I have tried putting Text inside a container then Expanded widget but I keep getting errors. Not sure how to solve it.

Answer 1

Try to wrap your Row and Text inside a Flexible:

Flexible( //flexible here
  child: Row(
    children: [
      Text(
        orderItem.quantity.toString() + 'x',
        style: Title16,
      ),
      SizedBox(
        width: 8,
      ),
      Flexible( //and here
        child: Text(
          orderItem.name, // no more overflow
          style: Title18bold,
          overflow: TextOverflow.ellipsis, //working as expected
        ),
      ),
    ],
  ),
),

As the documentation states, TextOverflow says how overflowing text should be handled, but it will not work if it's parent don't have a fixed size. In this case, Flexible is been used to restrict the total size of the text to prevent overflow, when it reaches a very large width.