Hello I have a setup below for different views bas...

# compose

[nuhkoca]

Hello I have a setup below for different views based on different states. Views for Success and Error states already work as expected because they aren’t centered on the screen but LoadingView should be centered instead but it is always placed on top. How do I fix this? Thank you.

...
Scaffold(topBar = topBar) {
    Box(
        modifier = Modifier
            .padding(it)
            .verticalScroll(rememberScrollState())
    ) {
        when (collectionState) {
            CollectionState.Loading -> LoadingView()
            is CollectionState.Success -> {
                ScreenView(
                    collection = collectionState.collection,
                    onWatchlistItemClick = onWatchlistItemClick,
                    onDisclaimerTextClicked = onDisclaimerTextClicked
                )
            }
            CollectionState.Error -> ErrorView(onTryAgainClicked = onTryAgainClicked)
        }
    }
}
...

@Composable
private fun LoadingView() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator()
    }
}

[nuhkoca]

Scoping my composable with BoxScope seems to be working but I am not sure if this is a good approach

@Composable
private fun BoxScope.LoadingView() {
    Box(modifier = Modifier.align(Alignment.Center)) {
        CircularProgressIndicator()
    }
}

[trashcoder]

hi,

maybe the outer box should "fillMaxSize" as well?

Box(
        modifier = Modifier
            .padding(it)
            .verticalScroll(rememberScrollState())
    ) {

[Arsen]

Try this:

Scaffold {
    BoxWithConstraints(
        contentAlignment = Alignment.Center,
        modifier = Modifier.fillMaxSize()
    ) {
        Text("w: $maxWidth \nh: $maxHeight")

        val size = if (maxWidth < maxHeight) {
            maxWidth / 2
        } else {
            maxHeight / 2
        }

        CircularProgressIndicator(modifier = Modifier.size(size))
    }
}

[Arsen]

[nuhkoca]

@Arsen thanks but there are another states(Error and Success) which shouldn’t be centered on the screen. That’s the reason I cannot pass Alignment.Center in the parent box.

[nuhkoca]

@trashcoder thanks I forgot the post that part I did exactly the same 🙂

[Arsen]

Define separate BoxWithConstraints for each case (if/else or when)