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)
)
}
}
The lines are expected to be close as I haven given any padding or anything. It just happens when new line starts.
It was fixed by setting
lineHeight
same as text size. Thank you @ChiragThummar for your comment!!