Unexpected gap between Text lines in jetpack compose

364 views Asked by At

I am getting too much gap between text lines in Text composable whenever it enters in new line Here is the code. I am using material 3 1.1.2 and jetpack compose version 1.5.1

@Composable
fun Product(productItem: ProductItem) {
    Column(
        modifier=Modifier.clickable {  },
        verticalArrangement = Arrangement.spacedBy(1.sdp)
    ) {
        Box(contentAlignment = Alignment.BottomStart) {
            AsyncImage(
                model = productItem.image,
                contentDescription = "",
                contentScale = ContentScale.Crop,
                modifier = Modifier.height(50.sdp)
            )
            ElevatedCard(
                modifier = Modifier.padding(start = 2.sdp, bottom = 2.sdp),
                elevation = CardDefaults.elevatedCardElevation(defaultElevation = 3.sdp),
                shape = AbsoluteRoundedCornerShape(3.sdp),
                colors = CardDefaults.cardColors(containerColor = Color.White)
            ) {
                Text(
                    text = productItem.price,
                    modifier = Modifier.padding(2.sdp),
                    fontSize = 6.ssp,
                    fontWeight = FontWeight(500)
                )
            }
        }
        Text(
            text = productItem.name,
            fontSize = 6.ssp,
            fontWeight = FontWeight(500)
        )
        Text(
            text = productItem.sku,
            fontSize = 5.ssp,
            fontWeight = FontWeight(400)
        )
    }
}

Here is the image with issue enter image description here

The lines are expected to be close as I haven given any padding or anything. It just happens when new line starts.

1

There are 1 answers

0
dum On

It was fixed by setting lineHeight same as text size. Thank you @ChiragThummar for your comment!!