I have a structure like that:
Scaffold -> Box -> ModalBottomSheet -> Some content stuff + Button
The idea is that when I open ModalBottomSheet both in half and full state, my Button stays in the same place – at the bottom of BottomSheet (like on the pic below).
However, I have zero ideas on how to do it. If I place a button inside a nested Box, it obviously doesn’t stand still, but rolls around with it. Please help me with how I should implement this.
Fun code:
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheetExample() {
val coroutineScope = rememberCoroutineScope()
val sheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden
)
val openSheet = remember { mutableStateOf(false) }
Scaffold { paddingValues ->
Box(modifier = Modifier
.fillMaxSize()
.padding(paddingValues),
contentAlignment = Alignment.Center
) {
Button(onClick = { openSheet.value = true }) {
Text(text = "Open Bottom Sheet")
}
if (openSheet.value) {
ModalBottomSheet(
onDismissRequest = { openSheet.value = false },
shape = SquircleShape(32.dp, 32.dp, 0.dp, 0.dp, cornerSmoothing = CornerSmoothing.Medium),
containerColor = Color.White,
content = {
Box(
modifier = Modifier
.heightIn(min = 0.dp, max = LocalConfiguration.current.screenHeightDp.dp - 90.dp
)
.fillMaxSize()
.padding(16.dp)
.background(Color.LightGray)
) {
Text(
modifier = Modifier.align(Alignment.TopCenter),
text = "This is the bottom sheet")
}
}
)
}
}
}
}
@Composable
fun rememberModalBottomSheetState(
initialValue: ModalBottomSheetValue
) = remember {
ModalBottomSheetState(initialValue = initialValue)
}
data class ModalBottomSheetState(
val initialValue: ModalBottomSheetValue
)
enum class ModalBottomSheetValue {
Hidden, Expanded
}