How can I create ModalBottomSheetLayout with line on the top of in Compose? It has the solution for XML but how can I do it in Compose?
I tried to get a line by adding Box on BottomSheet but it didn't work. I tried as in this code:
Box(
modifier = Modifier.fillMaxSize()
) {
Divider(
Modifier
.size(width = 50.dp, height = 4.5.dp)
.align(Alignment.TopCenter)
.clip(CircleShape),
color = MaterialTheme.colors.onBackground,
thickness = 2.dp
)
ModalBottomSheetLayout(
modifier = Modifier.fillMaxSize(),
sheetShape = RoundedCornerShape(topStart = 25.dp, topEnd = 25.dp),
sheetState = sheetState,
sheetContent = {
BasketBottomSheetContent()
},
) {}
}
ModalBottomSheetLayout(
modifier = Modifier.fillMaxSize(),
sheetShape = RoundedCornerShape(topStart = 25.dp, topEnd = 25.dp),
sheetState = sheetState,
sheetContent = {
Column(Modifier
.navigationBarsPadding()
.padding(10.dp)
) {
LazyColumn(Modifier.fillMaxHeight(0.85f).fillMaxWidth()) {
items(3) {
Row(Modifier.fillMaxWidth()) {
Box(Modifier.fillMaxWidth()) {
Box {
AsyncImage(
modifier = Modifier
.width(getWidth(divisionValue = 2.7))
.padding(15.dp)
.clip(RoundedCornerShape(10.dp)),
model = ImageRequest.Builder(LocalContext.current)
.data(imageURL)
.scale(Scale.FIT)
.build(),
contentDescription = ""
)
}
Text(
text = "test",
modifier = Modifier.align(Alignment.Center)
)
Text(
text = "4.5 $",
modifier = Modifier.align(Alignment.CenterEnd)
)
Divider(Modifier.align(Alignment.BottomCenter))
}
}
}
}
}
} {}
There is an example like this, maybe it will be useful for you, you can edit the codes according to you.
https://developersbreach.com/modal-bottom-sheet-jetpack-compose-android/