I have created a horizontal pager and I have tried multiple things but unable to eliminate extra space after last item. Spacing before first item is correct but a lot after last item.
I want last space also to be uniform just like first.
HorizontalPager(
verticalAlignment = Alignment.Top,
count = 3,
state = pagerState,
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
.constrainAs(pager) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(beneTitle.bottom)
},
contentPadding = PaddingValues(end = 80.dp),
itemSpacing = 16.dp
) { page -\>
val currentItem = additionalBenefitItem.listItems\[page\]
Box(modifier = Modifier.width(260.dp)) {
Card(
modifier = Modifier.clickable {
viewModel.updateSelectedBenefitCardIndex(page)
onCardClick()
}.padding(top = 20.dp),
elevation = 2.dp,
shape = RoundedCornerShape(corner = CornerSize(16.dp)),
backgroundColor = Color(
android.graphics.Color.parseColor(
currentItem.backgroundColor
)
)
) {
ConstraintLayout(
modifier = Modifier.fillMaxWidth(),
) {
val (
title, description, image, feature1
) = createRefs()
Text(
text = currentItem.title,
style = Theme.typography.bold,
modifier = Modifier
.constrainAs(title) {
start.linkTo(parent.start, 16.dp)
top.linkTo(parent.top, 40.dp)
},
color = Theme.colors.primary
)
Text(
text = currentItem.description!!,
style = Theme.typography.smallTextAdd,
modifier = Modifier
.constrainAs(description) {
start.linkTo(parent.start, 16.dp)
top.linkTo(title.bottom, 10.dp)
end.linkTo(image.start, 24.dp)
width = Dimension.fillToConstraints
},
color = Theme.colors.primary
)
AsyncImage(
model = currentItem.image,
contentDescription = null,
modifier = Modifier
.constrainAs(image) {
end.linkTo(parent.end, 14.dp)
top.linkTo(parent.top, 42.dp)
}
.height(72.dp)
.width(92.dp)
)
Row(
modifier = Modifier
.padding(bottom = 8.dp, start = 16.dp, end = 18.dp)
.fillMaxWidth()
.constrainAs(feature1) {
start.linkTo(parent.start, 16.dp)
top.linkTo(image.bottom, 20.dp)
end.linkTo(parent.end, 18.dp)
},
horizontalArrangement = Arrangement.SpaceBetween
) {
val color = android.graphics.Color.parseColor(
currentItem.textColor
)
currentItem.featureList.forEach {
BulletPoints( // custom compose function
text = it,
color = Color(color),
modifier = Modifier.padding(top = 0.dp),
textStyle = Theme.typography.style400_10_12
)
}
}
}
AsyncImage(
model =
currentItem.logoUrl,
contentDescription = null,
modifier = Modifier
.padding(16.dp, 0.dp, 20.dp, 20.dp)
.align(Alignment.TopStart)
.height(44.dp)
.width(44.dp)
`your text` .border(BorderStroke(2.dp,Color(
android.graphics.Color.parseColor(
currentItem.backgroundColor
) )), shape = CircleShape)
)
}
}`