'Center composable in Jetpack compose

Older versions of Jetpack compose dev-0.x used to have a Center composable to center a widget.

However, in the alpha version it has been removed and no specific composable made to handle this task.

In my case I want to show a progress indicator at the center until data is fetched:

Surface(color = MaterialTheme.colors.background) {
    val state = viewModel.userState
    if (state == null) {
        CircularProgressIndicator()
    } else {
        UserDigest(state = state)
    }
}

The result is obviously something like this:

enter image description here

And the indicator is at the corner.


Adding fillMaxSize() to the Indicator does not help either:

CircularProgressIndicator(modifier = Modifier.fillMaxSize())

enter image description here

So, how do I move it (generally a composable) to the center of an area?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source