Гибкий текст Flutter переполняется в столбце

Question

Я создаю плитку списка с начальным изображением, загруженным из inte rnet. Изображение могло быть альбомным или портретным. В зависимости от размера изображения, доступного для изменения текста заголовка.

При загрузке изображения из Inte rnet доступное пространство будет повторно настроено.

Чтобы решить эту проблему, я использовал гибкий виджет и TextOverflow.ellipsis. Это работает до тех пор, пока я не добавлю гибкий столбец для добавления подзаголовка.

Теперь я получаю ошибку переполнения для более длинных текстов заголовков.

Есть идеи, как это исправить?

Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          constraints: BoxConstraints(minHeight: 50, maxHeight: 100),
          child: ClipRRect(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(8),
                bottomLeft: Radius.circular(8)),
            child: FadeInImage(
              placeholder: AssetImage('images/placeholder-image.png'),
              image: NetworkImage(post.imageURL),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Flexible(
              child: Container(
                padding: const EdgeInsets.fromLTRB(8, 8, 5, 5),
                child: new Text(
                  post.title,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 15,
                      color: Theme.of(context).primaryColor),
                ),
              ),
            ),
          ],
        ),
      ],
    )

Answer 1

Оберните Column Flexible вместо Text Flexible:

Flexible(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.fromLTRB(8, 8, 5, 5),
                  child: new Text(
                    post.title,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                        color: Theme.of(context).primaryColor),
                  ),
                ),
              ],
            ),
          ),

Answer 2

Используйте Expanded

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Container(
          constraints: BoxConstraints(minHeight: 50, maxHeight: 100),
          child: ClipRRect(
            borderRadius: const BorderRadius.horizontal(
              left: Radius.circular(8),
            ),
            child: FadeInImage(
              placeholder: NetworkImage('https://picsum.photos/100'),
              image: NetworkImage('https://picsum.photos/100'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Title',
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                    color: Colors.white,
                  ),
                ),
                Text(
                  'Subtitle',
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 15,
                    color: Colors.white,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}