How to use text overflow inside nested row/columns in flutter?

user_12077817 0
Viewed 385

Here's my widget tree that's causing me the problems:

Container(
  margin: EdgeInsets.all(15),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      ClipRRect(
        borderRadius: cardBorderRadius,
        child: Image(
          image: NetworkImage(widget.article["thumbnail"]),
          width: MediaQuery.of(context).size.width * .18,
          height: MediaQuery.of(context).size.width * .18,
          fit: BoxFit.cover,
        ),
      ),
      Container(
        margin: EdgeInsets.only(left: 15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.only(top: 15),
              child: Text(
                widget.article["title"],
                overflow: TextOverflow.clip,
                style: TextStyle(
                  fontWeight: FontWeight.w700,
                  fontSize: 28,
                ),
              ),
            ),
            Container(
              padding: EdgeInsets.only(top: 20),
              child: Row(
                children: <Widget>[
                  Container(
                    margin: EdgeInsets.only(right: 5),
                    child: Icon(Icons.star_border, size: 15),
                  ),
                  Text(
                    '${widget.article["readTime"] ~/ 60} min',
                    overflow: TextOverflow.clip,
                    maxLines: 3,
                    softWrap: true,
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

Now the problem is I am getting this effect rather than text get clipped.

enter image description here

Note: I have tried other answers as well using the Expanded & Flexible widgets but none of them worked for me.

Any help will be appreciated!

dart flutter widget
1 Answers

Put the textfield into a flexible widget like this (work for me):

            Row(
              children: <Widget>[
                Flexible(
                  child: Text(
                    "some text",
                    textAlign: TextAlign.start,
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ... more widgets
              ],
            ),
user_63637170
Related