Как использовать переполнение текста внутри вложенных строк / столбцов во флаттере?

Question

Вот мое дерево виджетов, которое вызывает у меня проблемы:

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,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    ],
  ),
);

Теперь проблема в том, что я получаю этот эффект, а не обрезаю текст.

введите описание изображения здесь

Примечание: Я пробовал и другие ответы, используя виджеты Expanded и Flexible, но ни один из них не работал у меня.

Любая помощь будут оценены!

Answer 1

Поместите текстовое поле в гибкий виджет вроде этого (работает для меня):

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