I just can't make this work. I have the below list item and i just can't make the description Text not overflow. I've used Flexible to wrap it, but it just doesn't do anything. I have no more ideas on what to try out :(

class CardVerticalListItem extends StatelessWidget {
  ProductItem _productItem;
  Offer? _offer;

  CardVerticalListItem(this._productItem, this._offer);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.of(context).push(PageRouteBuilder(
            pageBuilder: (_, __, ___) => new ProductDetails(
                  title: _productItem.name,
                  id: _productItem.id,
                  image: _productItem.thumbnail_url,
                ),
            transitionDuration: Duration(milliseconds: 600),
            transitionsBuilder: (_, Animation<double> animation, __, Widget child) {
              return Opacity(
                opacity: animation.value,
                child: child,
              );
            }));
      },
      child: Padding(
        padding: const EdgeInsets.only(top: 15.0, left: 15.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Stack(
              children: <Widget>[
                Hero(
                  tag: 'hero-tag-${_productItem.id}',
                  child: Material(
                    borderRadius: BorderRadius.all(Radius.circular(10.0)),
                    color: Color(0xFF1E2026),
                    child: Container(
                      width: 130.0,
                      height: 130.0,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: CachedNetworkImageProvider(
                            _productItem.thumbnail_url,
                            errorListener: () => new Icon(Icons.error),
                          ),
                          fit: BoxFit.contain,
                        ),
                        boxShadow: [BoxShadow(blurRadius: 0.0, color: Colors.black87)],
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        gradient: LinearGradient(colors: [
                          Color(0xFF1E2026),
                          Color(0xFF23252E),
                        ], begin: Alignment.topLeft, end: Alignment.bottomRight),
                      ),
                    ),
                  ),
                ),
                if (_offer == null) ...{
                  Container(),
                } else ...{
                  Align(
                    alignment: Alignment.topLeft,
                    child: Padding(
                      padding: const EdgeInsets.only(left: 2.0, top: 2.0),
                      child: Container(
                        height: 35.0,
                        width: 35.0,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.all(Radius.circular(40.0))),
                        child: Center(
                          child: Text(
                            "${_offer!.percentage}%",
                            style: TextStyle(
                                fontFamily: "Sofia",
                                color: Colors.white,
                                fontWeight: FontWeight.w700,
                                fontSize: 14.0),
                          ),
                        ),
                      ),
                    ),
                  ),
                }
              ],
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15.0, top: 25.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    _productItem.name,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.white,
                        fontFamily: "Sofia",
                        fontSize: 16.0,
                        fontWeight: FontWeight.w600),
                  ),
                  SizedBox(height: 2.0),
                  Text(
                    _productItem.description,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.white70,
                        fontFamily: "Sofia",
                        fontSize: 14.0,
                        fontWeight: FontWeight.w300),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      Text(
                        "${_productItem.display_price} ${_productItem.currency}",
                        style: TextStyle(
                            color: Colors.white,
                            fontFamily: "Sofia",
                            fontSize: 16.0,
                            fontWeight: FontWeight.w600),
                      ),
                      if (_offer == null) ...{
                        Container(),
                      } else ...[
                        SizedBox(width: 5.0),
                        Text(
                          "${_offer!.applyOffer(_productItem)} ${_productItem.currency}",
                          style: TextStyle(
                              color: Colors.white70,
                              fontFamily: "Sofia",
                              fontSize: 13.0,
                              decoration: TextDecoration.lineThrough,
                              fontWeight: FontWeight.w600),
                        )
                      ]
                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is the widget with the issue:

Text(
                    _productItem.description,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.white70,
                        fontFamily: "Sofia",
                        fontSize: 14.0,
                        fontWeight: FontWeight.w300),
                  ),

CodePudding user response：

try to use Expanded wrap, example:

Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 15.0, top: 25.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text(
                    _productItem.name,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.white,
                        fontFamily: "Sofia",
                        fontSize: 16.0,
                        fontWeight: FontWeight.w600),
                  ),
                  SizedBox(height: 2.0),
                  Text(
                    _productItem.description,
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        color: Colors.white70,
                        fontFamily: "Sofia",
                        fontSize: 14.0,
                        fontWeight: FontWeight.w300),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: <Widget>[
                      Text(
                        "${_productItem.display_price} ${_productItem.currency}",
                        style: TextStyle(
                            color: Colors.white,
                            fontFamily: "Sofia",
                            fontSize: 16.0,
                            fontWeight: FontWeight.w600),
                      ),
                      if (_offer == null) ...{
                        Container(),
                      } else ...[
                        SizedBox(width: 5.0),
                        Text(
                          "${_offer!.applyOffer(_productItem)} ${_productItem.currency}",
                          style: TextStyle(
                              color: Colors.white70,
                              fontFamily: "Sofia",
                              fontSize: 13.0,
                              decoration: TextDecoration.lineThrough,
                              fontWeight: FontWeight.w600),
                        )
                      ]
                    ],
                  )
                ],
              ),
            ),
          ),