We can easily create in jetpack compose by using ButtomDrawer
and Surface
.
@Composable
fun RoundedBottomDrawer(){
val scope = rememberCoroutineScope()
val drawerState = rememberBottomDrawerState(initialValue = BottomDrawerValue.Closed)
BottomDrawer(
gesturesEnabled = true, // making scrollable to fit screen
drawerState = drawerState,
drawerBackgroundColor = Color.Transparent, // transparent background
drawerContent = {
Button(onClick = { scope.launch { drawerState.close() } }) {
Text("Close")
}
Spacer(modifier = Modifier.height(16.dp)) // some padding
BottomDrawerSurface()
},
content = {
// outside content
Button(onClick = { scope.launch { drawerState.open() } }) {
Text("Open BottomDrawer")
}
}
)
}
@Composable
fun BottomDrawerSurface() {
Surface(
color = Color.White,
shape = RoundedCornerShape(16.dp, 16.dp, 0.dp, 0.dp)
) {
// your design..
}
}
In your case you need top start and top end corners rounded for that add this attribute:
sheetShape = RoundedCornerShape(topEnd = 16.dp, topStart = 16.dp)
In your BottomSheetScaffold
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.