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