Flutter Flexible Text is overflowing in Column

Question

I am creating a list tile that has a leading image downloaded from the internet. The image could be landscape or portrait. Based on the image size space available for the title text change.

When the image get downloaded from the internet available space get re-adjusted.

To fix this problem I used Flexible widget and TextOverflow.ellipsis. This works well until I add the Flexible to a column to add a sub heading.

Now I am getting overflow error for the longer title texts.

Any idea how to fix this?

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

Solution 1

Wrap the Column with a Flexible instead of wrapping the Text with a 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),
                  ),
                ),
              ],
            ),
          ),

Solution 2

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