How to align VerticalPager page with pager indicators?

Question

Pager indicator and pager are in two separate libraries. I've been unable to get the indicators to sit to the right of the page.

@OptIn(ExperimentalPagerApi::class)
@Composable
fun Photos(photos: List<String>){
    val state = rememberPagerState()
    Row{
        VerticalPager(count = photos.size, state = state, contentPadding = PaddingValues(vertical = 32.dp)) {
            AsyncImage(model = photos[it], contentDescription = null, modifier = Modifier.fillMaxSize())
        }
        VerticalPagerIndicator(pagerState = state)
    }
}

I've tried setting a custom width for the AsyncImage but it's not giving me what I'm expecting which is enough space for the indicator to sit horizontally next to the page.

Answer 1

Set verticalAlignment to Alignment.CenterVertically, it's Alignment.Top by default

Row(
    verticalAlignment = Alignment.CenterVertically
){
    VerticalPager(count = photos.size, state = state, contentPadding = PaddingValues(vertical = 32.dp)) {
        AsyncImage(model = photos[it], contentDescription = null, modifier = Modifier.fillMaxSize())
    }
    VerticalPagerIndicator(pagerState = state)
}