What I have is a column with vertical scroll, as components in it can be added/removed dynamically. What I am trying to achieve is position the button on the bottom of the screen, if the components don’t fill it, and position it below them in the scroll column, if they do. I have achieved a similar effect, but what i’m wondering is if there is a better way to do it, since it doesn’t work best when its at the point of threshold.
Any help is greatly appreciated!
BoxWithConstraints {
val screenHeight = constraints.maxHeight
val contentHeight = remember { mutableStateOf(0) }
Column(
Modifier
.fillMaxWidth()
.verticalScroll(rememberScrollState())
.onGloballyPositioned { coordinates ->
contentHeight.value = coordinates.size.height
}
.padding(horizontal = Constants.HORIZONTAL_PADDING)
) {
// Indefinite views here
// ...
if (contentHeight.value >= screenHeight) {
// If content does not fit within the screen, place the button inside the scrollable column
MainButton(
modifier = Modifier
.fillMaxWidth()
.padding(top = 16.dp),
text = "Next"
) {
focusManager.clearFocus()
viewModel.onNext()
}
Spacer(Modifier.height(12.dp))
}
}
if (contentHeight.value < screenHeight) {
// If content fits within the screen, place the button outside the scrollable column
Column(Modifier
.fillMaxSize()
.padding(horizontal = Constants.HORIZONTAL_PADDING),
verticalArrangement = Arrangement.Bottom
) {
MainButton(
modifier = Modifier.fillMaxWidth().padding(top = 16.dp),
text = "Next"
) {
focusManager.clearFocus()
viewModel.onNext()
}
Spacer(Modifier.height(12.dp))
}
}
}