Jetpack compose constraintlayout linkTo not working properly

Question

I have the following code:

LazyColumn(
Modifier
    .fillMaxSize()
    .background(Color.White)) {
items(articleDetail) { article ->
    ConstraintLayout(Modifier.clickable {
        val bundle = Bundle()
        bundle.putInt(ArticlesFragment.ARTICLE_ID, article.id)
        findNavController(fragment).navigate(R.id.action_ArticlesFragment_to_ArticleDetailFragment, bundle)
    }) {
        val (title, image, date, description, line) = createRefs()
        AsyncImage(
            model = article.thumbnail,
            contentDescription = null,
            modifier = Modifier
                .width(100.dp)
                .height(100.dp)
                .padding(5.dp)
                .constrainAs(image) {
                    top.linkTo(parent.top)
                    start.linkTo(parent.start)
                }
        )
        Text(article.date,
             style = MaterialTheme.typography.bodySmall,
             modifier = Modifier.constrainAs(date) {
                 top.linkTo(image.bottom)
                 start.linkTo(image.start)
                 end.linkTo(image.end)
             })
        Text(
            article.title,
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier
                .padding(5.dp, 0.dp)
                .constrainAs(title) {
                    top.linkTo(parent.top)
                    start.linkTo(image.end)
                    end.linkTo(parent.end)

                })
        Text(
            article.summary,
            style = MaterialTheme.typography.bodyMedium,
            modifier = Modifier
                .constrainAs(description) {
                top.linkTo(title.bottom)
                start.linkTo(image.end)
                end.linkTo(parent.end)
            })
        Box(
            Modifier
                .height(2.dp)
                .background(Color.DarkGray)
                .constrainAs(line) {
                    start.linkTo(image.end)
                    end.linkTo(parent.end)
                    top.linkTo(description.bottom)
                })
    }
}
}

And the result is the following:

As it can be seen here the constraint of the text is not working properly. Even if I add start.linkTo(image.end) in the description and in the title the text is not constrained with the image end. How can I make to force this?

Answer 1

Add width to your Text to achieve start of text from end of image in constraintlayout.

Like - width = Dimension.fillToConstraints

Example:

 Text(
            article.summary,
            style = MaterialTheme.typography.bodyMedium,
            modifier = Modifier
                .constrainAs(description) {
                top.linkTo(title.bottom)
                start.linkTo(image.end)
                end.linkTo(parent.end)
                width = Dimension.fillToConstraints //Add this
            })